前言
作为一名前端开发人员，JavaScript 数组是一个非常关键且常用的数据结构，也是我们最常用的数据类型之一，无论你是刚入门前端开发者还是经验丰富的专家，深入了解和掌握 JavaScript 数组操作的技巧都是必不可少的。无论你是在构建响应式网页、开发复杂的应用程序还是设计打造出色的数据可视化，理解和熟练掌握数组操作是前端开发的必备基础。通过学习数组操作，你将获得处理数据的强大能力，可以更好地满足用户需求并提升用户体验。
由于有关数组的操作方法比较多，所以作为一名前端开发工作者，我整理了常见的数组操作方法，并做出了分类，下面来跟我一起看一看吧。
有关数组的方法大概可分为
- 操作方法
- 排序方法
- 转换方法
- 迭代方法
操作方法
数组的基本操作可以归纳为增删改查，需要留意哪些方法会对原数组产生影响，哪些方法不会
增
下面三种方法中，前三种会对原数组产生影响，第四种不会对原数组产生影响
- push()
- unshift()
- splice()
- concat()
push
push() 方法接收任意数量的参数，并将他们添加到数组末尾
语法： push(element0, element1, ..., elementN)
返回值：返回的结果是数组的最新长度
let arr = ['red', 'green', 'blue']
let length = arr.push('yellow', 'pink')
console.log(arr) // ['red', 'green', 'blue', 'yellow', 'pink']
console.log(length) // 5
unshift
unshift() 方法接收任意数量的参数，并将他们添加到数组开头
语法： unshift(element0, element1, ..., elementN)
返回值：返回的结果是数组的最新长度
let arr = ['brown', 'black', 'white']
let length = arr.unshift('gray', 'gold')
console.log(arr) // ['gray', 'gold', 'brown', 'black', 'white']
console.log(length) // 5
splice
splice() 方法通过移除或者替换已存在的元素和/或添加新元素改变一个数组的内容
语法：
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1, item2, ... itemN)
start
从 0 开始计算的索引，表示要开始改变数组的位置，它会被转换成整数
deleteCount（可选）
一个整数，表示数组中要从 start 开始删除的元素数量。
item1, item2, ..., itemN（可选）
从 start 开始要加入到数组中的元素。
如果不指定任何元素，splice() 将只从数组中删除元素。
返回值：
如果删除了数组中的元素，则返回值是删除的值组成的数组，否则若是没有删除元素，返回空数组
let arr = ['a', 'b', 'c']
let result = arr.splice(1, 0, 'd')
console.log(arr) // ['a', 'd', 'b', 'c']
console.log(result) // []
let arr = ['a', 'b', 'c']
let result = arr.splice(1, 1, 'd')
console.log(arr) // ['a', 'd', 'c']
console.log(result) // ['b']
concat
concat() 方法用于合并两个或多个数组，不会更改原数组
语法：
concat()
concat(value1)
concat(value1, value2)
concat(value1, value2, ..., valueN)
valueN:（可选）
数组和/或值，将被合并到一个新的数组中。如果省略了所有 valueN 参数，则 concat 会返回调用此方法的现存数组的一个浅拷贝
连接两个数组
const letter1 = ["a", "b", "c"]
const letter2 = ['d', 'e', 'f']
const letters = letter1.concat(letter2)
console.log(letters) // ['a', 'b', 'c', 'd', 'e', 'f']
连接三个数组
const num1 = [1, 2, 3]
const num2 = [4, 5, 6]
const num3 = [7, 8, 9]
const numbers = num1.concat(num2, num3)
console.log(numbers) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
合并嵌套数组
const num1 = [[1]]
const num2 = [2, [3]]
const numbers = num1.concat(num2)
console.log(numbers) // [[1], 2, [3]]
删
下面数组的操作方法，前三种会对原数组产生影响，最后一项不影响原数组
- pop()
- shift()
- splice()
- slice()
pop
pop() 方法从数组中删除最后一个元素，此方法会更改数组的长度
语法：pop()
返回值：返回删除掉的元素。如果你在空数组上调用 pop()，它会返回 undefined
const letters = ['a', 'b', 'c', 'd']
const result = letters.pop()
console.log(letters) // ['a', 'b', 'c']
console.log(result) // d
const letters = []
const result = letters.pop()
console.log(letters) // []
console.log(result) // undefined
shift
shift() 方法从数组中删除第一个元素，此方法更改数组的长度
语法：shift()
返回值：从数组中删除的元素，如果数组为空则返回 undefined
const letters = ['a', 'b', 'c', 'd']
const result = letters.shift()
console.log(letters) // ['b', 'c', 'd']
console.log(result) // 'a'
const letters = []
const result = letters.shift()
console.log(letters) // []
console.log(result) // undefined
splice
splice() 方法通过移除或者替换已存在的元素和/或添加新元素改变一个数组的内容
语法：同上
返回值：同上
const letters = ['a', 'b', 'c', 'd']
const result = letters.splice(1, 2)
console.log(letters) // ['a', 'd']
console.log(result) // ['b', 'c']
截取数组
slice
slice() 方法返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。
语法：
slice()
slice(start)
slice(start, end)
返回值：一个含有被提取元素的新数组
start
从该索引处开始提取原数组中的元素,如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取， slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。如果省略 start ，则 slice 从索引 0 开始。
end
在该索引处结束提取原数组元素（从0开始）。 slice 会提取原数组中索引从 begin 到 end 的所有元素（包含begin，但不包含end）。
slice(1,4) 提取原数组中的第二个元素开始直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。
如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
如果 end 被省略，则 slice 会一直提取到原数组末尾。如果 end 大于数组长度， slice 也会一直提取到原数组末尾。
let colors1 = ['red', 'blue', 'green', 'yellow', 'purple']
let colors2 = colors1.slice(1)
let colors3 = colors2.slice(1, 4)
let color4 = colors1.slice(-1)
console.log(colors1); // ['red', 'blue', 'green', 'yellow', 'purple']
console.log(colors2); // ['blue', 'green', 'yellow', 'purple']
console.log(colors3); // ['green', 'yellow', 'purple']
console.log(color4); // ['purple']
如果没有参数，将返回对这个数组的浅拷贝
let color1 = ['red', 'blue', 'green', 'yellow', 'purple']
let color2 = color1.slice()
console.log(color2) // ['red', 'blue', 'green', 'yellow', 'purple']
console.log(color2 === color1) // false
查
indexOf
indexOf() 方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1
语法：
indexOf(searchElement)
indexOf(searchElement, fromIndex)
返回值：返回第一次出现给定元素的下标，否则返回-1
searchElement
数组中要查找的元素
fromIndex 开始搜索的索引（从 0 开始），会转换为整数，更详细内容，查看 indexOf
const letters = ['a', 'b', 'c', 'd']
const result1 = letters.indexOf('c')
const result2 = letters.indexOf('e')
const result3 = letters.indexOf('b', 2)
console.log(result1) // 2
console.log(result2) // -1
console.log(result3) // -1
includes
includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false
语法：
includes(searchElement)
includes(searchElement, fromIndex)
searchElement
需要查找的值
fromIndex 开始搜索的索引（从 0 开始），会转换为整数，更详细内容，查看includes
const letters = ['a', 'b', 'c', 'd']
const result1 = letters.includes('c')
const result2 = letters.includes('e')
const result3 = letters.includes('b', 2)
console.log(result1) // true
console.log(result2) // false
console.log(result3) // false
find
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
语法：
find(callbackFn)
find(callbackFn, thisArg)
callback
为数组中的每个元素执行的函数。它应该返回一个真值来表示已经找到了匹配的元素。该函数被调用时将传入以下参数：
- element: 数组中当前正在处理的元素
- index: 正在处理的元素在数组中的索引
- array: 调用了 find() 的数组本身
thisArg
执行 callbackFn 时用作 this 的值
let arr1 = [1,true,"luffy",4,5];
let s1 = arr1.find(item=>{
return typeof item === 'string'
})
console.log(s1); // luffy
let arr2 = [1,2,3,4,5];
let s2 = arr2.find(item=>{
return typeof item === 'string'
})
console.log(s2); // undefinded
排序方法
数组有两个方法可以用来对元素重新排序
- reverse()
- sort()
reverse
reverse() 方法就地反转数组中的元素，并返回同一数组的引用。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个
语法：reverse()
返回值：原始数组反转后的引用。注意，数组是就地反转的，并且没有复制
const numbers = [1,2,3,4,5,6]
console.log(numbers.reverse()) // [6, 5, 4, 3, 2, 1]
sort
sort() 方法就地对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序
语法：
sort()
sort(compareFn)
compareFn
定义排序顺序的函数。返回值应该是一个数字，其正负性表示两个元素的相对顺序。该函数使用以下参数调用
- a: 第一个用于比较的元素。不会是 undefined
- b：第二个用于比较的元素。不会是 undefined
如果省略该函数，数组元素会被转换为字符串，然后根据每个字符的 Unicode 码位值进行排序
返回值：经过排序的原始数组的引用。注意数组是就地排序的，不会进行复制
const arr = [21, 34, 29, 78, 530, 90, 89, 28]
const result = arr.sort()
// 注意sort没有参数的时候，是将数组中的每一项转化为字符串在进行比较，所以是按照UTF-16 码进行排序，并不是按照数值的大小进行排序
console.log(arr) // [21, 28, 29, 34, 530, 78, 89, 90]
console.log(result) // [21, 28, 29, 34, 530, 78, 89, 90]
const arr = [21, 34, 29, 78, 530, 90, 89, 28]
const result = arr.sort((a, b) => {
return a - b
})
// 此时会按照数值从小到大排序
console.log(arr) // [21, 28, 29, 34, 78, 89, 90, 530]
console.log(result) // [21, 28, 29, 34, 78, 89, 90, 530]
const arr = [21, 34, 29, 78, 530, 90, 89, 28]
const result = arr.sort((a, b) => {
return b - a
})
// 此时会按照从大到小排序
console.log(arr) // [530, 90, 89, 78, 34, 29, 28, 21]
console.log(result) // [530, 90, 89, 78, 34, 29, 28, 21]
转换方法
join
join() 方法将一个数组的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符
语法：
join()
join(separator)
separator
指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果省略，数组元素用逗号（,）分隔。如果 separator 是空字符串（""），则所有元素之间都没有任何字符。
返回值：一个所有数组元素连接的字符串。如果 arr.length 为 0，则返回空字符串
const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
const result1 = letters.join()
const result2 = letters.join('-')
console.log(result1) // a,b,c,d,e,f,g
console.log(result2) // a-b-c-d-e-f-g
迭代方法
常用的数组迭代方法：
- forEach()
- map()
- filter()
- some()
- every()
- find()
- findIndex()
以上方法的参数均为一个回调函数，函数的参数如下：
- element：数组中当前正在处理的元素
- index：正在处理的元素在数组中的索引
- 数组本身
forEach
forEach() 方法对数组的每个元素执行一次给定的函数
返回值：undefined
const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
letters.forEach((element, index, arr) => {
console.log(element)
})
// 'a', 'b', 'c', 'd', 'e', 'f', 'g'
const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
letters.forEach((element, index, arr) => {
console.log(index)
}) // 0, 1, 2, 3, 4, 5, 6
const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
letters.forEach((element, index, arr) => {
console.log(arr)
}) // 多次输出 ['a', 'b', 'c', 'd', 'e', 'f', 'g']
map
map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成
返回值：一个新数组，每个元素都是回调函数的返回值
const arr = [1, 2, 3, 4, 5]
const newArr = arr.map(item => {
return item + 1
})
console.log(newArr)
filter
filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素
返回值：返回给定数组的一部分的浅拷贝，其中只包括通过提供的函数实现的测试的元素。如果没有元素通过测试，则返回一个空数组
const arr = [1, 2, 3, 4, 5]
const newArr = arr.filter(item => {
return item > 2
})
console.log(newArr) // [3, 4, 5]
some
some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组
返回值：如果回调函数对数组中至少一个元素返回一个真值，则返回 true。否则返回 false
const arr = [1, 2, 3, 4, 5];
const s1 = arr.some(item => {
return item === 1;
})
console.log(s1); //true
const s2 = arr.some(item => {
return item === 9;
})
console.log(s2); //false
every
every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值
返回值：如果 callbackFn 为每个数组元素返回真值，则为 true。否则为 false
const arr1 = [1, 2, 3, 4]
const s1 = arr1.every(item => {
return typeof item === 'number'
})
console.log(s1); //true
const arr2 = [1, '男', false, 90]
const s2 = arr2.every(item => {
return typeof item === 'number'
})
console.log(s2); //false
find
参考 操作方法中的查
findIndex
findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1
返回值：数组中第一个满足测试条件的元素的索引，否则返回 -1
const arr1 = [1, true, "luffy", 4, 5];
const s1 = arr1.findIndex(item => {
return typeof item === 'string'
})
console.log(s1); //2
const arr2 = [1, 2, 3, 4, 5];
const s2 = arr2.findIndex(item => {
return typeof item === 'string'
})
console.log(s2); //-1
