从头开始复习 JS 让你彻彻底底搞明白数组

ES5 中定义了 22 个数组的方法，它们的使用频率基本贯穿整个前端开发。对于前端工程师来说，了解和掌握这些方法至关重要。本文将对这 22 个方法进行简要介绍，并提供代码示例，帮助你透彻理解数组的用法。

数组方法详解

1. toString() 和 toLocaleString()

这两个方法将数组直接转换为字符串，并使用逗号分隔元素。

const arr = [1, 2, 3];
console.log(arr.toString()); // "1,2,3"
console.log(arr.toLocaleString()); // "1,2,3"

2. concat()

该方法将一个或多个数组合并到当前数组中，并返回一个新数组。

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

3. join()

类似于 toString()，该方法将数组元素转换为字符串，但你可以指定分隔符。

const arr = [1, 2, 3];
console.log(arr.join("-")); // "1-2-3"

4. slice()

该方法创建一个新数组，包含从指定开始索引到指定结束索引（不包括）的元素。

const arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3)); // [2, 3]

5. splice()

该方法从指定位置开始删除指定数量的元素，并可插入新元素。

const arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, 6, 7); // [1, 6, 7, 4, 5]

6. push() 和 pop()

push() 在数组末尾添加元素，而 pop() 从数组末尾移除最后一个元素。

const arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.pop(); // [1, 2, 3]

7. unshift() 和 shift()

unshift() 在数组开头添加元素，而 shift() 从数组开头移除第一个元素。

const arr = [1, 2, 3];
arr.unshift(0); // [0, 1, 2, 3]
arr.shift(); // [1, 2, 3]

8. reverse()

该方法反转数组中元素的顺序。

const arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]

9. sort()

该方法对数组中的元素进行排序。默认情况下，按字符串顺序排序，但也可以提供比较函数。

const arr = [3, 2, 1];
arr.sort(); // [1, 2, 3]

10. indexOf() 和 lastIndexOf()

这两个方法返回一个元素在数组中第一次或最后一次出现的位置。

const arr = [1, 2, 3, 1];
console.log(arr.indexOf(1)); // 0
console.log(arr.lastIndexOf(1)); // 3

11. includes()

该方法检查数组是否包含给定的元素。

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

12. every() 和 some()

这两个方法用于检查数组中是否所有元素（every）或至少有一个元素（some）满足给定的条件。

const arr = [1, 2, 3];
console.log(arr.every((el) => el > 0)); // true
console.log(arr.some((el) => el % 2 === 0)); // true

13. filter() 和 map()

这两个方法返回一个新数组，其中 filter() 过滤出满足给定条件的元素，而 map() 为每个元素应用给定函数。

const arr = [1, 2, 3];
console.log(arr.filter((el) => el % 2 === 0)); // [2]
console.log(arr.map((el) => el * 2)); // [2, 4, 6]

14. reduce() and reduceRight()

这两个方法将数组中的元素逐个累加，并返回最终结果。reduce() 从左到右累加，而 reduceRight() 从右到左累加。

const arr = [1, 2, 3];
console.log(arr.reduce((acc, el) => acc + el)); // 6

15. find() 和 findIndex()

这两个方法返回第一个满足给定条件的元素（find()）或其索引（findIndex()）。

const arr = [1, 2, 3];
console.log(arr.find((el) => el === 2)); // 2

16. fill()

该方法用给定的值填充数组中的元素，从指定开始索引到指定结束索引（不包括）。

const arr = new Array(5);
arr.fill(0); // [0, 0, 0, 0, 0]

17. copyWithin()

该方法将数组中从指定源索引到指定目标索引（不包括）的元素复制到数组中的另一个位置。

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(1, 3); // [1, 4, 5, 4, 5]

18. flat() 和 flatMap()

这两个方法用于展平多维数组。flat() 展平一级，而 flatMap() 递归展平所有级别。

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

19. keys()、values() 和 entries()

这三个方法用于遍历数组的键、值和键值对。

const arr = [1, 2, 3];
for (const key of arr.keys()) {
  console.log(key); // 0, 1, 2
}

20. forEach()

该方法遍历数组中的每个元素，并执行给定的回调函数。

const arr = [1, 2, 3];
arr.forEach((el) => console.log(el)); // 1, 2, 3

21. find() 和 findIndex()

这两个方法返回数组中第一个满足给定条件的元素（find()）或其索引（findIndex()）。

const arr = [1, 2, 3];
console.log(arr.find((el) => el === 2)); // 2

22. fill()

该方法用给定的值填充数组中的元素，从指定开始索引到指定结束索引（不包括）。

const arr = new Array(5);
arr.fill(0); // [0, 0, 0, 0, 0]

通过掌握这些数组方法，你可以灵活高效地处理各种数组相关任务，提升你的 JS 编程技能。