JavaScript数组方法一览

在 JavaScript 中，数组的处理函数（也称为数组方法）非常丰富和强大，它们是处理列表数据的核心。下面我将它们分为几大类，并详细介绍每个方法的作用、参数和返回值。

一、会改变原数组的方法 (Mutator Methods)

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

1. `push()`

作用：向数组的末尾添加一个或多个元素。
参数：要添加的元素（任意数量）。
返回值：数组新的 length。

示例：

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

2. `pop()`

作用：删除并返回数组的最后一个元素。
参数：无。
返回值：被删除的元素。如果数组为空则返回 undefined。

示例：

let arr = [1, 2, 3];
let lastElement = arr.pop(); 
console.log(arr); // [1, 2]
console.log(lastElement); // 3

3. `unshift()`

作用：向数组的开头添加一个或多个元素。
参数：要添加的元素（任意数量）。
返回值：数组新的 length。

示例：

let arr = [3, 4];
let newLength = arr.unshift(1, 2); 
console.log(arr); // [1, 2, 3, 4]
console.log(newLength); // 4

4. `shift()`

作用：删除并返回数组的第一个元素。
参数：无。
返回值：被删除的元素。如果数组为空则返回 undefined。

示例：

let arr = [1, 2, 3];
let firstElement = arr.shift(); 
console.log(arr); // [2, 3]
console.log(firstElement); // 1

5. `splice()`

作用：功能强大的方法，用于删除、替换或添加数组中的元素。
参数：
1. start：开始修改的索引位置。
2. deleteCount（可选）：要移除的元素个数。如果为 0 或负数，则不删除元素。
3. item1, item2, ...（可选）：要添加到数组的元素，从 start 位置开始。
返回值：由被删除的元素组成的数组。如果没有删除元素，则返回空数组。

示例：

let arr = ['a', 'b', 'c', 'd'];
// 删除：从索引1开始，删除2个元素
let removed = arr.splice(1, 2); 
console.log(arr); // ['a', 'd']
console.log(removed); // ['b', 'c']

// 添加：从索引1开始，删除0个元素，添加'x', 'y'
arr.splice(1, 0, 'x', 'y'); 
console.log(arr); // ['a', 'x', 'y', 'd']

// 替换：从索引1开始，删除2个元素，添加'z'
arr.splice(1, 2, 'z'); 
console.log(arr); // ['a', 'z', 'd']

6. `reverse()`

作用：将数组中元素的顺序反转。
参数：无。
返回值：反转后的原数组（原数组已被改变）。

示例：

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]

7. `sort()`

作用：对数组的元素进行排序，默认是将元素转换为字符串，然后比较它们的 UTF-16 码元序列。
参数（可选）：一个比较函数，用于定义排序顺序。
- 比较函数接收两个参数 a 和 b。
- 如果返回值 < 0，则 a 排在 b 前面。
- 如果返回值 > 0，则 b 排在 a 前面。
- 如果返回值 == 0，则 a 和 b 的相对位置不变。
返回值：排序后的原数组（原数组已被改变）。

示例：

let arr = [10, 2, 1];
arr.sort(); // 默认排序，按字符串比较
console.log(arr); // [1, 10, 2] (不符合数字大小预期)

// 使用比较函数进行数字升序排序
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 10]

// 降序排序
arr.sort((a, b) => b - a);
console.log(arr); // [10, 2, 1]

8. `copyWithin()`

作用：浅复制数组的一部分到同一数组中的另一个位置。
参数：
1. target：复制序列到该目标索引位置。
2. start（可选）：开始复制元素的起始索引（默认为 0）。
3. end（可选）：停止复制元素的结束索引（默认为 array.length，不包含此索引）。
返回值：改变后的原数组。

示例：

let arr = [1, 2, 3, 4, 5];
// 将从索引3开始到结束的元素，复制到索引0的位置
arr.copyWithin(0, 3); 
console.log(arr); // [4, 5, 3, 4, 5]

9. `fill()`

作用：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。
参数：
1. value：用来填充数组的值。
2. start（可选）：起始索引，默认 0。
3. end（可选）：终止索引（不包含），默认 array.length。
返回值：修改后的原数组。

示例：

let arr = new Array(3); // [empty × 3]
arr.fill(0);
console.log(arr); // [0, 0, 0]

let arr2 = [1, 2, 3, 4];
arr2.fill('a', 1, 3); // 用 'a' 填充索引1到3（不包含3）的位置
console.log(arr2); // [1, 'a', 'a', 4]

