JavaScript 数组的 22 种方法详解：从入门到精通

目录#

引言
数组方法分类
22 种方法详解
总结
参考资源

数组方法分类#

类别	方法
增删操作	push/pop/shift/unshift/splice
遍历处理	forEach/map/filter/reduce/reduceRight
查找验证	find/findIndex/indexOf/lastIndexOf/includes
排序重组	sort/reverse/slice/concat/join
转换类数组	Array.from/Array.of
ES6+ 新增	fill/flat/flatMap
批量验证	every/some

22 种方法详解#

1. push()#

描述：尾部添加元素，改变原数组
最佳实践：代替直接索引赋值，避免长度计算错误

const fruits = ['apple'];
fruits.push('banana'); 
console.log(fruits); // ['apple', 'banana']

2. pop()#

描述：删除尾部元素，返回被删元素
常见错误：空数组调用返回 undefined

const deleted = fruits.pop(); 
console.log(deleted); // 'banana'

3. shift()#

描述：删除头部元素，改变索引
使用场景：队列数据处理

const first = fruits.shift(); 
console.log(first); // 'apple'

4. unshift()#

描述：头部添加元素，返回新长度
性能警示：大数据量时慎用（需重建索引）

fruits.unshift('orange', 'kiwi'); 
// ['orange','kiwi']（原数组只剩空数组，所以是['orange','kiwi']）

5. splice()#

描述：万能增删改方法
参数：(起始索引, 删除数量, 插入项...)

const arr = [1, 2, 3];
arr.splice(1, 1, 99); 
console.log(arr); // [1, 99, 3] (替换操作)

6. forEach()#

描述：遍历数组，无返回值
特性：不能 break，需用 some/every 替代

['a','b','c'].forEach((item, index) => {
  console.log(`${index}:${item}`);
});

7. map()#

描述：返回新数组，不改变原数组
最佳实践：React 渲染列表的黄金搭档

const doubled = [1, 2, 3].map(n => n * 2); 
// [2, 4, 6]

8. filter()#

描述：返回满足条件的新数组
性能技巧：优先过滤再 map 减少遍历次数

const evens = [1, 2, 3].filter(n => n%2===0); 
// [2]

9. reduce()#

描述：累计器，返回单一值
高阶用法：数组扁平化/数据聚合

const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0); 
// 6

10. reduceRight()#

描述：从右向左执行 reduce
典型场景：计算复合函数

const funcChain = [x => x+1, x => x*2].reduceRight((fn, next) => x => fn(next(x)));
console.log(funcChain(5)); // (5*2)+1=11

11. find()#

描述：返回第一个匹配项
对比 filter：找到即停止，性能更优

const user = users.find(u => u.id === 101);

12. findIndex()#

描述：返回第一个匹配项的索引
特殊返回：未找到返回 -1

const idx = users.findIndex(u => u.active);
if(idx !== -1) {...}

13. indexOf()#

描述：值查找（全等匹配）
注意点：无法查找对象引用（用 findIndex）

['js','ts'].indexOf('ts'); // 1

14. lastIndexOf()#

描述：从尾部开始查找

const arr = [2, 5, 2];
arr.lastIndexOf(2); // 2

15. includes()#

描述：存在性检查，返回布尔值
优势：比 indexOf 更语义化

const isExist = languages.includes('Rust');

16. some()#

描述：有一项满足即返回 true
短路特性：匹配成功即停止遍历

const hasNegative = [1, -2, 3].some(n => n<0); 
// true

17. every()#

描述：所有项满足才返回 true

const allPass = scores.every(s => s>=60);

18. sort()#

描述：原地排序，默认字典序
正确使用：必须传递比较函数

[10, 2, 1].sort((a,b) => a - b); 
// [1,2,10]

19. reverse()#

描述：反转数组顺序（改变原数组）

['a','b','c'].reverse(); 
// ['c','b','a']

20. slice()#

描述：截取子数组（不改变原数组）
参数：(start, end) - 含头不含尾

const sub = [1,2,3,4].slice(1,3); 
// [2,3]

21. concat()#

描述：合并数组（可用扩展运算符替代）

const merged = [1].concat([2], [3,4]); 
// [1,2,3,4]

22. join()#

描述：连接为字符串
默认分隔符：逗号（,）

['2020','08','20'].join('-'); 
// "2020-08-20"

23. fill() (ES6)#

描述：填充数组（尤其适合初始化）

new Array(3).fill(0); 
// [0,0,0]

24. flat() (ES2019)#

描述：数组扁平化
参数：指定展开深度（默认 1）

[1,[2,[3]]].flat(Infinity); 
// [1,2,3]

25. flatMap() (ES2019)#

描述：map + 单层 flat

['hello world', 'JS rocks'].flatMap(str => str.split(' ')); 
// ['hello','world','JS','rocks']

26. Array.from() (ES6)#

描述：类数组转真数组

Array.from(document.querySelectorAll('div')); 
// [div, div,...]

27. Array.of() (ES6)#

描述：避免 new Array 的歧义

Array.of(5);      // [5]
new Array(5);     // [空x5]

总结#

方法论	典型方法
需要返回值 → 不修改原数组	slice/map/filter
操作原数组 → 返回元素或长度	push/pop/splice
查找元素 → 值匹配/条件匹配	indexOf/find
数组转换 → 字符串/多维处理	join/flat
ES6+ 优先	includes代替indexOf检查存在性

黄金法则：

明确是否需要改变原数组

链式调用时注意方法返回值类型

大数据集优先使用遍历短路方法 (some/find)

类数组转换使用 Array.from()

参考资源#

MDN 数组文档
ECMAScript 2023 语言规范
JavaScript 高性能数组操作指南
《JavaScript 权威指南》第 7 章
数组方法性能对比工具：jsperf.com