工作中需知道的数组方法总结

数组遍历操作

• forEach 该方法等同于for循环，其没有返回值
  结构：arr.forEach(回调函数,回调函数this的值) 第二个参数当回调函数是箭头函数时无效

用法：
arr.forEach(function(item,index,arr){
// 里面的function是一个回调函数
// item: 数组中的每一项
// index:item 对应的下标索引值
// arr: 就是调用该方法的数组本身
});

• map 该方法使用和forEach大致相同，该方法有返回值，返回一个新数组，工作中需要对数组的每一项进行操作获取操作后的新数组时可以使用此方法
  结构：arr.map(回调函数,回调函数this的值)

用法：
const arr = [1,2,3];
const newArr= arr.map((item,index,arr) => {
   return item * 2;
});
console.log(newArr); // [2,4,6]
console.log(arr); // [1,2,3]
注：当数组元素类型为引用类型时会改变原数组，因为值类型入参是复制，引用类型是指向同一对象
const arr2 = [{num:1},{num:2},{num:3}];
const newArr2 = arr2.map((item,index,arr) => {
   item.num2 = 10;
   return item;
});
console.log(newArr2); // [{num: 1, num2: 10},{num: 2, num2: 10},{num: 3, num2: 10}]
console.log(arr2); // [{num: 1, num2: 10},{num: 2, num2: 10},{num: 3, num2: 10}]

• filter 该方法有返回值，返回一个符合条件元素组成的新数组,工作中需要过滤出符合条件的数组元素时可以使用此方法
  结构：arr.filter(回调函数,回调函数this的值)

用法：
const arr = [1,2,3];
const newArr= arr.filter((item,index,arr) => {
   return item > 2;
});
console.log(newArr); // [3]

• some 该方法判断数组中有没有符合条件的项(只要有,就返回true)，如果一个都没有才返回false，原理类似于或运算
  结构：arr.some(回调函数,回调函数this的值)

用法：
const arr = [1,2,3];
const flag = arr.some((item,index,arr) => {
   return item > 2;
});
console.log(flag); // true
const flag2= arr.some((item,index,arr) => {
   return item > 4;
});
console.log(flag2);  // false

• every 该方法判断数组中所有的项是否满足要求，如果全都满足才返回true，否则返回false，原理类似于与运算
  结构：arr.every(回调函数,回调函数this的值)

用法：
const arr = [1,2,3];
const flag = arr.every((item,index,arr) => {
   return item > 0;
});
console.log(flag); // true
const flag2= arr.every((item,index,arr) => {
   return item > 1;
});
console.log(flag2);  // false

数组增删改操作

• push 该方法可以在数组的最后面增加一个或多个元素，返回值为添加新元素后数组的长度
  结构：arr.push(值)

例：
const arr = [1,2,3];
const arrLength = arr.push(4,5,6); 
console.log(arr); // [1,2,3,4,5,6]
console.log(arrLength); // 6

• pop 该方法为删除数组的最后一位元素，返回值为删除的那个元素
  结构：arr.pop()

例：
const arr = [1,2,3];
const arrLength = arr.pop(); 
console.log(arr); // [1,2]
console.log(arrLength); // 3

• unshift 该方法可以在数组的最前面增加一个或多个元素，返回值为添加新元素后数组的长度
  结构：arr.unshift(值)

例：
const arr = [1,2,3];
const arrLength = arr.unshift(0);
console.log(arr); // [0,1,2,3]
console.log(arrLength); // 4

• shift 该方法为删除数组第一位元素，返回值为删除的元素
  结构：arr.shift()

例：
const arr = [1,2,3];
const arrLength = arr.shift();
console.log(arr); // [2,3]
console.log(arrLength); // 1

• splice 该方法可以实现删除或增加或替换元素(任意在任何位置，直接改变原数组，没有返回值)
  结构：arr.splice(开始下标位置,处理的个数,新增的元素1,新增的元素2...)

