JavaScript 数组方法详细指南

一、方法分类总结

1. 修改原数组的方法（破坏性方法）

添加/删除: push(), pop(), unshift(), shift(), splice()
重排: reverse(), sort()
填充/复制: fill(), copyWithin()

2. 不修改原数组的方法（非破坏性方法）

创建新数组: concat(), slice(), map(), filter(), flat(), flatMap()
搜索查找: indexOf(), lastIndexOf(), find(), findIndex(), findLast(), findLastIndex(), includes()
检测判断: every(), some()
累积计算: reduce(), reduceRight()
字符串转换: join(), toString(), toLocaleString()
ES2023 新方法: toSorted(), toReversed(), toSpliced(), with()

3. 迭代器方法

遍历: entries(), keys(), values()

4. 静态方法

数组创建: Array.from(), Array.of()

二、使用场景建议

需要修改原数组时

// 添加元素
arr.push(newItem);        // 末尾添加
arr.unshift(newItem);     // 开头添加

// 删除元素
arr.pop();               // 删除末尾
arr.shift();             // 删除开头

// 复杂操作
arr.splice(index, count, ...newItems); // 添加/删除/替换

需要保持原数组不变时

// 创建新数组
const newArr = arr.map(x => x * 2);     // 转换
const filtered = arr.filter(x => x > 5); // 过滤
const combined = arr.concat(otherArr);  // 合并

// ES2023 新方法（推荐）
const sorted = arr.toSorted();          // 排序（不修改原数组）
const reversed = arr.toReversed();      // 反转（不修改原数组）

搜索和检测时

// 查找元素
arr.find(x => x > 10);          // 查找第一个满足条件的
arr.includes(value);            // 检查是否包含

// 检测条件
arr.every(x => x > 0);          // 所有元素都满足
arr.some(x => x < 0);           // 至少一个满足

三、修改原数组的方法

1. push()

作用: 向数组的末尾添加一个或多个元素

返回值: 修改后数组的新长度

是否修改原数组: ✅ 是

参数:

...elements (任意类型): 要添加到数组末尾的元素

const arr = [1, 2];
const result = arr.push(3, 4);
console.log(result); // 4 (新长度)
console.log(arr); // [1, 2, 3, 4] (原数组被修改)

2. pop()

作用: 移除并返回数组的最后一个元素

返回值: 被删除的元素，如果数组为空则返回 undefined

是否修改原数组: ✅ 是

参数: 无

const arr = [1, 2, 3];
const result = arr.pop();
console.log(result); // 3
console.log(arr); // [1, 2] (原数组被修改)

3. unshift()

作用: 向数组的开头添加一个或多个元素

返回值: 修改后数组的新长度

是否修改原数组: ✅ 是

参数:

...elements (任意类型): 要添加到数组开头的元素

const arr = [3, 4];
const result = arr.unshift(1, 2);
console.log(result); // 4 (新长度)
console.log(arr); // [1, 2, 3, 4] (原数组被修改)

4. shift()

作用: 移除并返回数组的第一个元素

返回值: 被删除的元素，如果数组为空则返回 undefined

是否修改原数组: ✅ 是

参数: 无

const arr = [1, 2, 3];
const result = arr.shift();
console.log(result); // 1
console.log(arr); // [2, 3] (原数组被修改)

5. splice()

作用: 在指定位置添加/删除/替换元素

返回值: 包含被删除元素的数组

是否修改原数组: ✅ 是

参数:

start (number): 开始修改的索引位置
deleteCount (number): 要删除的元素个数
...items (任意类型): 要添加的元素（可选）

const arr = [1, 2, 3, 4, 5];

// 删除元素
const deleted1 = arr.splice(1, 2);
console.log(deleted1); // [2, 3]
console.log(arr); // [1, 4, 5]

// 添加元素（不删除）
const deleted2 = arr.splice(1, 0, 'a', 'b');
console.log(deleted2); // [] (没有删除元素)
console.log(arr); // [1, 'a', 'b', 4, 5]

