JavaScript 数组方法大全（超详细整理）

本文按功能分类整理，包含语法、参数、返回值、是否改变原数组、使用示例，适合收藏查阅。

一、数组创建

1. 字面量创建

js 复制代码

const arr = [1, 2, 3];

2. Array 构造函数

js 复制代码

new Array(3);        // [empty × 3]  长度为3的空数组
new Array(1, 2, 3);  // [1, 2, 3]

3. Array.of()

js 复制代码

// 语法：Array.of(element0, element1, ...)
Array.of(3);        // [3]  （与 new Array(3) 不同）
Array.of(1, 2, 3);  // [1, 2, 3]

4. Array.from()

js 复制代码

// 语法：Array.from(arrayLike, mapFn?, thisArg?)
Array.from('abc');                    // ['a', 'b', 'c']
Array.from([1, 2, 3], x => x * 2);    // [2, 4, 6]
Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]
Array.from(new Set([1, 1, 2]));       // [1, 2]

二、增删改（会改变原数组）

1. push() - 末尾添加

js 复制代码

// 语法：arr.push(element1, ..., elementN)
// 返回：新数组长度
const arr = [1, 2];
arr.push(3, 4); // 返回 4
console.log(arr); // [1, 2, 3, 4]

2. pop() - 末尾删除

js 复制代码

// 语法：arr.pop()
// 返回：被删除的元素
const arr = [1, 2, 3];
arr.pop(); // 返回 3
console.log(arr); // [1, 2]

3. unshift() - 头部添加

js 复制代码

// 语法：arr.unshift(element1, ..., elementN)
// 返回：新数组长度
const arr = [3, 4];
arr.unshift(1, 2); // 返回 4
console.log(arr); // [1, 2, 3, 4]

4. shift() - 头部删除

js 复制代码

// 语法：arr.shift()
// 返回：被删除的元素
const arr = [1, 2, 3];
arr.shift(); // 返回 1
console.log(arr); // [2, 3]

5. splice() - 万能增删改

js 复制代码

// 语法：arr.splice(start, deleteCount?, item1?, ...)
// 返回：被删除元素组成的数组
const arr = [1, 2, 3, 4, 5];

// 删除
arr.splice(1, 2);        // 返回 [2, 3]，arr 变成 [1, 4, 5]

// 插入
arr.splice(1, 0, 'a');   // 返回 []，arr 变成 [1, 'a', 4, 5]

// 替换
arr.splice(1, 1, 'x');   // 返回 ['a']，arr 变成 [1, 'x', 4, 5]

// 负数索引（从末尾算）
[1,2,3,4,5].splice(-2);  // 返回 [4,5]，原数组变 [1,2,3]

6. fill() - 填充

js 复制代码

// 语法：arr.fill(value, start?, end?)
// 返回：修改后的原数组
[1, 2, 3, 4].fill(0);        // [0, 0, 0, 0]
[1, 2, 3, 4].fill(0, 1, 3);  // [1, 0, 0, 4]
new Array(3).fill('a');      // ['a', 'a', 'a']

7. copyWithin() - 内部复制

js 复制代码

// 语法：arr.copyWithin(target, start?, end?)
// 返回：修改后的原数组
[1, 2, 3, 4, 5].copyWithin(0, 3);     // [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4);  // [4, 2, 3, 4, 5]

8. reverse() - 反转

js 复制代码

// 语法：arr.reverse()
// 返回：反转后的原数组
[1, 2, 3].reverse(); // [3, 2, 1]

9. sort() - 排序

js 复制代码

// 语法：arr.sort(compareFn?)
// 返回：排序后的原数组
// 注意：默认按字符串 Unicode 排序！
[10, 2, 30, 1].sort();             // [1, 10, 2, 30]  ❌
[10, 2, 30, 1].sort((a, b) => a - b); // [1, 2, 10, 30] ✅ 升序
[10, 2, 30, 1].sort((a, b) => b - a); // [30, 10, 2, 1] ✅ 降序

// 对象排序
const users = [{age: 30}, {age: 20}, {age: 25}];
users.sort((a, b) => a.age - b.age);

三、查询与访问（不改变原数组）

1. indexOf() / lastIndexOf()

js 复制代码

// 语法：arr.indexOf(searchElement, fromIndex?)
// 返回：索引，找不到返回 -1
[1, 2, 3, 2].indexOf(2);       // 1
[1, 2, 3, 2].lastIndexOf(2);   // 3
[1, 2, 3].indexOf(5);          // -1

