JavaScript 数组方法分类整理

修改原数组的方法（Mutator Methods）

这些方法会直接修改原始数组。

1. push()

• 作用：在数组末尾添加一个或多个元素
• 参数：要添加的元素（一个或多个）
• 返回值：数组的新长度
• 示例：

let arr = [1, 2];
let length = arr.push(3, 4); // arr变为[1, 2, 3, 4], length为4

2. pop()

• 作用：删除数组的最后一个元素
• 参数：无
• 返回值：被删除的元素
• 示例：

let arr = [1, 2, 3];
let last = arr.pop(); // arr变为[1, 2], last为3

3. shift()

• 作用：删除数组的第一个元素
• 参数：无
• 返回值：被删除的元素
• 示例：

let arr = [1, 2, 3];
let first = arr.shift(); // arr变为[2, 3], first为1

4. unshift()

• 作用：在数组开头添加一个或多个元素
• 参数：要添加的元素（一个或多个）
• 返回值：数组的新长度
• 示例：

let arr = [2, 3];
let length = arr.unshift(0, 1); // arr变为[0, 1, 2, 3], length为4

5. splice()

• 作用：添加/删除数组中的元素
• 参数：
  • start：开始修改的位置
  • deleteCount（可选）：要删除的元素个数
  • item1, item2, ...（可选）：要添加的元素
• 返回值：包含被删除元素的数组
• 示例：

let arr = [1, 2, 3, 4];
let removed = arr.splice(1, 2, 'a', 'b'); 
// arr变为[1, 'a', 'b', 4], removed为[2, 3]

6. reverse()

• 作用：反转数组中元素的顺序
• 参数：无
• 返回值：反转后的数组（原数组也被修改）
• 示例：

let arr = [1, 2, 3];
arr.reverse(); // arr变为[3, 2, 1]

7. sort()

• 作用：对数组元素进行排序
• 参数：
  • compareFunction（可选）：定义排序顺序的函数
• 返回值：排序后的数组（原数组也被修改）
• 示例：

let arr = [3, 1, 2];
arr.sort(); // arr变为[1, 2, 3]
arr.sort((a, b) => b - a); // arr变为[3, 2, 1]

8. fill()

• 作用：用固定值填充数组中指定范围的元素
• 参数：
  • value：填充的值
  • start（可选）：开始位置，默认为0
  • end（可选）：结束位置（不包含），默认为数组长度
• 返回值：修改后的数组（原数组也被修改）
• 示例：

let arr = [1, 2, 3, 4];
arr.fill(0, 1, 3); // arr变为[1, 0, 0, 4]

9. copyWithin()

• 作用：浅复制数组的一部分到同一数组中的另一个位置
• 参数：
  • target：复制到的目标位置
  • start（可选）：开始复制的位置，默认为0
  • end（可选）：结束复制的位置（不包含），默认为数组长度
• 返回值：修改后的数组（原数组也被修改）
• 示例：

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // arr变为[4, 5, 3, 4, 5]

不修改原数组的方法（Accessor Methods）

这些方法不会修改原始数组，而是返回一个新数组或其他值。

1. concat()

• 作用：合并两个或多个数组
• 参数：要合并的数组或值
• 返回值：新数组
• 示例：

let arr1 = [1, 2];
let arr2 = arr1.concat([3, 4]); // arr2为[1, 2, 3, 4], arr1不变

2. join()

• 作用：将数组所有元素连接成一个字符串
• 参数：
  • separator（可选）：分隔符，默认为逗号
• 返回值：连接后的字符串
• 示例：

let arr = [1, 2, 3];
let str = arr.join('-'); // str为"1-2-3", arr不变

3. slice()

• 作用：提取数组的一部分
• 参数：
  • start（可选）：开始位置，默认为0
  • end（可选）：结束位置（不包含），默认为数组长度
• 返回值：新数组
• 示例：

let arr = [1, 2, 3, 4];
let subArr = arr.slice(1, 3); // subArr为[2, 3], arr不变

4. indexOf()

• 作用：返回数组中指定元素的第一个索引
• 参数：
  • searchElement：要查找的元素
  • fromIndex（可选）：开始查找的位置，默认为0
• 返回值：元素的索引，如果未找到返回-1
• 示例：

let arr = [1, 2, 3, 2];
let index = arr.indexOf(2); // index为1

5. lastIndexOf()

• 作用：返回数组中指定元素的最后一个索引
• 参数：
  • searchElement：要查找的元素
  • fromIndex（可选）：开始查找的位置，默认为数组长度-1
• 返回值：元素的索引，如果未找到返回-1
• 示例：

let arr = [1, 2, 3, 2];
let index = arr.lastIndexOf(2); // index为3

6. includes()

• 作用：判断数组是否包含某个元素
• 参数：
  • searchElement：要查找的元素
  • fromIndex（可选）：开始查找的位置
• 返回值：布尔值
• 示例：

let arr = [1, 2, 3];
let hasTwo = arr.includes(2); // true

7. toString()

• 作用：将数组转换为字符串
• 参数：无
• 返回值：字符串
• 示例：

let arr = [1, 2, 3];
let str = arr.toString(); // "1,2,3"

8. toLocaleString()

• 作用：将数组转换为本地化字符串
• 参数：无
• 返回值：本地化字符串
• 示例：