// 替换元素
const deleted3 = arr.splice(2, 2, 'x', 'y');
console.log(deleted3); // ['b', 4]
console.log(arr); // [1, 'a', 'x', 'y', 5]

6. reverse()

作用: 反转数组中元素的顺序

返回值: 反转后的数组（原数组的引）

是否修改原数组: ✅ 是

参数: 无

const arr = [1, 2, 3, 4];
const result = arr.reverse();
console.log(result); // [4, 3, 2, 1]
console.log(arr); // [4, 3, 2, 1] (原数组被修改)

7. sort()

作用: 对数组元素进行排序

返回值: 排序后的数组（原数组的引用）

是否修改原数组: ✅ 是

参数:

compareFunction (function, 可选): 定义排序顺序的函数

const arr = [3, 1, 4, 1, 5];
const result = arr.sort();
console.log(result); // [1, 1, 3, 4, 5]
console.log(arr); // [1, 1, 3, 4, 5] (原数组被修改)

// 数字排序
const numbers = [10, 5, 40, 25];
numbers.sort((a, b) => a - b); // 升序
console.log(numbers); // [5, 10, 25, 40]

8. fill()

作用: 用固定值填充数组中的元素

返回值: 修改后的数组（原数组的引用）

是否修改原数组: ✅ 是

参数:

value (任意类型): 填充的值
start (number, 可选): 开始索引，默认 0
end (number, 可选): 结束索引（不包含），默认数组长度

const arr = [1, 2, 3, 4, 5];
const result = arr.fill(0, 1, 3);
console.log(result); // [1, 0, 0, 4, 5]
console.log(arr); // [1, 0, 0, 4, 5] (原数组被修改)

9. copyWithin()

作用: 在数组内部复制元素序列到指定位置

返回值: 修改后的数组（原数组的引用）

是否修改原数组: ✅ 是

参数:

target (number): 复制到的目标索引位置
start (number, 可选): 开始复制的源索引，默认 0
end (number, 可选): 结束复制的源索引（不包含），默认数组长度

const arr = [1, 2, 3, 4, 5];
const result = arr.copyWithin(0, 3);
console.log(result); // [4, 5, 3, 4, 5]
console.log(arr); // [4, 5, 3, 4, 5] (原数组被修改)

四、不修改原数组的方法

10. concat()

作用: 合并两个或多个数组，创建新数组

返回值: 新的合并数组

是否修改原数组: ❌ 否

参数:

...values (任意类型): 要合并的数组或值

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

11. slice()

作用: 提取数组的指定部分作为新数组

返回值: 新的数组片段

是否修改原数组: ❌ 否

参数:

start (number, 可选): 开始索引，默认 0
end (number, 可选): 结束索引（不包含），默认数组长度

const arr = [1, 2, 3, 4, 5];
const result1 = arr.slice(1, 3);
console.log(result1); // [2, 3]
console.log(arr); // [1, 2, 3, 4, 5] (原数组不变)

12. join()

作用: 将数组的所有元素连接成一个字符串

返回值: 连接后的字符串

是否修改原数组: ❌ 否

参数:

separator (string, 可选): 分隔符，默认逗号

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

13. toString()

作用: 返回数组的字符串表示形式

返回值: 数组的字符串表示

是否修改原数组: ❌ 否

参数: 无

const arr = [1, 2, 3];
const result = arr.toString();
console.log(result); // "1,2,3"
console.log(arr); // [1, 2, 3] (原数组不变)

14. toLocaleString()

作用: 返回数组的本地化字符串表示

返回值: 本地化格式的字符串

是否修改原数组: ❌ 否

参数:

locales (string/array, 可选): 语言代码
options (object, 可选): 格式选项

1
2
3

const arr = [1234.56, new Date()];
const result = arr.toLocaleString('en-US');
console.log(result); // "1,234.56,12/19/2012"

五、遍历和转换方法

15. forEach()

作用: 对数组的每个元素执行指定的函数

返回值: undefined

是否修改原数组: ❌ 否（但回调函数可以修改）

参数:

callback (function): 每个元素执行的函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [1, 2, 3];
let sum = 0;
const result = arr.forEach((element, index) => {
    sum += element;
    console.log(`索引 ${index}: 值 ${element}`);
});
console.log(result); // undefined
console.log(sum); // 6

16. map()

作用: 对每个元素执行回调函数，返回新数组

返回值: 新的映射数组

是否修改原数组: ❌ 否

参数:

callback (function): 每个元素执行的映射函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [1, 2, 3];
const result = arr.map((element, index) => element * 2 + index);
console.log(result); // [2, 5, 8]
console.log(arr); // [1, 2, 3] (原数组不变)

17. filter()

作用: 过滤数组，返回满足条件的元素组成的新数组

返回值: 新的过滤数组

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [1, 2, 3, 4, 5];
const result = arr.filter(element => element % 2 === 0);
console.log(result); // [2, 4]
console.log(arr); // [1, 2, 3, 4, 5] (原数组不变)

18. reduce()

作用: 对数组元素执行累积计算

返回值: 累积结果

是否修改原数组: ❌ 否

参数:

callback (function): 累积函数
initialValue (任意类型, 可选): 初始累积值

1
2
3

const arr = [1, 2, 3, 4];
const result = arr.reduce((acc, curr) => acc + curr, 0);
console.log(result); // 10

19. reduceRight()

作用: 从右向左对数组元素执行累积计算

返回值: 从右向左的累积结果

是否修改原数组: ❌ 否

参数:

callback (function): 累积函数
initialValue (任意类型, 可选): 初始累积值

1
2
3

const arr = [1, 2, 3, 4];
const result = arr.reduceRight((acc, curr) => acc - curr);
console.log(result); // -2

六、检测方法

20. every()

作用: 检测数组的所有元素是否都满足指定条件

返回值: 布尔值（是否所有元素都满足条件）

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

1
2
3

const arr = [2, 4, 6, 8];
const result = arr.every(element => element % 2 === 0);
console.log(result); // true

21. some()

作用: 检测数组中是否至少有一个元素满足指定条件

返回值: 布尔值（是否至少一个元素满足条件）

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

1
2
3

const arr = [1, 3, 5, 7, 8];
const result = arr.some(element => element % 2 === 0);
console.log(result); // true

七、搜索方法

22. indexOf()

作用: 查找指定元素在数组中第一次出现的索引

返回值: 元素的第一个索引，未找到返回 -1

是否修改原数组: ❌ 否

参数:

searchElement (任意类型): 要查找的元素
fromIndex (number, 可选): 开始查找的索引

1
2
3

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

23. lastIndexOf()

作用: 查找指定元素在数组中最后一次出现的索引

返回值: 元素的最后一个索引，未找到返回 -1

是否修改原数组: ❌ 否

参数:

searchElement (任意类型): 要查找的元素
fromIndex (number, 可选): 开始查找的索引

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

24. find()

作用: 查找数组中第一个满足条件的元素

返回值: 第一个满足条件的元素，未找到返回 undefined

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

1
2
3

const arr = [1, 2, 3, 4, 5];
const result = arr.find(element => element > 3);
console.log(result); // 4

25. findIndex()

作用: 查找数组中第一个满足条件的元素的索引

返回值: 第一个满足条件的元素索引，未找到返回 -1

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

1
2
3

const arr = [1, 2, 3, 4, 5];
const result = arr.findIndex(element => element > 3);
console.log(result); // 3

26. findLast() (ES2023)

作用: 查找数组中最后一个满足条件的元素

返回值: 最后一个满足条件的元素，未找到返回 undefined

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

1
2
3

const arr = [1, 2, 3, 2, 1];
const result = arr.findLast(element => element === 2);
console.log(result); // 2

27. findLastIndex() (ES2023)

作用: 查找数组中最后一个满足条件的元素的索引

返回值: 最后一个满足条件的元素索引，未找到返回 -1

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

1
2
3

const arr = [1, 2, 3, 2, 1];
const result = arr.findLastIndex(element => element === 2);
console.log(result); // 3

28. includes()

作用: 判断数组是否包含指定的元素

返回值: 布尔值（是否包含元素）