二、不会改变原数组的方法 (Accessor Methods)

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

1. `concat()`

作用：用于合并两个或多个数组。
参数：数组或值（任意数量）。
返回值：一个新的合并后的数组。

示例：

let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2, 5, [6, 7]);
console.log(newArr); // [1, 2, 3, 4, 5, 6, 7]
console.log(arr1); // [1, 2] (原数组未变)

2. `join()`

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

示例：

let arr = ['Hello', 'World'];
let str1 = arr.join(); 
let str2 = arr.join(' '); 
let str3 = arr.join('-'); 
console.log(str1); // "Hello,World"
console.log(str2); // "Hello World"
console.log(str3); // "Hello-World"

3. `slice()`

作用：返回一个由** begin 和 end 决定的原数组的浅拷贝**的新数组。
参数：
1. begin（可选）：起始索引（包含），默认为 0。负数表示从末尾开始计算。
2. end（可选）：结束索引（不包含），默认为 array.length。负数表示从末尾开始计算。
返回值：一个新的数组，包含从 start 到 end（不包括 end）的元素。

示例：

let arr = ['a', 'b', 'c', 'd', 'e'];
let newArr1 = arr.slice(2); // 从索引2开始到结束
console.log(newArr1); // ['c', 'd', 'e']

let newArr2 = arr.slice(1, 4); // 从索引1开始，到索引4（不包含）
console.log(newArr2); // ['b', 'c', 'd']

let newArr3 = arr.slice(-2); // 最后两个元素
console.log(newArr3); // ['d', 'e']

console.log(arr); // ['a', 'b', 'c', 'd', 'e'] (原数组未变)

4. `indexOf()`

作用：返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。
参数：
1. searchElement：要查找的元素。
2. fromIndex（可选）：开始查找的位置。
返回值：首个被找到的元素的索引，或 -1。

示例：

let arr = ['apple', 'banana', 'orange', 'banana'];
let index = arr.indexOf('banana');
console.log(index); // 1

let index2 = arr.indexOf('banana', 2); // 从索引2开始找
console.log(index2); // 3

let index3 = arr.indexOf('pear');
console.log(index3); // -1

5. `lastIndexOf()`

作用：返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找。
参数：同 indexOf()。
返回值：最后一个被找到的元素的索引，或 -1。

示例：

let arr = ['apple', 'banana', 'orange', 'banana'];
let index = arr.lastIndexOf('banana');
console.log(index); // 3 (从后往前找，找到最后一个)

6. `includes()`

作用：判断一个数组是否包含一个指定的值。ES2016 新增。
参数：
1. valueToFind：需要查找的元素值。
2. fromIndex（可选）：从该索引处开始查找。
返回值：布尔值（true 或 false）。

示例：

let arr = [1, 2, 3, NaN];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false
console.log(arr.includes(NaN)); // true (indexOf无法做到这一点)

三、迭代方法 (Iteration Methods)

这些方法用于遍历数组，并对每个元素执行提供的函数。

1. `forEach()`

作用：对数组的每个元素执行一次给定的函数。
参数：回调函数 (element, index, array) => {}。
返回值：undefined。

示例：

let arr = [1, 2, 3];
let sum = 0;
arr.forEach(function(item) {
  sum += item;
});
console.log(sum); // 6

2. `map()`

作用：创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
参数：回调函数 (element, index, array) => newValue。
返回值：一个新的数组，每个元素都是回调函数的返回值。

示例：

let arr = [1, 2, 3];
let doubled = arr.map(item => item * 2);
console.log(doubled); // [2, 4, 6]
console.log(arr); // [1, 2, 3] (原数组未变)

3. `filter()`

作用：创建一个新数组，其包含通过所提供函数实现的测试的所有元素。
参数：回调函数 (element, index, array) => boolean。
返回值：一个新的由通过测试的元素组成的数组。如果没有任何元素通过测试，则返回空数组。

示例：

let arr = [1, 2, 3, 4, 5, 6];
let evens = arr.filter(item => item % 2 === 0);
console.log(evens); // [2, 4, 6]

4. `find()`

作用：返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。ES2015 新增。
参数：回调函数 (element, index, array) => boolean。
返回值：数组中第一个满足条件的元素的值，否则返回 undefined。

示例：

let users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];
let user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: 'Jane' }

5. `findIndex()`

作用：返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。ES2015 新增。
参数：同 find()。
返回值：索引或 -1。