// 注意：无法查找 NaN
[NaN].indexOf(NaN);            // -1

2. includes() - 是否包含（推荐）

js 复制代码

// 语法：arr.includes(searchElement, fromIndex?)
// 返回：布尔值
[1, 2, 3].includes(2);   // true
[1, 2, 3].includes(5);   // false
[NaN].includes(NaN);     // true ✅ 可检测 NaN

3. find() / findIndex()

js 复制代码

// 语法：arr.find(callback(element, index, array), thisArg?)
// 返回：第一个匹配元素 / 索引，找不到返回 undefined / -1
const arr = [5, 12, 8, 130, 44];

arr.find(x => x > 10);       // 12
arr.findIndex(x => x > 10);  // 1
arr.find(x => x > 200);      // undefined
arr.findIndex(x => x > 200); // -1

// 查找对象
const users = [{id: 1, name: 'A'}, {id: 2, name: 'B'}];
users.find(u => u.id === 2); // {id: 2, name: 'B'}

4. findLast() / findLastIndex() (ES2023)

js 复制代码

const arr = [5, 12, 8, 130, 44];
arr.findLast(x => x > 10);       // 44
arr.findLastIndex(x => x > 10);  // 4

5. at() (ES2022) - 支持负索引

js 复制代码

// 语法：arr.at(index)
const arr = [1, 2, 3, 4, 5];
arr.at(0);   // 1
arr.at(-1);  // 5  （比 arr[arr.length-1] 更方便）
arr.at(-2);  // 4

四、遍历方法

1. forEach() - 遍历（无返回值）

js 复制代码

// 语法：arr.forEach(callback(element, index, array), thisArg?)
// 返回：undefined
[1, 2, 3].forEach((item, index, arr) => {
  console.log(index, item);
});
// 注意：无法中断（break/return 无效）

2. map() - 映射

js 复制代码

// 语法：arr.map(callback(element, index, array), thisArg?)
// 返回：新数组，长度不变
[1, 2, 3].map(x => x * 2);        // [2, 4, 6]
[{id:1}, {id:2}].map(u => u.id);  // [1, 2]

3. filter() - 过滤

js 复制代码

// 语法：arr.filter(callback(element, index, array), thisArg?)
// 返回：新数组，包含通过测试的元素
[1, 2, 3, 4].filter(x => x % 2 === 0);  // [2, 4]

const users = [{age: 18}, {age: 25}, {age: 15}];
users.filter(u => u.age >= 18);  // [{age:18}, {age:25}]

// 数组去重
[1, 1, 2, 3, 3].filter((v, i, a) => a.indexOf(v) === i); // [1,2,3]

4. reduce() / reduceRight() - 归约

js 复制代码

// 语法：arr.reduce(callback(accumulator, currentValue, index, array), initialValue?)
// 返回：累计结果
[1, 2, 3, 4].reduce((sum, x) => sum + x, 0);  // 10

// 求最大值
[1, 5, 3].reduce((max, x) => Math.max(max, x));  // 5

// 数组转对象
['a', 'b', 'c'].reduce((obj, key, i) => {
  obj[key] = i;
  return obj;
}, {}); // {a:0, b:1, c:2}

// 统计出现次数
['a', 'b', 'a'].reduce((acc, x) => {
  acc[x] = (acc[x] || 0) + 1;
  return acc;
}, {}); // {a:2, b:1}

// reduceRight 从右往左
[[1, 2], [3, 4]].reduceRight((acc, x) => acc.concat(x), []); // [3,4,1,2]

5. some() / every()

js 复制代码

// 语法：arr.some(callback) / arr.every(callback)
// 返回：布尔值
[1, 2, 3].some(x => x > 2);   // true（有一个满足即可）
[1, 2, 3].every(x => x > 0);  // true（全部满足）
[1, 2, 3].every(x => x > 1);  // false
[] .some(x => x > 0);         // false
[] .every(x => x > 0);        // true（空数组 every 返回 true）

五、拼接与截取（不改变原数组）

1. concat() - 拼接

js 复制代码

// 语法：arr.concat(value1, value2, ...)
// 返回：新数组
[1, 2].concat([3, 4], 5);    // [1, 2, 3, 4, 5]
[1, 2].concat([[3, 4]]);     // [1, 2, [3, 4]] 注意不会深展开