let arr = [1000, new Date()];
let str = arr.toLocaleString(); // "1,000,2023/5/17 12:00:00"（取决于地区设置）

迭代方法（Iteration Methods）

这些方法通常用于遍历数组，不会修改原数组（除非在回调中修改）。

1. forEach()

• 作用：对数组每个元素执行函数
• 参数：
  • callback：对每个元素执行的函数
    • currentValue：当前元素
    • index（可选）：当前索引
    • array（可选）：正在遍历的数组
  • thisArg（可选）：执行回调时用作this的值
• 返回值：undefined
• 示例：

let arr = [1, 2, 3];
arr.forEach((item, index) => console.log(index, item));
// 输出:
// 0 1
// 1 2
// 2 3

2. map()

• 作用：创建一个新数组，其结果是该数组中的每个元素调用函数后的返回值
• 参数：同forEach
• 返回值：新数组
• 示例：

let arr = [1, 2, 3];
let doubled = arr.map(x => x * 2); // [2, 4, 6]

3. filter()

• 作用：创建一个新数组，包含通过测试的所有元素
• 参数：同forEach
• 返回值：新数组
• 示例：

let arr = [1, 2, 3, 4];
let evens = arr.filter(x => x % 2 === 0); // [2, 4]

4. reduce()

• 作用：对数组中的每个元素执行一个reducer函数，将其结果汇总为单个返回值
• 参数：
  • callback：执行函数
    • accumulator：累计器
    • currentValue：当前值
    • index（可选）：当前索引
    • array（可选）：原数组
  • initialValue（可选）：初始值
• 返回值：累计处理的结果
• 示例：

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0); // 10

5. reduceRight()

• 作用：与reduce类似，但从右向左执行
• 参数：同reduce
• 返回值：累计处理的结果
• 示例：

let arr = ['a', 'b', 'c'];
let combined = arr.reduceRight((acc, curr) => acc + curr); // 'cba'

6. find()

• 作用：返回数组中满足测试函数的第一个元素的值
• 参数：同forEach
• 返回值：找到的元素，否则undefined
• 示例：

let arr = [1, 2, 3, 4];
let found = arr.find(x => x > 2); // 3

7. findIndex()

• 作用：返回数组中满足测试函数的第一个元素的索引
• 参数：同forEach
• 返回值：找到的元素的索引，否则-1
• 示例：

let arr = [1, 2, 3, 4];
let index = arr.findIndex(x => x > 2); // 2

8. every()

• 作用：测试数组的所有元素是否都通过了测试函数
• 参数：同forEach
• 返回值：布尔值
• 示例：

let arr = [1, 2, 3, 4];
let allPositive = arr.every(x => x > 0); // true

9. some()

• 作用：测试数组中是否至少有一个元素通过了测试函数
• 参数：同forEach
• 返回值：布尔值
• 示例：

let arr = [1, 2, 3, 4];
let hasEven = arr.some(x => x % 2 === 0); // true

10. entries()

• 作用：返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对
• 参数：无
• 返回值：新的迭代器对象
• 示例：

let arr = ['a', 'b', 'c'];
let iterator = arr.entries();
console.log(iterator.next().value); // [0, 'a']

11. keys()

• 作用：返回一个新的Array Iterator对象，它包含数组中每个索引的键
• 参数：无
• 返回值：新的迭代器对象
• 示例：

let arr = ['a', 'b', 'c'];
let iterator = arr.keys();
console.log(iterator.next().value); // 0

12. values()

• 作用：返回一个新的Array Iterator对象，它包含数组中每个索引的值
• 参数：无
• 返回值：新的迭代器对象
• 示例：

let arr = ['a', 'b', 'c'];
let iterator = arr.values();
console.log(iterator.next().value); // 'a'

ES6+ 新增方法

1. Array.from()

• 作用：从类数组对象或可迭代对象创建一个新数组
• 参数：
  • arrayLike：要转换为数组的对象
  • mapFn（可选）：映射函数
  • thisArg（可选）：执行mapFn时的this值
• 返回值：新数组
• 示例：

let set = new Set([1, 2, 3]);
let arr = Array.from(set); // [1, 2, 3]

2. Array.of()

• 作用：创建一个具有可变数量参数的新数组
• 参数：要包含在数组中的元素
• 返回值：新数组
• 示例：

let arr = Array.of(1, 2, 3); // [1, 2, 3]

3. flat()

• 作用：将嵌套数组"拉平"，变成一维数组
• 参数：
  • depth（可选）：要提取嵌套数组的结构深度，默认为1
• 返回值：新数组
• 示例：

let arr = [1, [2, [3]]];
let flatArr = arr.flat(2); // [1, 2, 3]

4. flatMap()

• 作用：先对数组每个元素执行map，然后对结果执行flat(1)
• 参数：
  • callback：生成新数组元素的函数
  • thisArg（可选）：执行callback时的this值
• 返回值：新数组
• 示例：

let arr = [1, 2, 3];
let result = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

5. at()

• 作用：返回指定索引处的元素，支持负数索引
• 参数：
  • index：要返回的元素的索引（可以为负数）
• 返回值：找到的元素或undefined
• 示例：

let arr = [1, 2, 3];
let last = arr.at(-1); // 3

总结表格

希望这份整理对您有所帮助！如需更详细的解释或示例，可以针对特定方法进一步探讨。