前端进阶指南：不可错过的22个数组API解析

2023-05-12 14:47:28

**** 序幕：数组API的强大魅力**

前端开发中，数组是处理有序数据集合的关键。数组API为这些数组提供了一系列操作方法，大幅简化了数据处理，提升了开发效率。

添加元素：扩展数组

数组API提供多种添加元素的方式：

push： 将元素添加到数组末尾，扩展数组长度。
unshift： 将元素添加到数组开头，从头开始扩展数组。

const numbers = [1, 2, 3];
numbers.push(4); // [1, 2, 3, 4]
numbers.unshift(0); // [0, 1, 2, 3, 4]

删除元素：裁剪数组

要从数组中删除元素，可以使用：

pop： 从数组末尾删除最后一个元素。
shift： 从数组开头删除第一个元素。
splice： 指定位置删除元素，并返回已删除元素数组。

const fruits = ['apple', 'banana', 'orange'];
fruits.pop(); // ['apple', 'banana']
fruits.shift(); // ['banana']
fruits.splice(1, 1); // ['banana', 'orange']

截取元素：获取数组片段

slice： 指定位置截取元素，返回新数组。
splice： 除了删除元素，还可以用作截取方法。

const numbers = [1, 2, 3, 4, 5];
numbers.slice(1, 3); // [2, 3]
numbers.splice(1, 2); // [2, 3]

合并数组：整合数据

concat： 将多个数组合并为一个新数组。
展开运算符： 使用"..."运算符展开数组，将其元素合并到新数组中。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
[...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

转换数组：重塑数据

map： 遍历数组，将每个元素映射为新元素，返回新数组。
reduce： 遍历数组，将元素累积为单个结果。
filter： 筛选数组，返回满足条件的元素组成的数组。

const numbers = [1, 2, 3, 4, 5];
numbers.map((num) => num * 2); // [2, 4, 6, 8, 10]
numbers.reduce((acc, cur) => acc + cur, 0); // 15
numbers.filter((num) => num % 2 === 0); // [2, 4]

查找元素：定位数据

indexOf： 在数组中查找元素的第一个匹配索引。
lastIndexOf： 在数组中查找元素的最后一个匹配索引。
find： 查找第一个满足条件的元素，并返回该元素。
findIndex： 查找第一个满足条件的元素的索引。

const fruits = ['apple', 'banana', 'orange', 'apple'];
fruits.indexOf('apple'); // 0
fruits.lastIndexOf('apple'); // 3
fruits.find((fruit) => fruit === 'banana'); // 'banana'
fruits.findIndex((fruit) => fruit === 'orange'); // 2

遍历数组：逐一处理

forEach： 遍历数组，对每个元素执行回调函数。
for...of： 使用for...of循环遍历数组，并对每个元素执行操作。
for...in： 使用for...in循环遍历数组的键，并对每个键执行操作。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => console.log(num)); // 1 2 3 4 5
for (const num of numbers) { console.log(num); } // 1 2 3 4 5
for (const key in numbers) { console.log(key); } // 0 1 2 3 4

其他操作：全面扩展

includes： 检查数组是否包含指定元素。
every： 检查数组中所有元素是否满足条件。
some： 检查数组中是否存在满足条件的元素。
sort： 对数组中的元素进行排序。
reverse： 反转数组中的元素顺序。
join： 将数组元素连接成字符串。
split： 将字符串拆分成数组。

const numbers = [1, 2, 3, 4, 5];
numbers.includes(2); // true
numbers.every((num) => num > 0); // true
numbers.some((num) => num % 2 === 0); // true
numbers.sort(); // [1, 2, 3, 4, 5]
numbers.reverse(); // [5, 4, 3, 2, 1]
numbers.join('-'); // '1-2-3-4-5'
'hello world'.split(' '); // ['hello', 'world']