示例：

let arr = [5, 12, 8, 130, 44];
let index = arr.findIndex(item => item > 10);
console.log(index); // 1 (第一个大于10的元素是12，索引为1)

6. `some()`

作用：测试数组中是不是至少有 1 个元素通过了被提供的函数测试。
参数：回调函数 (element, index, array) => boolean。
返回值：布尔值。只要有一个元素通过测试就返回 true，否则返回 false。

示例：

let arr = [1, 2, 3, 4, 5];
let hasEven = arr.some(item => item % 2 === 0);
console.log(hasEven); // true (因为有2,4)

let hasNegative = arr.some(item => item < 0);
console.log(hasNegative); // false

7. `every()`

作用：测试数组的所有元素是否都通过了被提供的函数测试。
参数：同 some()。
返回值：布尔值。只有所有元素都通过测试才返回 true，否则返回 false。

示例：

let arr = [2, 4, 6, 8];
let allEven = arr.every(item => item % 2 === 0);
console.log(allEven); // true

let arr2 = [2, 4, 5, 8];
let allEven2 = arr2.every(item => item % 2 === 0);
console.log(allEven2); // false (因为5不是偶数)

8. `reduce()`

作用：对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
参数：
1. 回调函数 (accumulator, currentValue, index, array) => newAccumulator。
  - accumulator：累计器，累积回调的返回值。
  - currentValue：当前正在处理的元素。
2. initialValue（可选）：作为第一次调用回调函数时第一个参数的值。强烈建议始终提供。
返回值：使用 reducer 回调函数遍历整个数组后的结果。

示例（求和）：

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, current) => {
  return acc + current;
}, 0); // 初始值设为0
console.log(sum); // 10
// 执行过程：
// 第一次: acc=0, current=1 -> return 1
// 第二次: acc=1, current=2 -> return 3
// 第三次: acc=3, current=3 -> return 6
// 第四次: acc=6, current=4 -> return 10

9. `reduceRight()`

作用：与 reduce() 功能相同，但是从数组的末尾向前开始执行。

四、其他常用方法

1. `Array.isArray()`

作用：用于确定传递的值是否是一个 Array。这是一个静态方法。
参数：需要检测的值。
返回值：布尔值。

示例：

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({})); // false
console.log(Array.isArray('hello')); // false

2. `flat()`

作用：按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。ES2019 新增。
参数（可选）：depth，指定要提取嵌套数组的结构深度，默认值为 1。使用 Infinity 可展开任意深度的嵌套数组。
返回值：一个包含将子数组连接后的新数组。

示例：

let arr = [1, [2, 3], [4, [5, 6]]];
console.log(arr.flat()); // [1, 2, 3, 4, [5, 6]] (默认深度1)
console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6] (深度2)

3. `flatMap()`

作用：首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map() 后接深度为 1 的 flat() 几乎相同，但 flatMap() 通常在合并成一种方法的效率稍微高一些。ES2019 新增。
参数：回调函数 (element, index, array) => newValue（该返回值应是一个数组）。
返回值：一个新的数组，其中每个元素都是回调函数返回的数组连接起来的结果。

示例：

let arr = [1, 2, 3];
let result = arr.flatMap(x => [x, x * 2]);
// 相当于先 map 成 [[1, 2], [2, 4], [3, 6]]，再 flat(1)
console.log(result); // [1, 2, 2, 4, 3, 6]

总结与选择

想修改原数组：使用 push, pop, splice, sort, reverse 等。
不想修改原数组：使用 concat, slice, map, filter 等。
查找元素：
- 找索引：indexOf, findIndex
- 找值本身：find
- 检查是否存在：includes, some
检查所有元素：every
遍历数组：forEach（无返回值），map（返回新数组）
条件筛选：filter
聚合计算：reduce

JavaScript数组方法一览

一、 会改变原数组的方法 (Mutator Methods)

1. push()

2. pop()

3. unshift()

4. shift()

5. splice()

6. reverse()

7. sort()

8. copyWithin()

9. fill()

二、 不会改变原数组的方法 (Accessor Methods)

1. concat()

2. join()

3. slice()

4. indexOf()

5. lastIndexOf()

6. includes()

三、 迭代方法 (Iteration Methods)

1. forEach()

2. map()

3. filter()

4. find()

5. findIndex()

6. some()

7. every()

8. reduce()

9. reduceRight()

四、 其他常用方法

1. Array.isArray()

2. flat()

3. flatMap()