JavaScript 数组常用方法详解

作者：代码拾荒时间：2026-10-31 19:25:03浏览：636

本文系统梳理了 JavaScript 中常用的数组操作方法，涵盖元素的增删（push、pop、shift、unshift、splice）、查找与访问（indexOf、find、findIndex）、遍历处理（forEach、map、filter、reduce）以及排序反转（sort、reverse）和数组转换（join、slice、concat）等核心功能，帮助开发者高效掌握数组处理技巧。

1. 数组方法的分类

JavaScript 中的数组方法主要可以归纳为以下几大类：

添加或删除元素：push()、pop()、shift()、unshift()、splice()
查找与访问元素：indexOf()、lastIndexOf()、find()、findIndex()
遍历数组：forEach()、map()、filter()、reduce()
排序与反转：sort()、reverse()
数组转换：join()、toString()、slice()、concat()
其他实用方法：includes()、fill()、flat()、flatMap()

2. 添加和删除元素

2.1 push()：向数组末尾添加元素

通过 push() 方法可以向数组末尾追加一个或多个元素，该方法会返回新数组的长度。

let arr = [1, 2, 3];
arr.push(4, 5); // 向数组末尾添加 4 和 5
console.log(arr); // [1, 2, 3, 4, 5]

2.2 pop()：移除数组末尾的元素

使用 pop() 方法可以移除数组最后一个元素，并返回该被移除的元素值。

let arr = [1, 2, 3, 4];
let removed = arr.pop(); // 移除数组末尾的 4
console.log(arr); // [1, 2, 3]
console.log(removed); // 4

2.3 shift()：移除数组第一个元素

调用 shift() 方法用于移除数组的第一个元素，并返回该被移除的元素。

let arr = [1, 2, 3, 4];
let removed = arr.shift(); // 移除数组第一个元素 1
console.log(arr); // [2, 3, 4]
console.log(removed); // 1

2.4 unshift()：向数组开头添加元素

利用 unshift() 方法可以向数组头部插入一个或多个元素，并返回新数组的长度。

let arr = [2, 3, 4];
arr.unshift(1, 0); // 向数组开头添加 1 和 0
console.log(arr); // [0, 1, 2, 3, 4]

2.5 splice()：从数组中添加或删除元素

splice() 方法功能较为强大，支持在数组中执行添加、删除或替换元素的操作。

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, "a", "b"); // 从索引 2 开始，删除 1 个元素，插入 "a" 和 "b"
console.log(arr); // [1, 2, "a", "b", 4, 5]

3. 查找和访问元素

3.1 indexOf()：查找元素的索引

indexOf() 方法用于返回指定元素在数组中首次出现的索引位置，若未找到则返回 -1。

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3); // 查找 3 的索引
console.log(index); // 2

3.2 lastIndexOf()：查找元素的最后一个索引

lastIndexOf() 方法用于返回指定元素在数组中最后一次出现的索引位置，若未找到则返回 -1。

let arr = [1, 2, 3, 2, 4];
let index = arr.lastIndexOf(2); // 查找 2 的最后一个索引
console.log(index); // 3

3.3 find()：查找满足条件的第一个元素

find() 方法用于返回数组中第一个满足指定测试条件的元素。

let arr = [1, 2, 3, 4, 5];
let result = arr.find(item => item > 3); // 查找第一个大于 3 的元素
console.log(result); // 4

3.4 findIndex()：查找满足条件的第一个元素的索引

findIndex() 方法用于返回数组中第一个满足指定测试条件的元素的索引。

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(item => item > 3); // 查找第一个大于 3 的元素的索引
console.log(index); // 3

4. 遍历数组

4.1 forEach()：遍历数组并执行回调函数

forEach() 方法会对数组中的每个元素依次执行一次提供的回调函数。

let arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
  console.log(item);
});
// 输出：
// 1
// 2
// 3
// 4
// 5

4.2 map()：创建一个新数组，每个元素经过回调函数处理

map() 方法会对数组中的每个元素执行回调函数，并返回一个由回调结果组成的新数组。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(item => item * 2); // 每个元素乘以 2
console.log(newArr); // [2, 4, 6, 8, 10]

4.3 filter()：创建一个新数组，包含满足条件的元素

filter() 方法会返回一个新数组，其中包含所有通过测试条件的元素。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(item => item > 3); // 筛选大于 3 的元素
console.log(newArr); // [4, 5]

4.4 reduce()：将数组中的值累积处理，返回一个单一的结果

reduce() 方法会对数组中的每个元素执行回调函数，并将结果累积到一个单一的输出值。

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc + curr, 0); // 计算数组元素的总和
console.log(sum); // 15

5. 排序和反转

5.1 sort()：对数组元素进行排序

sort() 方法用于对数组元素进行排序，默认情况下按字符串 Unicode 码点顺序进行排序。

let arr = [3, 1, 4, 2];
arr.sort(); // 默认按字符串顺序排序
console.log(arr); // [1, 2, 3, 4]
// 如果需要按数字顺序排序，需要传入比较函数：
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 3, 4]

5.2 reverse()：反转数组中元素的顺序

reverse() 方法用于将数组中元素的顺序进行反转。

let arr = [1, 2, 3, 4, 5];
arr.reverse(); // 反转数组
console.log(arr); // [5, 4, 3, 2, 1]

6. 数组转换

6.1 join()：将数组元素连接成一个字符串

join() 方法用于将数组中的所有元素连接成一个字符串，默认分隔符为逗号。

let arr = [1, 2, 3, 4, 5];
let str = arr.join(", "); // 用逗号和空格分隔
console.log(str); // "1, 2, 3, 4, 5"

6.2 toString()：将数组转换为字符串

toString() 方法用于将数组转换为字符串，默认情况下元素之间用逗号分隔。

let arr = [1, 2, 3, 4, 5];
let str = arr.toString(); // 转换为字符串
console.log(str); // "1,2,3,4,5"

6.3 slice()：返回数组的一个浅拷贝

slice() 方法用于返回数组指定部分的浅拷贝，不会修改原数组。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4); // 从索引 1 到 4（不包括 4）
console.log(newArr); // [2, 3, 4]

6.4 concat()：合并两个或多个数组

concat() 方法用于合并两个或多个数组，并返回一个包含所有元素的新数组。

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

7. 其他实用方法

7.1 includes()：检查数组是否包含某个值

includes() 方法用于判断数组是否包含某个特定值，返回布尔值。

let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3); // 检查是否包含 3
console.log(hasThree); // true

7.2 fill()：用一个固定值填充数组的指定部分

fill() 方法用于用指定值填充数组的指定起始和结束索引范围。

let arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 4); // 从索引 1 到 4 填充 0
console.log(arr); // [1, 0, 0, 0, 5]

7.3 flat()：将多维数组扁平化为一维数组

flat() 方法用于将多维数组结构扁平化为一维数组。

let arr = [1, [2, [3, 4]]];
let newArr = arr.flat(2); // 深度为 2 的扁平化
console.log(newArr); // [1, 2, 3, 4]

7.4 flatMap()：扁平化数组并映射

flatMap() 方法先对数组中的每个元素执行回调函数，然后将结果扁平化为一维数组。

let arr = [1, 2, 3];
let newArr = arr.flatMap(item => [item, item * 2]); // 每个元素映射为两个值
console.log(newArr); // [1, 2, 2, 4, 3, 6]

到此这篇关于老生常谈JavaScript 数组方法的文章就介绍到这了,更多相关JavaScript 数组方法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JavaScript异步发送HTTP请求时怎么优雅地处理错误

2026-11-05 17:10:44

5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选

2026-11-05 17:04:04

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00