引言

在前端开发中，数组是一种常见且重要的数据结构。数组提供了许多便捷的方法来操作和处理其中的数据。本文将简单介绍前端中数组42个API，包括添加、删除、截取、合并、转换等操作。

数组方法中，大致可以分为以改变数组本身的，不改变数组本身的（返回一个新的数组），还有就是其他对数组本身功能性作用的方法

改变数组本身的方法 描述
pop() pop() 方法用于删除并返回数组的最后一个元素
push() push()方法用于向数组末尾添加一个或多个元素，并返回修改后的数组的新长度
shift() shift() 方法用于删除并返回数组的第一个元素
unshift() unshift() 方法用于向数组的开头添加一个或多个元素，并返回修改后的数组的新长度
sort() sort() 方法用于对数组进行原地排序，会直接修改原始数组，而不会创建新的数组。
reverse() reverse() 方法用于反转数组中的元素顺序，即将数组元素进行逆序排列
splice() splice() 方法用于从数组中删除、替换或添加元素，并返回被删除的元素组成的数组
copyWithin() copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中
fill() fill()方法可以填充一个数组中的所有元素

push() 和 pop()

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

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

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

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

unshift() 和 shift()

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

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

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

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

sort()

sort() 方法用于进行对数组就地排序，不会复制或返回一个新数组，接收可选参数，一个回调函数，有a, b两个参数，当返回a < b时返回 -1 从小到大排序，当返回a > b时返回 1 从大到小排序，a == b时返回 0，保持原来的排序（默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const arr = [1, 3, 4, 2]
arr.sort()
console.log(arr) // [1, 2, 3, 4]

// 默认排序: 按照它们的 UTF-16 码元值升序排序
const arr = ['q', 'w', 'e', 'r']
arr.sort()
console.log(arr) // ['e', 'q', 'r', 'w']

// 使用回调函数升序: a < b
const arr = [10, 30, 40, 20]
arr.sort((a, b) => {
    return a - b
})
console.log(arr) // [10, 20, 30, 40]

// 使用回调函数降序: a > b
const arr = [100, 300, 400, 200]
arr.sort((a, b) => {
    return b - a
})
console.log(arr) // [400, 300, 200, 100]

reverse()

reverse() 方法用于对数组进行就地反转，顺序颠倒

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

splice()

splice() 方法用于从数组中添加元素、删除或替换，并返回被删除的元素组成的数组，它会直接修改原数组

语法：array.splice(start, deleteCount, item1, item2, ...)

其中，start表示要修改的起始位置，deleteCount表示要删除的元素个数，item1、item2等表示要添加的元素。如果deleteCount为0，则表示只添加元素，不删除元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 添加操作
const addArr = [1, 2, 3]
const newAddArr =  addArr.splice(1, 0, '我是插入的')
console.log(addArr) // [1, '我是插入的', 2, 3]
console.log(newAddArr) // [] 返回空数组(没有删除操作)

// 删除操作
const delArr = [1, 2, 3]
const newDelArr = delArr.splice(1, 1)
console.log(delArr) // [1, 3]
console.log(newDelArr) // [2]

// 替换操作
const replaceArr = [1, 2, 3]
const newReplaceArr = replaceArr.splice(0, 1, '我是替换的')
console.log(replaceArr) // ['我是替换的', 2, 3]
console.log(newReplaceArr) // [1]

copyWithin()

copyWithin是一种移动数组数据的高性能方法，copyWithin() 方法是通用的。它只期望 this 值具有 length 属性和整数键属性。虽然字符串也是类似数组的，但这种方法不适用于它们，因为字符串是不可变的。
copyWithin不会改变数组的长度，只会修改内容，它接收三个参数，第一个为复制到的目标位置（索引值），第二个是复制的起始位置（可选），如果为负数，则相当于从后往前数，第三个为结束位置，不包含此索引的位置（可选），起始位置不可小于结束位置，否者方法无效。并返回这个数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const arr1 = ['March', 'Jan', 6, 2, 'A', 'a']
// 从索引为三个位置开始复制，到索引为5的位置，但不包含5，从索引为1的位置粘贴并覆盖
const newArr = arr1.copyWithin(1, 3, 5)
console.log(arr1, newArr) // [ 'March', 2, 'A', 2, 'A', 'a' ] [ 'March', 2, 'A', 2, 'A', 'a' ]

// 为负数时从后往前数-2从A的位置到-1不包括-1的位置，也就是将A赋值并覆盖到了索引为0的位置
const newArr = arr1.copyWithin(0, -2, -1)
console.log(newArr) // [ 'A', 'Jan', 6, 2, 'A', 'a' ]

// 这种结束索引位置在开始索引位置之前的都不生效
const newArr = arr1.copyWithin(0, -2, 2)
const newArr = arr1.copyWithin(0, -2, -4)
console.log(newArr) // [ 'March', 'Jan', 6, 2, 'A', 'a' ]

fill()

JS中的fill方法可以填充一个数组中的所有元素，它会直接修改原数组。

语法：array.fill(value, start, end)

其中，value表示要填充的值，start和end表示要填充的起始位置和结束位置。如果不传入start和end，则默认填充整个数组。该方法返回的是被修改后的原数组

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

// 第二个参数与第三个参数
const arr2 = [1, 2, 3]
arr2.fill(4, 0, 1) // 从数组下标 0 开始填充至下标 1 (不包含下标 1)
console.log(arr2) // [4, 2, 3]