// 更推荐用扩展运算符
[...[1, 2], ...[3, 4], 5];   // [1, 2, 3, 4, 5]

2. slice() - 截取

js 复制代码

// 语法：arr.slice(start?, end?)  （end 不包含）
// 返回：新数组
[1, 2, 3, 4, 5].slice(1, 3);   // [2, 3]
[1, 2, 3, 4, 5].slice(2);      // [3, 4, 5]
[1, 2, 3, 4, 5].slice(-2);     // [4, 5]
[1, 2, 3, 4, 5].slice();       // [1, 2, 3, 4, 5] 浅拷贝

3. flat() / flatMap()

js 复制代码

// flat(depth?) 扁平化
[1, [2, [3, [4]]]].flat();      // [1, 2, [3, [4]]]
[1, [2, [3, [4]]]].flat(2);     // [1, 2, 3, [4]]
[1, [2, [3, [4]]]].flat(Infinity); // [1, 2, 3, 4]

// flatMap() = map + flat(1)
[1, 2, 3].flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

4. join() - 转字符串

js 复制代码

// 语法：arr.join(separator = ',')
[1, 2, 3].join();       // "1,2,3"
[1, 2, 3].join('-');    // "1-2-3"
[1, 2, 3].join('');     // "123"

六、迭代器方法（返回迭代器，可配合 for...of）

js 复制代码

const arr = ['a', 'b', 'c'];

// keys() - 索引迭代器
[...arr.keys()];    // [0, 1, 2]

// values() - 值迭代器
[...arr.values()];  // ['a', 'b', 'c']

// entries() - 键值对迭代器
[...arr.entries()]; // [[0,'a'], [1,'b'], [2,'c']]

// 配合 for...of
for (const [i, v] of arr.entries()) {
  console.log(i, v);
}

七、其他

1. Array.isArray()

js 复制代码

Array.isArray([1, 2]);   // true
Array.isArray('abc');    // false

2. toString() / toLocaleString()

js 复制代码

[1, 2, 3].toString();  // "1,2,3"

3. 扩展运算符（...）

js 复制代码

// 复制
const copy = [...arr];

// 合并
const merged = [...arr1, ...arr2];

// 转参数
Math.max(...[1, 5, 3]); // 5

八、快速对照表

方法	改变原数组	返回值	用途
push	✅	新长度	末尾添加
pop	✅	删除元素	末尾删除
unshift	✅	新长度	头部添加
shift	✅	删除元素	头部删除
splice	✅	删除元素数组	增删改
sort	✅	原数组	排序
reverse	✅	原数组	反转
fill	✅	原数组	填充
copyWithin	✅	原数组	内部复制
map	❌	新数组	映射
filter	❌	新数组	过滤
reduce	❌	累计值	归约
slice	❌	新数组	截取
concat	❌	新数组	拼接
flat	❌	新数组	扁平化
join	❌	字符串	拼接字符串
find	❌	元素/undefined	查找
findIndex	❌	索引/-1	查找索引
indexOf	❌	索引/-1	查找索引
includes	❌	布尔	是否包含
some	❌	布尔	有满足
every	❌	布尔	全满足
forEach	❌	undefined	遍历

九、常见实用技巧

js 复制代码

// 1. 数组去重
[...new Set([1, 1, 2, 3])];  // [1, 2, 3]

// 2. 数组打乱
arr.sort(() => Math.random() - 0.5);

// 3. 获取数组最大值/最小值
Math.max(...arr);
Math.min(...arr);

// 4. 数组转对象
Object.fromEntries([['a', 1], ['b', 2]]); // {a:1, b:2}

// 5. 生成指定范围数组
Array.from({ length: 5 }, (_, i) => i + 1); // [1,2,3,4,5]
[...Array(5).keys()];                       // [0,1,2,3,4]

// 6. 数组分块
const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (_, i) =>
    arr.slice(i * size, i * size + size)
  );
chunk([1,2,3,4,5], 2); // [[1,2],[3,4],[5]]

// 7. 求交集/并集/差集
const a = [1, 2, 3], b = [2, 3, 4];
const intersect = a.filter(x => b.includes(x));  // [2, 3]
const union = [...new Set([...a, ...b])];        // [1, 2, 3, 4]
const diff = a.filter(x => !b.includes(x));      // [1]