用好 JavaScript 数组，不只是一个列表
2023-09-12 22:13:52
JavaScript 数组：不只是一个列表
作为 JavaScript 的标准对象之一，数组是一种非常底层且实用的数据结构。虽然其结构简单，但想要用好它并不容易。对于初学者来说，原生方法的众多可能令人不知所措。
JavaScript 数组的各种方法各有其特点和使用场景，如果你还停留在 for 循环的阶段，那么是时候升级了。在本文中，我们将介绍 20 个常用的数组方法，涵盖了常见操作，以便开发人员能够更加高效地操作数据，处理数组中的元素。
1. 循环
循环是遍历数组的最基本方法。有两种主要的循环方式：for 循环和 forEach 方法。
for 循环是传统的方式，使用一个计数器来遍历数组的每个元素。以下是使用 for 循环遍历数组的示例：
const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
forEach 方法是一种更现代的遍历方式，它使用一个回调函数来处理数组的每个元素。以下是使用 forEach 方法遍历数组的示例：
const array = [1, 2, 3, 4, 5];
array.forEach((element) => {
console.log(element);
});
2. 映射
映射（mapping）是将数组中的每个元素转换为新值的过程。可以使用 map 方法来执行映射操作。map 方法返回一个新数组，其中每个元素都是通过将原始数组的相应元素传递给映射函数而获得的。
以下是使用 map 方法将数组中的每个元素加 1 的示例：
const array = [1, 2, 3, 4, 5];
const newArray = array.map((element) => {
return element + 1;
});
console.log(newArray); // [2, 3, 4, 5, 6]
3. 过滤
过滤（filtering）是根据某个条件从数组中选择元素的过程。可以使用 filter 方法来执行过滤操作。filter 方法返回一个新数组，其中每个元素都是通过将原始数组的相应元素传递给过滤函数而获得的，如果过滤函数返回 true，则该元素将包含在新数组中。
以下是使用 filter 方法从数组中过滤出所有偶数的示例：
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newArray = array.filter((element) => {
return element % 2 === 0;
});
console.log(newArray); // [2, 4, 6, 8, 10]
4. 规约
规约（reducing）是将数组中的所有元素组合成一个单一的值的过程。可以使用 reduce 方法来执行规约操作。reduce 方法返回一个单一的值，该值是通过将原始数组的每个元素传递给规约函数而获得的。
以下是使用 reduce 方法计算数组中所有元素的总和的示例：
const array = [1, 2, 3, 4, 5];
const sum = array.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // 15
5. 查找
查找（finding）是根据某个条件从数组中找到一个元素的过程。可以使用 find 方法和 findIndex 方法来执行查找操作。
find 方法返回数组中第一个满足条件的元素。以下是使用 find 方法查找数组中第一个大于 3 的元素的示例：
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const element = array.find((element) => {
return element > 3;
});
console.log(element); // 4
findIndex 方法返回数组中第一个满足条件的元素的索引。以下是使用 findIndex 方法查找数组中第一个大于 3 的元素的索引的示例：
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const index = array.findIndex((element) => {
return element > 3;
});
console.log(index); // 3
6. 检查
检查（checking）是确定数组是否满足某个条件的过程。可以使用 some 方法和 every 方法来执行检查操作。
some 方法返回 true，如果数组中至少有一个元素满足条件；否则返回 false。以下是使用 some 方法检查数组中是否至少有一个大于 3 的元素的示例：
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const hasElementGreaterThan3 = array.some((element) => {
return element > 3;
});
console.log(hasElementGreaterThan3); // true
every 方法返回 true，如果数组中的每个元素都满足条件；否则返回 false。以下是使用 every 方法检查数组中是否每个元素都大于 3 的示例：
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const everyElementGreaterThan3 = array.every((element) => {
return element > 3;
});
console.log(everyElementGreaterThan3); // false
7. 排序
排序（sorting）是将数组中的元素按照某个顺序排列的过程。可以使用 sort 方法来执行排序操作。sort 方法返回一个新数组，其中元素按照指定的顺序排列。
以下是使用 sort 方法将数组中的元素从小到大排序的示例：
const array = [1, 5, 3, 2, 4];
array.sort((a, b) => {
return a - b;
});
console.log(array); // [1, 2, 3, 4, 5]
8. 反转
反转（reversing）是将数组中的元素的顺序颠倒的过程。可以使用 reverse 方法来执行反转操作。reverse 方法返回一个新数组，其中元素的顺序与原始数组相反。
以下是使用 reverse 方法反转数组中的元素的示例：
const array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]
9. 连接
连接（joining）是将数组中的元素连接成一个字符串的过程。可以使用 join 方法来执行连接操作。join 方法返回一个字符串，其中元素由指定的连接符分隔。
以下是使用 join 方法将数组中的元素连接成一个字符串的示例：
const array = [1, 2, 3, 4, 5];
const string = array.join(",");
console.log(string); // "1,2,3,4,5"
10. 推入
推送（pushing）是将一个或多个元素添加到数组的末尾的过程。可以使用 push 方法来执行推送操作。push 方法返回数组的新长度。
以下是使用 push 方法将一个元素添加到数组末尾的示例：
const array = [1, 2, 3, 4, 5];
array.push(6);
console.log(array); // [1, 2, 3, 4, 5, 6]
11. 弹出
弹出（popping）是从数组的末尾删除最后一个元素的过程。可以使用 pop 方法来执行弹出操作。pop 方法返回弹出元素的值。
以下是使用 pop 方法从数组末尾删除最后一个元素的示例：
const array = [1
