【悲战蓝桥杯web国赛】Javascipt数组方法总结

1、join(): 数组转字符串

/** join('参数') 
 * 把数组的元素，以传入的参数进行分割，转换成字符串
 */ 
 let arr = ['我', '爱', '你']; 
let str = arr.join(','); 
console.log(str) // '我，爱，你'

2、slice(),数组截取

/** slice('参数') 
 * 把数组的元素，截取指定长度
 */ 
 let arr = ['我', '爱', '你']; 
let str = arr.slice(0,1)
console.log(str) // '我

3、concat(),数组连接

//数据连接 concat(参数1,参数2)
let arr1=["我","在"]
let arr2=["摸","鱼"]
console.log(arr1.concat(arr2));

4、push和unshift后插，前插

//push和unshift后插，前插
let arr=["我","在"]
arr.push("你")
console.log(arr) //['我', '在', '你']
arr.unshift("摸鱼")
console.log(arr)//['摸鱼', '我', '在', '你']

5、pop和shift后删，前删

//push和unshift后插，前插
let arr=['摸鱼', '我', '在', '你']
arr.pop()
console.log(arr) //['摸鱼', '我', '在']
arr.shift()
console.log(arr)//['我', '在']

6、reverse(),数组倒置

//reverse()数组倒置
let arr=['摸鱼', '我', '在', '你']
arr.reverse()
console.log(arr) //['你', '在', '我', '摸鱼']

7、sort(),数组排序

//sort()数组排序
let arr=[2,6,4,9,3,6]
console.log(arr) // [2, 3, 4, 6, 6, 9]
// 需要升序或者降序则需要传入一个函数参数
var arr = [3,2,3,34,12,23,234,84,9];
arr.sort(function (a, b) {
    return a - b;
});
// 结果：2,3,3,9,12,23,34,84,234
// 降序
var arr = [3,2,3,34,12,23,234,84,9];
arr.sort(function (a, b) {
    return b - a;
});

// 按age升序排列

var users =[

        { "name": "has",   "age": 17, "height": 165 },

        { "name": "saf",   "age": 20, "height": 172 },

        { "name": "gngh",  "age": 45, "height": 182 },

        { "name": "yjerw", "age": 42, "height": 156 },

        { "name": "cvb",   "age": 22, "height": 176 },

        { "name": "wetty", "age": 32, "height": 178 },

        { "name": "aDNY",  "age": 34, "height": 175 }

     ]

users.sort(function (a, b) {

    return a.age - b.age;

});

// 结果（升序）：

