JS数组方法总结

数组作为js变量类型的一大类，在项目中出现的频率相当之高，为此熟悉数组的各种API其实相当有必要。理解和记忆数组的各种方法对开发效率具有不小的帮助，以下内容将简单地对数组的多个方法进行归纳总结。

①pop和push尾部删除添加：这两个方法用于数组结尾的删除和添加

const arr = [ 1, 2, 3, 4, 5 ]
//添加到数组的尾端
arr.push(6) //[1,2,3,4,5,6]
//再次调用pop方法就删除了最后一位
arr.pop()//[1,2,3,4,5]
1
2
3
4
5

②unshift和shift头部删除添加：用于在数组的首位进行删除和添加

const arr = [ 1, 2, 3, 4, 5 ]
//添加到数组的前端
arr.unshift(6) //[6,1,2,3,4,5]
//再次调用shift方法就删除了第一位
arr.shift()//[1,2,3,4,5]
1
2
3
4
5

③sort排序

进行对数组就地排序，不会复制或返回一个新数组，接收可选参数，一个回调函数，有a,b两个参数，当返回ab时返回1从大到小排序，a==b时返回0，保持原来的排序（默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序。

const arr = ["March", "Jan", "Feb", "Dec", 6, 2, "A", "a"];
arr.sort(function (a, b) {
  if (a < b) {
    return -1;
  } else if (a > b) {
    return 1;
  } else {
    return 0;
  }
});
console.log(arr);//['A','Dec', 'Feb','Jan','March',2, 6,'a']
1
2
3
4
5
6
7
8
9
10
11

④reverse 反转：对数组进行就地反转，顺序颠倒

const arr = ["March", "Jan", 6, 2, "A", "a"];
arr.reverse();
console.log(arr);//[ 'a', 'A', 2, 6, 'Jan', 'March' ]
1
2
3

⑤splice 截取新增数据

可以选择删除数组中的某一个值，也可以在数组中的某个位置添加一些数据，接收可选参数，三个或以上的参数，第一个为截取的索引位置number类型，第二个截取的个数number类型，第三个或更多实在截取位置添加的参数，可以是任何类型。

const arr = ["March", "Jan", 6, 2, "A", "a"];
//在索引为2的位置截取一个，并在索引2的位置后添加8
arr.splice(2, 1, 8);
console.log(arr);//[ 'March', 'Jan', 8, 2, 'A', 'a' ]
//截取位数不够，就将有的全部且去掉
arr.splice(2, 6);
console.log(arr);//[ 'March', 'Jan' ]
1
2
3
4
5
6
7

⑥copyWithin 将数组得一部分赋值到另一个位置

copyWithin是一种移动数组数据的高性能方法，copyWithin() 方法是通用的。它只期望 this 值具有 length 属性和整数键属性。虽然字符串也是类似数组的，但这种方法不适用于它们，因为字符串是不可变的。

copyWithin不会改变数组的长度，只会修改内容，它接收三个参数，第一个为复制到的目标位置（索引值），第二个是复制的起始位置（可选），如果为负数，则相当于从后往前数，第三个为结束位置，不包含此索引的位置（可选），起始位置不可小于结束位置，否者方法无效。返回一个浅拷贝的新数组,并且改变原数组。

const arr1 = ["March", "Jan", 6, 2, "A", "a"];
//从索引为三个位置开始复制，到索引为5的位置，但不包含5，从索引为1的位置粘贴并覆盖
const newArr = arr1.copyWithin(1, 3, 5);
console.log(arr1,newArr);//[ 'March', 2, 'A', 2, 'A', 'a' ] [ 'March', 2, 'A', 2, 'A', 'a' ]

//为负数时从后往前数-2从A的位置到-1不包括-1的位置，也就是将A赋值并覆盖到了索引为0的位置
const newArr = arr1.copyWithin(0, -2, -1);
console.log(newArr);//[ 'A', 'Jan', 6, 2, 'A', 'a' ]

//这种结束索引位置在开始索引位置之前的都不生效
const newArr = arr1.copyWithin(0, -2, 2);
const newArr = arr1.copyWithin(0, -2, -4);
console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a' ]
1
2
3
4
5
6
7
8
9
10
11
12
13

⑦filter 数据过滤

需要一定条件返回对应的数据，接收一个回调函数，有回调函数有三个参数，第一个是当前遍历的元素，第二个为当前索引，第三个是数组本身，需要一个返回值，filter方法会根据符合这个返回值条件的数据返回一个新数组。

const arr = ["March", "Jan", 6, 2, "A", "a"];
//这里是一个简单的例子，返回类型为string的元素
const newArr = arr.filter((item, index) => typeof item === "string");
console.log(newArr);//[ 'March', 'Jan', 'A', 'a' ]
1
2
3
4

⑧map

map方法只是单纯的返回一个新数组，可以是处理后的，也可以是原数组，接收一个会点函数，回调函数有三个参数第一个是当前遍历的元素，第二个为当前索引，第三个是数组本身，需要一个返回值，从map内部处理过后，回调函数的返回值返回一个新数组。

const arr = ["March", "Jan", 6, 2, "A", "a"];
//返回一个number的数组，不是number类型的就返回它们的字段长度
const newArr = arr.map((item, index) => (typeof item === "number" ? item : item.length);
console.log(newArr);//[ 5, 3, 6, 2, 1, 1 ]
1
2
3
4

⑨reduce 数据累加

reduce是一个功能非常强大的方法，但平常很少使用，因为他的功能他的方法都可以实现，它也能实现其他的一些方法，有时候合理的使用reduce会大大减少代码量。接收两个参数，第一个为回调函数，回调函数有四个参数，第一个参数为上一次回调函数return的结果，首次默认为第二个参数值，如果没有第二个参数值，则默认当前数组下标为0的参数，第二个参数为当前元素，第三个为当前索引值，第四个为数组本身，reduce的第二个参数指定一个默认值，可选。

//使用reduce实现filter方法
const arr = ["March", "Jan", 6, 2, "A", "a"];
//定义第二个参数的默认值为一个数组
const newArr = arr.reduce((acc, cur, index) => {
  typeof cur === "string" && acc.push(cur);
  return acc;
}, []);
console.log(newArr);//[ 'March', 'Jan', 'A', 'a' ]
//使用reduce实现数字的求和
//第二个参数默认定义0 number类型
const newArr = arr.reduce((acc, cur, index) => {
  typeof cur === "number" && (acc += cur);
  return acc;
}, 0);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

⑩slice 数组截取

可以对一个数组进行浅拷贝，接收两个参数，第一个为截取的初始位置，第二个为终止位置（不包括此索引值），如果只填一个参数则从当前索引值截取到最

const arr = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr.slice(0, 3);
console.log(newArr);//[ 'March', 'Jan', 6 ]

const newArr = arr.slice(3);
console.log(newArr);//[ 2, 'A', 'a' ]
1
2
3
4
5
6