数组常用方法js：JavaScript数组常用方法全解析，从基础到进阶

来源：网络作者：日期：2025-11-11 13:27:18

JavaScript中的数组是一种非常重要的数据结构，广泛应用于前端开发的各个场景，掌握数组的常用方法不仅能提高代码的效率，还能让你的代码更加简洁、易读，本文将详细介绍JavaScript中常用的数组方法，帮助你从基础到进阶,全面掌握数组操作。

数组遍历方法

`forEach()`

forEach() 方法用于遍历数组，对每个元素执行一次指定的函数，它不返回任何值，通常用于操作数组元素,但不适用于需要返回结果的场景。

语法：

array.forEach(callback(currentElement[, index[, array]])[, thisArg])

示例：

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

`map()`

map() 方法用于遍历数组，并返回一个新数组，新数组的元素是原数组元素调用回调函数后的返回值,它不会改变原数组。

语法：

array.map(callback(currentElement[, index[, array]])[, thisArg])

示例：

const arr = [1, 2, 3, 4];
const newArr = arr.map(item => item * 2);
console.log(newArr); // 输出：[2, 4, 6, 8]

`for...of`

for...of 是ES6引入的循环语法，可以用于遍历数组、Set、Map等可迭代对象。

语法：

for (let item of array) {
  // 执行操作
}

示例：

const arr = [1, 2, 3, 4];
for (let item of arr) {
  console.log(item);
}
// 输出：1, 2, 3, 4

数组元素增删改方法

`push()`

push() 方法用于向数组的末尾添加一个或多个元素,并返回新数组的长度。

语法：

array.push(element1, element2, ..., elementN)

示例：

const arr = [1, 2, 3];
arr.push(4, 5);
console.log(arr); // 输出：[1, 2, 3, 4, 5]

`pop()`

pop() 方法用于删除数组的最后一个元素,并返回该元素。

语法：

array.pop()

示例：

数组常用方法js：JavaScript数组常用方法全解析，从基础到进阶

const arr = [1, 2, 3];
const lastElement = arr.pop();
console.log(arr); // 输出：[1, 2]
console.log(lastElement); // 输出：3

`shift()`

shift() 方法用于删除数组的第一个元素,并返回该元素。

语法：

array.shift()

示例：

const arr = [1, 2, 3];
const firstElement = arr.shift();
console.log(arr); // 输出：[2, 3]
console.log(firstElement); // 输出：1

`unshift()`

unshift() 方法用于向数组的开头添加一个或多个元素,并返回新数组的长度。

语法：

array.unshift(element1, element2, ..., elementN)

示例：

const arr = [1, 2, 3];
arr.unshift(0, -1);
console.log(arr); // 输出：[-1, 0, 1, 2, 3]

数组元素查找方法

`filter()`

filter() 方法用于遍历数组，筛选出满足条件的元素,并返回一个新数组。

语法：

array.filter(callback(element[, index[, array]])[, thisArg])

示例：

const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter(item => item % 2 === 0);
console.log(evenNumbers); // 输出：[2, 4]

`find()`

find() 方法用于遍历数组，返回第一个满足条件的元素，如果没有找到则返回 undefined。

语法：

array.find(callback(element[, index[, array]])[, thisArg])

示例：

数组常用方法js：JavaScript数组常用方法全解析，从基础到进阶

const arr = [1, 2, 3, 4, 5];
const found = arr.find(item => item > 3);
console.log(found); // 输出：4

`indexOf()`

indexOf() 方法用于查找某个元素在数组中的第一个索引位置，如果不存在则返回 -1。

语法：

array.indexOf(searchElement[, fromIndex])

示例：

const arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3)); // 输出：2
console.log(arr.indexOf(6)); // 输出：-1

数组排序与合并方法

`sort()`

sort() 方法用于对数组的元素进行排序，默认是按Unicode编码排序，如果需要数字排序,需要提供一个比较函数。

语法：

array.sort([compareFunction])

示例：

const arr = [3, 1, 4, 2];
arr.sort((a, b) => a - b);
console.log(arr); // 输出：[1, 2, 3, 4]

`concat()`

concat() 方法用于合并两个或多个数组,不改变原数组。

语法：

array.concat(...args)

示例：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = arr1.concat(arr2);
console.log(newArr); // 输出：[1, 2, 3, 4, 5, 6]

数组转换与类型检测方法

`join()`

join() 方法用于将数组元素连接成一个字符串,可以指定分隔符。

语法：

array.join([separator])

示例：

数组常用方法js：JavaScript数组常用方法全解析，从基础到进阶

const arr = [1, 2, 3];
console.log(arr.join('-')); // 输出：1-2-3

`toString()`

toString() 方法用于将数组转换为字符串,元素用逗号分隔。

语法：

array.toString()

示例：

const arr = [1, 2, 3];
console.log(arr.toString()); // 输出：1,2,3

其他常用方法

`slice()`

slice() 方法用于提取数组的一部分,不改变原数组。

语法：

array.slice([start[, end]])

示例：

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 3);
console.log(newArr); // 输出：[2, 3]

`splice()`

splice() 方法用于添加、删除或替换数组中的元素,会改变原数组。

语法：

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

示例：

const arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, 'a', 'b');
console.log(arr); // 输出：[1, 'a', 'b', 4, 5]

`reduce()`

reduce() 方法用于遍历数组，执行一个 reducer 函数,返回一个累积结果。

语法：

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

示例：

const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, item) => acc + item, 0);
console.log(sum); // 输出：10

使用建议

选择合适的方法：根据需求选择合适的方法,避免过度使用某些方法。
注意原地修改：push、pop、shift、unshift、splice 会修改原数组，而 map、filter、reduce 等不会。
理解参数：熟悉每个方法的参数和返回值,避免不必要的错误。
链式调用：可以将多个方法链式调用,简化代码。