例：
const arr = [1,2,3,4,5,6];
arr.splice(0,2); // 纯删除
console.log(arr); // [3,4,5,6];
arr.splice(1,1,7);  // 替换
console.log(arr); // [3,7,5,6]
arr.splice(1,0,8,9);  // 纯添加
console.log(arr); // [3,8,9,7,5,6]

检查数组是否包含某个元素

• includes 该方法可直接检测数组中是否包含某个元素，包含则返回true，不包含则返回false
  结构：arr.includes(值,从某个下标开始)

例：
const arr = [1,2,3];
const flag1 = arr.includes(2);
const flag2 = arr.includes(4) ;
const flag3 = arr.includes(2,2);
console.log(flag1); // true
console.log(flag2); // false
console.log(flag3); // false

• indexOf 该方法可检测数组中是否包含某个元素，包含则返回第一个匹配元素的索引，不包含则返回-1
  结构：arr.indexOf(值,从某个下标开始)

例：
const arr = [1,2,3,5,2];
const flag1 = arr.indexOf(2);
const flag2 = arr.indexOf(4) ;
const flag3 = arr.indexOf(2,2);
console.log(flag1); // 1
console.log(flag2); // -1
console.log(flag3); // 4

• lastIndexOf 该方法可检测数组中是否包含某个元素，包含则返回元素的最后一个索引，不包含则返回-1
  结构：arr.lastIndexOf(值,从某个下标开始)

例：
const arr = [1,2,3,4,2,5,6,2];
const flag1 = arr.lastIndexOf(2);
const flag2 = arr.lastIndexOf(9);
console.log(flag1); // 7
console.log(flag2); // -1

数组拼接与截取

• join 该方法可以将数组里的元素，通过指定的分隔符，以字符串的形式拼接起来，默认是以,分割
  结构：arr.join(分隔符)

例：
const arr = [1,2,3];
const str1 = arr.join();
const str2 = arr.join('-');
console.log(str1); // 1,2,3
console.log(str2); // 1-2-3

• concat 该方法可以把两个数组里的元素拼接成一个新的数组
  结构：arr.concat(值1, 值2)

例：
const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr = arr1.concat(arr2,7,8,[9,10]);
console.log(arr) //[1,2,3,4,5,6,7,8,9,10];

• slice 该方法可以从数组中截取指定的元素段，返回出来，不改变原数组，入参都是可选参数
  结构：arr.slice(开始位,结束位)

例：
const arr = [1,2,3,4,5,6];
const arr1 = arr.slice(); //截取全部
const arr2 = arr.slice(2); //开始位开始往后截取全部
const arr3 = arr.slice(2,5); //开始位开始,不包括结束位元素 
console.log(arr1); //[1,2,3,4,5,6]
console.log(arr2); //[3,4,5,6]
console.log(arr3); //[3,4,5]

数组的翻转与排序

• reverse 该方法将数组中元素的位置颠倒，并返回该数组，会改变原数组
  结构：arr.reverse()

例：
const arr = [1,2,3];
arr.reverse()];
console.log(arr); // [3,2,1]

• sort 该方法对数组的元素进行排序，并返回数组
  结构：arr.sort(函数)

例：
const arr = [1,5,2,6,9,7,3];
arr.sort(); // 默认排序，会将元素转换为字符串，然后比较它们的 UTF-16 代码单元值实现排序
console.log(arr);  // [1, 2, 3, 5, 6, 7, 9]
const arr1 = [1,5,2,6,9,7,3];
arr1.sort((a, b) => { return a - b }); // 自定义排序，递增
console.log(arr1);  // [1, 2, 3, 5, 6, 7, 9]
const arr2 = [1,5,2,6,9,7,3];
arr2.sort((a, b) => { return b - a }); // 自定义排序，递减
console.log(arr2); // [9, 7, 6, 5, 3, 2, 1]