ES6 数组操作方法

ES6 引入了许多强大的数组操作方法，极大简化了我们对数组的处理。下面我将介绍一些常用的数组方法，包括它们的用法、示例和原理。

查找类方法

1. find()

作用：返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

示例：

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(element => element > 3);
console.log(found); // 4

原理：

• 遍历数组，对每个元素执行回调函数

• 当回调函数返回 true 时，立即返回当前元素并停止遍历

• 如果没有元素满足条件，返回 undefined

2. findIndex()

作用：返回数组中满足提供的测试函数的第一个元素的索引，否则返回 -1。

示例：

const numbers = [1, 2, 3, 4, 5];
const index = numbers.findIndex(element => element > 3);
console.log(index); // 3

判断类方法

3. some()

作用：测试数组中是否至少有一个元素通过了提供的函数测试。

示例：

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

原理：

• 遍历数组，对每个元素执行回调函数

• 只要有一个元素使回调返回 true，就立即返回 true 并停止遍历

• 如果所有元素都不满足，返回 false

4. every()

作用：测试数组中的所有元素是否都通过了提供的函数测试。

示例：

const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true

原理：

• 遍历数组，对每个元素执行回调函数

• 只要有一个元素使回调返回 false，就立即返回 false 并停止遍历

• 如果所有元素都满足，返回 true

操作类方法

5. slice()

作用：返回一个从开始到结束（不包括结束）选择的数组部分浅拷贝到一个新数组对象。

示例：

const fruits = ['apple', 'banana', 'orange', 'grape'];
const citrus = fruits.slice(1, 3);
console.log(citrus); // ['banana', 'orange']

原理：

• 不修改原数组，返回新数组

• 浅拷贝元素（对于对象是引用拷贝）

• 参数可以是负数，表示从末尾开始计算

6. push()

作用：将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

示例：

const numbers = [1, 2];
const newLength = numbers.push(3, 4);
console.log(numbers); // [1, 2, 3, 4]
console.log(newLength); // 4

原理：

• 直接修改原数组

• 可以一次添加多个元素

• 返回数组的新长度

7. pop()

作用：从数组中删除最后一个元素，并返回该元素的值。

示例：

const numbers = [1, 2, 3];
const last = numbers.pop();
console.log(numbers); // [1, 2]
console.log(last); // 3

原理：

• 直接修改原数组

• 删除并返回最后一个元素

• 如果数组为空，返回 undefined

遍历转换类方法

8. map()

作用：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。

示例：

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

原理：

• 不修改原数组，返回新数组

• 对每个元素执行回调函数，将返回值组成新数组

• 回调函数接收三个参数：当前元素、索引、原数组

9. filter()

作用：创建一个新数组，包含通过所提供函数测试的所有元素。

示例：

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

原理：

• 不修改原数组，返回新数组

• 对每个元素执行回调函数，将返回值为 true 的元素组成新数组

• 常用于筛选/过滤数组元素

其他常用方法

10. reduce()

作用：对数组中的每个元素执行一个由您提供的 reducer 函数，将其结果汇总为单个返回值。

示例：

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 10

原理：

• 从左到右遍历数组

• 接收一个回调函数和一个初始值

• 回调函数接收四个参数：累加器、当前值、当前索引、原数组

11. includes()

作用：判断一个数组是否包含一个指定的值，返回 true 或 false。

示例：

const numbers = [1, 2, 3];
console.log(numbers.includes(2)); // true
console.log(numbers.includes(4)); // false