数组的重要性

在JavaScript开发中，数组可能是用得最多的数据结构。不管是处理接口返回的数据列表，还是做前端展示，都离不开数组操作。

掌握数组的各种方法，能让代码更简洁优雅。

遍历方法

一、forEach

forEach是最基本的遍历方法，对数组每个元素执行一次提供的函数。

const arr = [1, 2, 3, 4, 5]
arr.forEach((item, index) => {
console.log(第${index}个元素是${item})
})

forEach没有返回值，适合只需要遍历不需要产生新数组的场景。

二、map

map和forEach很像，但它会返回一个新数组，新数组的每个元素是原数组元素经过函数处理后的结果。

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

map适合需要把一组数据转换成另一组数据的场景，比如把用户id列表转换成用户对象列表。

三、filter

filter用于筛选数组，返回满足条件的元素组成的新数组。

const arr = [1, 2, 3, 4, 5, 6]
const even = arr.filter(x => x % 2 === 0)
console.log(even) // [2, 4, 6]

filter不会改变原数组，适合做数据筛选。

四、reduce

reduce是数组方法中最强大的一个，可以实现累加、去重、分组等复杂操作。

reduce接收两个参数：回调函数和初始值。回调函数有四个参数：累加器、当前值、当前索引、原数组。

const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((acc, cur) => acc + cur, 0)
console.log(sum) // 15

用reduce做分组：

const users = [
{ name: '张三', role: 'admin' },
{ name: '李四', role: 'user' },
{ name: '王五', role: 'admin' }
]

const groupByRole = users.reduce((acc, user) => {
if (!acc[user.role]) {
acc[user.role] = []
}
acc[user.role].push(user)
return acc
}, {})

查找方法

一、find和findIndex

find返回数组中第一个满足条件的元素，findIndex返回索引。

const arr = [10, 20, 30, 40]
const found = arr.find(x => x > 25)
console.log(found) // 30

const index = arr.findIndex(x => x > 25)
console.log(index) // 2

二、includes

includes判断数组是否包含某个值，返回布尔值。

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

三、some和every

some判断是否有元素满足条件，every判断是否所有元素都满足条件。

const arr = [1, 2, 3, 4]
console.log(arr.some(x => x > 3)) // true
console.log(arr.every(x => x > 0)) // true

增删改方法

一、push和pop

push在数组末尾添加元素，pop删除末尾元素。这两个方法会改变原数组。

const arr = [1, 2]
arr.push(3)
console.log(arr) // [1, 2, 3]
arr.pop()
console.log(arr) // [1, 2]

二、unshift和shift

unshift在数组开头添加元素，shift删除开头元素。

const arr = [1, 2]
arr.unshift(0)
console.log(arr) // [0, 1, 2]
arr.shift()
console.log(arr) // [1, 2]

三、splice

splice是万能方法，可以删除、插入、替换元素。

arr.splice(起始索引, 删除个数, 要插入的元素)

const arr = [1, 2, 3, 4]
arr.splice(1, 2) // 从索引1开始删除2个元素
console.log(arr) // [1, 4]

arr.splice(1, 0, 2, 3) // 在索引1处插入2和3
console.log(arr) // [1, 2, 3, 4]

四、slice

slice用于截取数组，返回新数组，不改变原数组。

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

其他常用方法

一、sort排序

sort用于排序，默认按字符串排序。

const arr = [3, 1, 4, 1, 5]
arr.sort((a, b) => a - b) // 升序
console.log(arr) // [1, 1, 3, 4, 5]

二、concat合并数组

concat合并多个数组，返回新数组。

const arr1 = [1, 2]
const arr2 = [3, 4]
const arr3 = arr1.concat(arr2)
console.log(arr3) // [1, 2, 3, 4]

三、扩展运算符

ES6的扩展运算符是更简洁的写法。

const arr1 = [1, 2]
const arr2 = [3, 4]
const arr3 = [...arr1, ...arr2] // [1, 2, 3, 4]

四、解构赋值

快速获取数组元素。

const arr = [1, 2, 3]
const [first, second] = arr
console.log(first, second) // 1 2

实际应用示例

场景一：将对象数组转换成下拉框需要的数据格式

const users = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' }
]
const options = users.map(user => ({
value: user.id,
label: user.name
}))

场景二：去重

const arr = [1, 1, 2, 2, 3]
const unique = [...new Set(arr)]

场景三：取最大值

const arr = [10, 20, 30, 40]
const max = Math.max(...arr)

总结

数组方法很多，不需要全记住，但要知道有这个方法，用到的时候去查。

建议自己写代码多练习，把每个方法都用一遍，自然就记住了。