/*

name:has age:17 height:165

name:saf age:20 height:172

name:cvb age:22 height:176

name:wetty age:32 height:178

name:aDNY age:34 height:175

name:yjerw age:42 height:156

name:gngh age:45 height:182





// 按name排列

var users =[

        { "name": "has",   "age": 17, "height": 165 },

        { "name": "saf",   "age": 20, "height": 172 },

        { "name": "gngh",  "age": 45, "height": 182 },

        { "name": "yjerw", "age": 42, "height": 156 },

        { "name": "cvb",   "age": 22, "height": 176 },

        { "name": "wetty", "age": 32, "height": 178 },

        { "name": "aDNY",  "age": 34, "height": 175 }

     ]

var users.sort(function (a, b) {

    return a.name - b.name;

});

// 结果：

/*

name:aDNY age:34 height:175

name:cvb age:22 height:176

name:gngh age:45 height:182

name:has age:17 height:165

name:saf age:20 height:172

name:wetty age:32 height:178

name:yjerw age:42 height:156



// 按布尔值排列

var users=[

        { "name": "has",   "age": 17, "height": 165, "state": true},

        { "name": "saf",   "age": 20, "height": 172, "state": false},

        { "name": "gngh",  "age": 45, "height": 182, "state": false },

        { "name": "yjerw", "age": 42, "height": 156, "state": true },

        { "name": "cvb",   "age": 22, "height": 176, "state": false },

        { "name": "wetty", "age": 32, "height": 178, "state": true },

        { "name": "aDNY",  "age": 34, "height": 175, "state": false }

     ]

users.sort(function (a, b) {

    return b.state- a.state;

});

//众所周知，true - false = 1

//结果

/*

[

  { name: 'has', age: 17, height: 165, state: true },

  { name: 'yjerw', age: 42, height: 156, state: true },

  { name: 'wetty', age: 32, height: 178, state: true },

  { name: 'saf', age: 20, height: 172, state: false },

  { name: 'gngh', age: 45, height: 182, state: false },

  { name: 'cvb', age: 22, height: 176, state: false },

  { name: 'aDNY', age: 34, height: 175, state: false }

]

8、concat(),数组连接

//splice()数组插入或删除
let arr=[2,6,4,9,3,6]
arr.splice(0,1,"OK")
console.log(arr) // ['OK', 6, 4, 9, 3, 6]
//splice()数组插入或删除
arr.splice(0,2)
console.log(arr) // [4, 9, 3, 6]

9、toString(),将数组转化为字符串

		//将数组转换成字符串，类似于没有参数的join()。该方法会在数据发生隐式类型转换时被自动调用，如果手动调用，就是直接转为字符串。不会改变原数组
		let arr=[2,6,4,9,3,6]
		console.log(arr.toString()) // 2,6,4,9,3,6

10、indexOf() : 根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1，找到了指定的数据返回该数据的索引

// 注意：indexOf(value, start); 
// value为要查询的数据；
// start为可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数；
// 如果查询不到value的存在，则方法返回-1 
 
let arr = ['张三','李四','王五','马六']; 
console.log(arr.indexOf('李四')) // -> 1 
console.log(arr.indexOf('李四',2)) // -> -1

11、forEach(),历数组，没有返回值

// 注意：forEach(callback);callback默认有三个参数，
// 分别为value(遍历到的数组的数据)，index(对应的索引)，self(数组自身)。 
 
let arr = ['张三','李四','王五','马六'] 
let a = arr.forEach((item,index,self)=>{ 
    console.log(item + "--" + index + "--" + (arr === self)); 
}) 
// 打印结果为： 
// 张三--0--true 
// 李四--1--true 
// 王五--2--true 
// 马六--3--true 
console.log(a); // -> undefined---forEach没有返回值 //该方法为遍历方法，不会修改原数组

12.map() : map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回能；

//注意：map(callback);callback默认有三个参数，
// 分别为value，index，self。
// 跟上面的forEach()的参数一样 
let arr = ['张三','李四','王五','马六']; 
let arr1 = arr.map(item => { 
    return '你好：'+item 
}) 
console.log(arr1) // -> ['你好：张三', '你好：李四', '你好：王五', '你好：马六']

13.filter(): 过滤

// 注意：filter(callback);callback默认有三个参数，分别为value，index，self。 
let arr = [1,2,3,4,5,6]; 
let arr1 = arr.filter((item,index,self)=>{ 
    console.log(item) // -> 1,2,3,4,5,6 
    console.log(index) // -> 0,1,2,3,4,5 
    console.log(self) // -> [1,2,3,4,5,6] 
    return item > 3 
}) 
 
console.log(arr1) // -> [4,5,6]

14.find() 数组的循环，查找符合条件的值，并打断循环返回找到的值

let arr = ['张三','李四','王五','马六']; 
let str = arr.find(item => item == '李四'); 
console.log(str); // -> '李四'

15.every() : 判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true

// 注意： every()接收一个回调函数作为参数，这个回调函数需要有返回值，
// every(callback);callback默认有三个参数，分别为value，index，self。 
let arr = [1,2,3,4,5,6]; 
let bool = arr.every(item => item > 0); 
console.log(bool); // -> true; 
 
let bool = arr.every(item => item > 3); 
console.log(bool); // -> false;

16 some():  判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。否侧就会返回false

// 注意： some()接收一个回调函数作为参数，这个回调函数需要有返回值，
// some(callback);callback默认有三个参数，分别为value，index，self。 
 
let arr = [1,2,3,4,5,6]; 
let bool = arr.some(item => item > 3); 
console.log(bool) // -> true; 
 
let bool = arr.some(item => item > 6); 
console.log(bool) // -> false;

17.reduce() : 数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。

// 注意：　参数：reduce()接收一个或两个参数：
// 第一个是回调函数，表示在数组的每一项上调用的函数；
// 第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。
// reduce(callback,initial);
// callback默认有四个参数，分别为prev，now，index，self。
// callback返回的任何值都会作为下一次执行的第一个参数。 
// 如果initial参数被省略，那么第一次迭代发生在数组的第二项上，
// 因此callback的第一个参数是数组的第一项，第二个参数就是数组的第二项。 
 
let arr = [10,20,30,40,50]; 
let sum = arr.reduce((prev,now) => prev+now) 
console.log(sum); // -> 150; 
 
let sum = arr.reduce((prev,now) => prev+now,110) 
console.log(sum) // 260