是否修改原数组: ❌ 否

参数:

searchElement (任意类型): 要查找的元素
fromIndex (number, 可选): 开始查找的索引

1
2
3

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

八、 ES6+ 新增方法

29. flat()

作用: 将嵌套数组扁平化

返回值: 新的扁平化数组

是否修改原数组: ❌ 否

参数:

depth (number, 可选): 扁平化深度，默认 1

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

30. flatMap()

作用: 先对每个元素执行映射函数，然后将结果扁平化一级

返回值: 新的映射并扁平化一级的数组

是否修改原数组: ❌ 否

参数:

callback (function): 映射函数
thisArg (任意类型, 可选): 回调函数的 this 值

1
2
3

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

31. Array.from()

作用: 从类数组对象或可迭代对象创建新数组

返回值: 新的数组实例

是否修改原数组: ❌ 不适用（静态方法）

参数:

arrayLike (类数组对象): 要转换的对象
mapFn (function, 可选): 映射函数
thisArg (任意类型, 可选): 映射函数的 this 值

1 2	console.log(Array.from('hello')); // ['h', 'e', 'l', 'l', 'o'] console.log(Array.from([1, 2, 3], x => x * 2)); // [2, 4, 6]

32. Array.of()

作用: 创建具有可变数量参数的新数组

返回值: 新的数组实例

是否修改原数组: ❌ 不适用（静态方法）

参数:

...elements (任意类型): 数组元素

1 2	console.log(Array.of(1, 2, 3)); // [1, 2, 3] console.log(Array.of(3)); // [3] (与 Array(3) 不同)

33. toSorted() (ES2023)

作用: 返回排序后的新数组，不修改原数组

返回值: 新的排序数组

是否修改原数组: ❌ 否

参数:

compareFunction (function, 可选): 排序函数

const arr = [3, 1, 4, 1, 5];
const sorted = arr.toSorted((a, b) => a - b);
console.log(sorted); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5] (原数组不变)

34. toReversed() (ES2023)

作用: 返回反转后的新数组，不修改原数组

返回值: 新的反转数组

是否修改原数组: ❌ 否

参数: 无

const arr = [1, 2, 3, 4, 5];
const reversed = arr.toReversed();
console.log(reversed); // [5, 4, 3, 2, 1]
console.log(arr); // [1, 2, 3, 4, 5] (原数组不变)

35. toSpliced() (ES2023)

作用: 返回拼接后的新数组，不修改原数组

返回值: 新的拼接数组

是否修改原数组: ❌ 否

参数:

start (number): 开始位置
deleteCount (number): 删除数量
...items (任意类型): 要添加的元素

const arr = [1, 2, 3, 4, 5];
const spliced = arr.toSpliced(1, 2, 'a', 'b');
console.log(spliced); // [1, 'a', 'b', 4, 5]
console.log(arr); // [1, 2, 3, 4, 5] (原数组不变)

36. with() (ES2023)

作用: 返回修改指定索引值的新数组，不修改原数组

返回值: 新的修改后的数组

是否修改原数组: ❌ 否

参数:

index (number): 要修改的索引
value (任意类型): 新值

const arr = [1, 2, 3, 4, 5];
const newArr = arr.with(2, 99);
console.log(newArr); // [1, 2, 99, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5] (原数组不变)

九、迭代器方法

37. entries()

作用: 返回包含数组键值对的迭代器

返回值: 新的数组迭代器

是否修改原数组: ❌ 否

参数: 无

const arr = ['a', 'b', 'c'];
for (const [index, value] of arr.entries()) {
    console.log(index, value); // 0 'a', 1 'b', 2 'c'
}

38. keys()

作用: 返回包含数组索引的迭代器

返回值: 新的数组索引迭代器

是否修改原数组: ❌ 否

参数: 无

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

39. values()

作用: 返回包含数组元素的迭代器

返回值: 新的数组值迭代器

是否修改原数组: ❌ 否

参数: 无

const arr = ['a', 'b', 'c'];
for (const value of arr.values()) {
    console.log(value); // 'a', 'b', 'c'
}