数组常用方法

关键方法分类

迭代方法：forEach | map | filter | reduce | some | every | find | findIndex
修改原数组方法：push | pop | shift | unshift | splice | sort | reverse
返回新数组方法：map | filter | reduce | concat | flat | slice | flatMap

为什么要了解和使用这些方法

1.在日常开发中，熟练运用这些高级函数，替代简陋的 for 循环，可以让代码更加简洁，提高代码可读性 2.避免副作用，知道哪些方法会修改原数组，哪些方法会返回新数组，避免意外的状态变更

用法

1.forEach：遍历数组，无法跳出循环，没有返回值

const arr = [1, 2, 3, 4, 5]
arr.forEach(item => {
    console.log(item)
})

2.map：映射数组，返回新数组，不修改原数组, 相当于是数组映射，将数组中的每个元素映射成一个新的元素

const arr = [1, 2, 3, 4, 5]
const newArr = arr.map(item => item * 2)
console.log(newArr)

3.filter：过滤数组，返回新数组，不修改原数组, 相当于是数组过滤，将数组中的每个元素过滤成一个新的元素

const arr = [1, 2, 3, 4, 5]
const newArr = arr.filter(item => item > 3)
console.log(newArr)

4.reduce：累加数组，返回累加结果，不修改原数组, 相当于是数组累加，将数组中的每个元素累加成一个新的元素

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

5.concat：合并数组，返回新数组，不修改原数组, 相当于是数组合并，将两个数组合并成一个新的数组

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

6.flat：扁平化数组，返回新数组，不修改原数组, 相当于是数组扁平化，将多维数组扁平化成一维数组，默认扁平化一层，可以传入参数，扁平化多层

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

// 扁平化多层
const arr = [1, 2, [3, 4, [5, 6]]]
const newArr = arr.flat(2)
console.log(newArr) // [1, 2, 3, 4, 5, 6]

7.slice：切片数组，返回新数组，不修改原数组, 相当于是数组切片，将数组切片成一个新的数组

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

8.flatMap：扁平化数组，返回新数组，不修改原数组, 相当于是数组扁平化，将数组扁平化成一维数组，默认扁平化一层，可以传入参数，扁平化多层，与flat不同的是，flatMap会先执行回调函数，再进行扁平化

const arr = [1, 2, 3, 4, 5]
const newArr = arr.flatMap(item => [item, item * 2])
console.log(newArr) // [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

9.push：添加元素到数组末尾，修改原数组, 相当于是数组添加元素，将元素添加到数组末尾

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

10.pop：删除数组末尾的元素，修改原数组, 相当于是数组删除元素，将数组末尾的元素删除

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

11.shift：删除数组首位的元素，修改原数组, 相当于是数组删除元素，将数组首位的元素删除

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

12.unshift：添加元素到数组首位，修改原数组, 相当于是数组添加元素，将元素添加到数组首位

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

13.splice：删除数组中的元素，修改原数组, 相当于是数组删除元素，将数组中的元素删除, 第1个参数是起始索引，第2个参数是删除的元素个数，第3个参数是添加的元素

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

// 添加元素
arr.splice(1, 0, 2.5)
console.log(arr) // [1, 2.5, 4, 5]

// 添加多个元素
arr.splice(1, 0, 2.5, 3.5)
console.log(arr) // [1, 2.5, 3.5, 4, 5]

// 删除多个元素
arr.splice(1, 2)
console.log(arr) // [1, 4, 5]

// 删除多个元素并添加元素
arr.splice(1, 2, 2.5, 3.5)
console.log(arr) // [1, 2.5, 3.5, 4, 5]

14.sort：排序数组，修改原数组, 相当于是数组排序，将数组排序成一个新的数组

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

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

// 随机排序
arr.sort(() => Math.random() - 0.5)
console.log(arr) // [1, 2, 3, 4, 5]

# 数组常用方法

关键方法分类

为什么要了解和使用这些方法

用法

# 深浅拷贝的本质

# 对象遍历方法对比