JS数组方法汇总：详解用法与实例
2023-09-26 04:38:49
## JavaScript 数组方法大汇总
在 JavaScript 中，数组是使用方括号 ([ ]) 声明和初始化的有序元素集合。它们是一种强大的数据结构，可用于存储和操作各种类型的数据。为了高效地与数组交互，JavaScript 提供了一系列丰富的数组方法。这些方法可分为三类：改变原数组的方法、不改变原数组的方法和数组遍历器的方法。本文将全面介绍每类方法，并通过代码示例详细说明其用法和功能。
## 一、改变原数组的方法
这些方法直接修改原数组的内容，从而更改其元素或结构。
1. arr[key] = 'tom'
此方法直接将指定索引处的值修改为指定的值。例如：
const arr = ['Alice', 'Bob'];
arr[0] = 'Tom'; // 修改第一个元素的值为'Tom'
2. arr.splice(start, deleteCount, ...items)
此方法从指定的开始索引删除指定数量的元素，并可选择插入新元素。例如：
const arr = ['Alice', 'Bob', 'Carol'];
arr.splice(1, 1); // 删除索引为1的元素'Bob'
arr.splice(1, 0, 'Tom'); // 在索引1处插入元素'Tom'
3. arr.push(...items)
此方法在数组末尾添加一个或多个元素。例如：
const arr = ['Alice', 'Bob'];
arr.push('Carol'); // 添加元素'Carol'到数组末尾
4. arr.pop()
此方法移除并返回数组末尾的最后一个元素。例如：
const arr = ['Alice', 'Bob'];
const lastElement = arr.pop(); // 移除并返回'Bob'
5. arr.unshift(...items)
此方法在数组开头添加一个或多个元素。例如：
const arr = ['Alice', 'Bob'];
arr.unshift('Tom'); // 添加元素'Tom'到数组开头
6. arr.shift()
此方法移除并返回数组开头第一个元素。例如：
const arr = ['Alice', 'Bob'];
const firstElement = arr.shift(); // 移除并返回'Alice'
7. arr.reverse()
此方法反转数组中元素的顺序。例如：
const arr = ['Alice', 'Bob', 'Carol'];
arr.reverse(); // 反转数组元素顺序
8. arr.sort([compareFunction])
此方法按照指定的比较函数对数组中的元素进行排序。例如：
const arr = ['Alice', 'Bob', 'Carol'];
arr.sort(); // 按字母顺序对数组进行排序
const compareFunction = (a, b) => a.age - b.age;
arr.sort(compareFunction); // 按年龄对数组进行排序
9. arr.fill(value, start, end)
此方法用指定的值填充数组中从start到end-1范围内的元素。例如：
const arr = ['Alice', 'Bob', 'Carol'];
arr.fill('Tom', 1, 2); // 用'Tom'填充索引1处的元素
10. arr.copyWithin(target, start, end)
此方法从数组中从start到end-1范围内的元素复制到target指定的索引处。例如：
const arr = ['Alice', 'Bob', 'Carol', 'Dave'];
arr.copyWithin(1, 2, 4); // 将索引2到3的元素复制到索引1处
## 二、不改变原数组的方法
这些方法不会修改原数组的内容，而是创建新的数组或执行其他操作。
11. arr.concat(...items)
此方法创建一个包含原数组和新元素的新数组。例如：
const arr = ['Alice', 'Bob'];
const newArr = arr.concat('Carol'); // newArr为['Alice', 'Bob', 'Carol']
12. arr.slice(start, end)
此方法返回一个包含从start到end-1范围内的元素的新数组。例如：
const arr = ['Alice', 'Bob', 'Carol'];
const newArr = arr.slice(1, 3); // newArr为['Bob', 'Carol']
13. arr.filter(callbackfn)
此方法创建一个包含通过给定回调函数测试为真的所有元素的新数组。例如：
const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter(item => item % 2 === 0); // newArr为[2, 4]
14. arr.map(callbackfn)
此方法创建一个新数组，其中每个元素是原数组对应元素通过给定回调函数处理后的结果。例如：
const arr = ['Alice', 'Bob', 'Carol'];
const newArr = arr.map(item => item.toUpperCase()); // newArr为['ALICE', 'BOB', 'CAROL']
15. arr.forEach(callbackfn)
此方法对数组中的每个元素执行给定的回调函数，但不返回新数组。例如：
const arr = [1, 2, 3, 4, 5];
arr.forEach(item => console.log(item)); // 在控制台中打印每个元素
16. arr.indexOf(searchElement, fromIndex)
此方法返回searchElement在数组中首次出现的索引，如果不存在则返回-1。例如：
const arr = ['Alice', 'Bob', 'Carol'];
const index = arr.indexOf('Carol'); // index为2
17. arr.lastIndexOf(searchElement, fromIndex)
此方法返回searchElement在数组中最后一次出现的索引，如果不存在则返回-1。例如：
const arr = ['Alice', 'Bob', 'Carol', 'Carol'];
const index = arr.lastIndexOf('Carol'); // index为3
18. arr.includes(searchElement, fromIndex)
此方法如果数组包含searchElement，则返回true；否则返回false。例如：
const arr = ['Alice', 'Bob', 'Carol'];
const isIncluded = arr.includes('Carol'); // isIncluded为true
19. arr.find(callbackfn)
此方法返回第一个通过给定回调函数测试为真的元素，如果没有找到则返回undefined。例如：
const arr = [1, 2, 3, 4, 5];
const foundElement = arr.find(item => item % 3 === 0); // foundElement为3
20. arr.findIndex(callbackfn)
此方法返回第一个通过给定回调函数测试为真的元素的索引，如果没有找到则返回-1。例如：
const arr = [1, 2, 3, 4, 5];
const foundIndex = arr.findIndex(item => item % 3 === 0); // foundIndex为2
21. arr.some(callbackfn)
此方法如果数组中至少一个元素通过给定回调函数测试为真，则返回true；否则返回false。例如：
const arr = [1, 2, 3, 4, 5];
const isSomeTrue = arr.some(item => item % 2 === 0); // isSomeTrue为true
22. arr.every(callbackfn)
此方法如果数组中所有元素都通过给定回调函数测试为真，则返回true；否则返回false。例如：
const arr = [1, 2, 3, 4, 5];
const isEveryTrue = arr.every(item => item > 0); // isEveryTrue为true
23. arr.reduce(callbackfn, initialValue)
此方法将数组中的元素累积为一个单一的值。例如：
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((a, b) => a + b, 0); // sum为15
24. arr.reduceRight(callbackfn, initialValue)
此方法从右到左将数组中的元素累积为一个单一的值。例如：
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduceRight((a, b) => a + b, 0); // sum为15
## 三、数组遍历器的方法
这些方法返回一个遍历数组的迭代器对象，可用于轻松地访问和修改数组中的元素。
25. arr.keys】
此方法返回一个迭代器对象，该对象遍历数组的键（索引）。例如：
const arr = ['Alice', 'Bob', 'Carol'];
const keysIterator = arr.keys();
for (const key of keysIterator)
