前言

数组的方法很多,但常用的就那几个,长时间不用慢慢就忘了用到的时候才想起来查一查。写篇文章整理一下数组方法可以帮助自己回忆一下以后没事看一看也能帮自己加深一下印象。

总览

方法名定义
contract连接两个或多个数组。
join指定分隔符把数组中的所有元素放入一个字符串返回分割后的字符串。
pop删除数组的最后一个元素并返回。
push向数组的末尾添加一个或多个元素,并返回新的数组的长度。
shift删除数组中的第一个元素,并返回该值。
unshift向数组的开头添加一个或多个元素,并返回新的数组的长度。
splice向/从数组中添加/删除项目,然后返回被删除的项目。
slice从已有的数组中返回选定的元素
reverse颠倒数组中元素的顺序。
sort对数组的元素进行排序。
toString把数组转换为字符串,并返回结果。
forEach遍历数组中所有的项
map遍历数组所有的项并返回执行结果
find找出第一个符合条件的数组成员
findIndex返回第一个符合条件的数组成员的位置
filter返回满足的元素并组成新的数组
some返回数组中是否有满足条件的元素
every返回数组中是否所有元素都满足条件
reduce从数组的第一项开始,逐个遍历到最后,迭代数组的所有项,然后构建一个最终返回的值。
reduceRight与 reduce() 方法类似,从数组的最后一项开始,向前逐个遍历到第一位,迭代数组的所有项,然后构建一个最终返回的值。
indexOf查询元素在数组中第一次出现的位置并返回所在下标
lastIndexOf从右到左查询元素在数组中第一次出现的位置并返回所在下标
includes返回一个布尔值,表示数组中是否包含给定的值
Array.from()将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
copyWithin在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组

contract

定义

concat() 方法用于连接两个或多个数组。

语法

1
array.concat(arr1, arr2, ...arrX)
参数描述
arrX必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。

实例

  • contract() 方法不会改变原数组,但是会返回一个合并后新的数组
1
2
3
4
const arr1 = ['hello']
const arr2 = ['dong']
const arr = arr1.concat(arr2)
console.log('arr: ', arr) // ['hello', 'dong']
  • contract() 方法的参数也可以是一个具体的值
1
2
3
4
const arr1 = ['hello']
const arr2 = 'dong'
const arr = arr1.concat(arr2)
console.log('arr: ', arr) // ['hello', 'dong']

join

定义

join() 方法通过指定分隔符把数组中的所有元素放入一个字符串返回分割后的字符串。

语法

1
array.join(separator)
参数描述
separator可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

实例

  • 不使用参数,则默认使用英文逗号分割
1
2
const arr = ['d', 'o', 'n', 'g']
const str = arr.join() // d,o,n,g
  • 使用空字符串进行分割
1
2
const arr = ['d', 'o', 'n', 'g']
const str = arr.join('') // dong
  • 任意指定一个分隔符
1
2
const arr = ['d', 'o', 'n', 'g']
const str = arr.join('-') // d-o-n-g

pop

定义

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

语法

1
array.pop()

实例

  • 直接使用
1
2
const arr = ['d', 'o', 'n', 'g']
const lastItem = arr.pop() // g
  • 使用该方法,会改变原数组
1
2
3
const arr = ['d', 'o', 'n', 'g']
const lastItem = arr.pop() // g
console.log('arr: ', arr) // ['d', 'o', 'n']
  • 如果数组为空,则 pop() 不改变数组,并返回 undefined
1
2
3
4
const arr = []
const lastItem = arr.pop()
console.log('arr: ', arr) // []
console.log('lastItem: ', lastItem) // undefined

push

定义

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

语法

1
array.push(item1, item2, ....itemX)
参数描述
item1必需。要添加到数组的第一个元素。
item2可选。要添加到数组的第二个元素。
itemX可选。可添加多个元素。

实例

  • 直接使用,在数组后追加一个元素,原数组长度变为2
1
2
const arr = ['dong']
const length = arr.push('cool') // 2
  • 使用该方法,会改变原数组,而不是创建一个新的数组
1
2
3
4
const arr = ['dong']
const length = arr.push('cool')
console.log('arr: ', arr) // ['dong', 'cool']
console.log('length: ', length) // 2
  • 追加多个元素
1
2
3
4
const arr = []
const length = arr.push('dong', 'cool', 'nice')
console.log('arr: ', arr) // ['dong', 'cool', 'nice']
console.log('length: ', length) // 3

shift

定义

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

语法

1
array.shift()

实例

  • 直接使用,删除数组中的第一个元素
1
2
3
const arr = ['dong', 'cool']
const firstItem = arr.shift()
console.log('firstItem: ', firstItem) // 'dong'
  • 使用该方法,会改变原数组,而不是创建一个新的数组
1
2
3
4
const arr = ['dong', 'cool']
const firstItem = arr.shift()
console.log('firstItem: ', firstItem) // 'dong'
console.log('arr: ', arr) // ['cool']
  • 如果数组为空,则 shift() 不会改变数组,并返回 undefined
1
2
3
4
const arr = []
const firstItem = arr.shift()
console.log('firstItem: ', firstItem) // undefined
console.log('arr: ', arr) // []

unshift

定义

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

语法

1
array.unshift(item1, item1, ....itemX)
参数描述
item1必需。要添加到数组的第一个元素。
item2可选。要添加到数组的第二个元素。
itemX可选。可添加多个元素。

实例

  • 直接使用,在数组开头添加一个元素,原数组长度变为2
1
2
3
const arr = ['dong']
const length = arr.unshift('hello')
console.log('length: ', length) // 2
  • 使用该方法,会改变原数组,而不是创建一个新的数组
1
2
3
const arr = ['dong']
const length = arr.unshift('hello')
console.log('arr: ', arr) // ['hello', 'dong']
  • 添加多个元素,会按照顺序依次添加到原数组
1
2
3
4
const arr = ['dong']
const length = arr.unshift('hello', 'hi')
console.log('arr: ', arr) // ['hello', 'hi', 'dong']
console.log('length: ', length) // 3

splice

定义

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

语法

1
array.splice(index,howmany,item1,.....,itemX)
参数描述
index必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, …, itemX可选。向数组添加的新项目。

实例

  • 传递两个参数,删除数组中下标为0的元素
1
2
3
4
const arr = ['d', 'o', 'n', 'g']
const deletedItem = arr.splice(0, 1)
console.log('arr: ', arr) // ['o', 'n', 'g']
console.log('deletedItem ', deletedItem) // ['d']
  • 如果指定第二个参数为0,则不会删除元素
1
2
3
4
const arr = ['d', 'o', 'n', 'g']
const deletedItem = arr.splice(0, 0)
console.log('arr: ', arr) // ['d', 'o', 'n', 'g']
console.log('deletedItem ', deletedItem) // []
  • 指定第一个参数为负数,则从数组末尾开始计算位置
1
2
3
4
const arr = ['d', 'o', 'n', 'g']
const deletedItem = arr.splice(-1, 1)
console.log('arr: ', arr) // ['d', 'o', 'n']
console.log('deletedItem ', deletedItem) // ['g']
  • 传递三个及以上的参数,则删除指定的元素并用参数列表中声明的值来替换被删除的元素
1
2
3
4
const arr = ['d', 'o', 'n', 'g']
const deletedItem = arr.splice(0, 1, 'x''y')
console.log('arr: ', arr) // ['x', 'y', 'o', 'n', 'g']
console.log('deletedItem: ', deletedItem) // ['d']

slice

定义

slice() 方法可从已有的数组中返回选定的元素

语法

1
array.slice(start,end)
参数描述
start必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

此方法并不会修改原数组,而是返回一个新数组

实例

  • 如果未指定 end 参数,那么该方法会选取从 start 到数组结尾的所有元素
1
2
3
const arr = ['d', 'o', 'n', 'g']
const newArr = arr.slice(1)
console.log('newArr: ', newArr) // ['o', 'n', 'g']
  • 如果只传递一个参数值为0,则拷贝一份原数组并返回新数组
1
2
3
const arr = ['d', 'o', 'n', 'g']
const newArr = arr.slice(0)
console.log('newArr: ', newArr) // ['d', 'o', 'n', 'g']
  • 使用 slice() 方法,end 参数并不会包含该元素
1
2
const arr = ['d', 'o', 'n', 'g']
const newArr = arr.slice(1, 3) // ['o', 'n']

如上代码,选取了下标为1,到下标为3(不包含)之间的元素

  • 指定startend为负数,则该方法从数组尾部开始计算位置
1
2
const arr = ['d', 'o', 'n', 'g']
const newArr = arr.slice(-2, -1) // ['n']

reverse

定义

reverse() 方法用于颠倒数组中元素的顺序。

语法

1
array.reverse()

实例

  • 使用该方法,会将原数组按照倒序顺序排列
1
2
3
const arr = ['d', 'o', 'n', 'g']
arr.reverse()
console.log('arr: ', arr) // ['g', 'n', 'o', 'd']

sort

定义

sort() 方法用于对数组的元素进行排序。

语法

1
array.sort(sortby)
参数描述
sortby可选。规定排序顺序。必须是函数。

实例

  • 如果不传递排序规则,会按照字符编码的顺序进行排序
1
2
3
const arr = [4, 3, 1, 2]
const sort = arr.sort()
console.log('sort: ', sort) // ['1', '2', '3', '4']
  • sort() 方法的返回值是对数组的引用,不会生成新的数组,即会修改原数组结构
1
2
3
const arr = [4, 3, 1, 2]
arr.sort()
console.log('arr: ', arr) // [1, 2, 3, 4]
  • 如果需要按照给定标准进行排序,需要为sort()方法传递一个比较函数,该函数接受两个值并返回排序结果
1
2
3
const arr = ['4', '3', '1', '2']
arr.sort((a, b) => a - b)
console.log('arr: ', arr) // ['1', '2', '3', '4']

toString

定义

toString() 方法可把数组转换为字符串,并返回结果。

语法

1
array.toString()

实例

  • 该方法并不会改变原数组,而是返回一个字符串
1
2
3
4
const arr = ['dong']
const stringArr = arr.toString()
console.log('stringArr: ', stringArr) // dong
console.log('arr: ', arr) // ['dong']

forEach

定义

forEach() 方法用来遍历数组中所有的项

语法

1
array.forEach(callback)
参数描述
callback必须。所有数组成员依次调用该函数,直到找到数组的每一项。

实例

  • forEach() 方法的回调函数接受三个参数,分别为当前项当前项的下标数组本身
1
2
3
4
5
6
const arr = ['d', 'o', 'n', 'g']
arr.forEach((item, index, arr) => {
console.log('item: ', item) // d,o,n,g
console.log('index: ', index) // 0,1,2,3
console.log('arr: ', arr) ['d', 'o', 'n', 'g']
})

map

定义

map() 方法用来遍历数组所有的项并返回执行结果

语法

1
array.map(callback)
参数描述
callback必须。所有数组成员依次调用该函数并返回执行结果。

实例

  • map() 方法的回调函数接受三个参数,分别为当前项当前项的下标数组本身
1
2
3
4
5
6
const arr = ['d', 'o', 'n', 'g']
arr.map((item, index, arr) => {
console.log('item: ', item) // d,o,n,g
console.log('index: ', index) // 0,1,2,3
console.log('arr: ', arr) ['d', 'o', 'n', 'g']
})
  • 每次调用都会返回一个数组元素到新数组
1
2
3
4
5
6
const arr = ['d', 'o', 'n', 'g']
const newArr = arr.map((item, index, arr) => {
return item + '--' + index
})
console.log('arr: ', arr) // 该方法并不会修改原数组,而是返回一个新数组
console.log('newArr: ', newArr) // ['d--0', 'o--1', 'n--2', 'g--3']

find

定义

find() 方法,用于找出第一个符合条件的数组成员

语法

1
array.find(callback)
参数描述
callback必须。所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员

实例

  • find() 方法的回调函数接受三个参数,分别为当前项当前项的下标数组本身
1
2
3
4
5
6
const arr = ['d', 'o', 'n', 'g']
arr.find((item, index, arr) => {
console.log('item: ', item) // d,o,n,g
console.log('index: ', index) // 0,1,2,3
console.log('arr: ', arr) ['d', 'o', 'n', 'g']
})
  • 用来找到数组中第一个符合条件的元素
1
2
3
4
const arr = ['d', 'o', 'n', 'g']

const result = arr.find(item => item !== 'g')
console.log('result: ', result) // d
  • 找不到符合条件的元素会返回 undefined
1
2
3
4
const arr = ['d', 'o', 'n', 'g']

const result = arr.find(item => item === 'x')
console.log('result: ', result) // undefined

findIndex

定义

findIndex() 方法返回第一个符合条件的数组成员的位置

语法

1
array.findIndex(callback)

数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

实例

  • find() 方法的回调函数接受三个参数,分别为当前项当前项的下标数组本身
1
2
3
4
const arr = ['d', 'o', 'n', 'g']

const result = arr.findIndex(item => item !== 'g')
console.log('result: ', result) // 0

filter

定义

filter() 方法返回满足的元素并组成新的数组

语法

1
array.filter(callback)
参数描述
callback必须。所有数组成员依次执行该回调函数并返回执行结果

实例

  • filter() 方法的回调函数接受三个参数,分别为当前项当前项的下标数组本身
  • 找到数组中符合条件的元素并得到新的数组
1
2
3
4
5
const arr = ['d', 'o', 'n', 'g']
const result = arr.filter((item, index, arr) => {
return item !== 'g'
})
console.log('result: ', result) // ['d', 'o', 'n']

some

定义

some() 方法返回数组中是否有满足条件的元素

语法

1
array.some(callback)
参数描述
callback必须。所有数组成员依次执行该回调函数并返回执行结果

实例

  • some() 方法的回调函数接受三个参数,分别为当前项当前项的下标数组本身
  • some() 方法只要找到数组中有一个元素结果为 true,就返回 true
1
2
3
4
5
const arr = ['d', 'o', 'n', 'g']
const result = arr.some((item, index, arr) => {
return item !== 'g'
})
console.log('result: ', result) // true
  • 找不到符合条件的元素,则返回 false
1
2
3
4
5
const arr = ['d', 'o', 'n', 'g']
const result = arr.some((item, index, arr) => {
return item === 'x'
})
console.log('result: ', result) // false

every

定义

every() 方法返回数组中是否所有元素都满足条件

语法

1
array.every(callback)
参数描述
callback必须。所有数组成员依次执行该回调函数并返回执行结果

实例

  • every() 方法的回调函数接受三个参数,分别为当前项当前项的下标数组本身
  • every() 方法只有数组中所有元素结果都为 true,才返回 true
1
2
3
4
5
const arr = ['d', 'o', 'n', 'g']
const result = arr.every((item, index, arr) => {
return item !== 'x'
})
console.log('result: ', result) // true
  • 只要有一个元素不满足条件,则返回 false
1
2
3
4
5
const arr = ['d', 'o', 'n', 'g']
const result = arr.every((item, index, arr) => {
return item === 'd'
})
console.log('result: ', result) // false

reduce

定义

reduce() 方法从数组的第一项开始,逐个遍历到最后,迭代数组的所有项,然后构建一个最终返回的值。

语法

1
array.reduce(callback)
参数描述
callback必须。用于执行每个数组元素的函数。
initial可选。作为归并的初始值,被回调函数第一次执行时的第一个参数接收

实例

  • reduce() 方法的回调函数接受四个参数,分别为 上一项下一项当前项的下标数组本身
1
2
3
4
5
const arr = ['d', 'o', 'n', 'g']
const result = arr.reduce((prev, next, index, arr) => {
return prev + '--' + next + '--' + index
})
console.log('result: ', result) // d--o--1--n--2--g--3

可以看到以上代码打印结果,没有下标0,因为 reduce() 方法归并了 prevnext作为一项

  • 传递 initial 参数,作为函数执行时的第一个元素
1
2
3
4
5
const arr = ['d', 'o', 'n', 'g']
const result = arr.reduce((prev, next, index, arr) => {
return prev + '--' + next + '--' + index
}, 2020)
console.log('result: ', result) // 2020--d--0--o--1--n--2--g--3
  • 实现数组元素累加
1
2
3
4
5
const arr = ['d', 'o', 'n', 'g']
const result = arr.reduce((prev, next, index, arr) => {
return prev + next
}, 2020)
console.log('result: ', result) // 2020dong

reduceRight

与 reduce() 方法类似,从数组的最后一项开始,向前逐个遍历到第一位,迭代数组的所有项,然后构建一个最终返回的值。

indexOf

定义

indexOf() 方法用于查询元素在数组中第一次出现的位置并返回所在下标

语法

1
array.indexOf(item)
参数描述
item必须。要查找的数组元素
start可选。表明要从何处开始查询

实例

  • indexOf() 方法返回元素在数组中的位置
1
2
3
const arr = ['d', 'o', 'n', 'g']
const result = arr.indexOf('o')
console.log('result: ', result) // 1
  • 找不到元素返回 -1
1
2
3
const arr = ['d', 'o', 'n', 'g']
const result = arr.indexOf('d', 1)
console.log('result: ', result) // -1

lastIndexOf

定义

lastIndexOf() 方法从右到左查询元素在数组中第一次出现的位置并返回所在下标

语法

1
array.lastIndexOf(item)
参数描述
item必须。要查找的数组元素
start可选。表明要从何处开始查询

实例

  • lastIndexOf() 方法从右到左,找到元素在数组中第一次出现的位置
1
2
3
const arr = ['d', 'o', 'n', 'o', 'g']
const result = arr.lastIndexOf('o')
console.log('result: ', result) // 3
  • 指定开始查询的位置
1
2
3
const arr = ['d', 'o', 'n', 'o', 'g']
const result = arr.lastIndexOf('o', 2)
console.log('result: ', result) // 1
  • 找不到元素返回 -1
1
2
3
const arr = ['d', 'o', 'n', 'g']
const result = arr.lastIndexOf('x')
console.log('result: ', result) // -1

includes

定义

includes() 方法返回一个布尔值,表示数组中是否包含给定的值

语法

1
array.includes(item)
参数描述
item必须。要查找的数组元素

实例

  • includes() 方法返回数组中是否存在给定的元素
1
2
3
const arr = ['d', 'o', 'n', 'g']
const result = arr.includes('n')
console.log('result: ', result) // true
  • 找不到元素返回 false
1
2
3
const arr = ['d', 'o', 'n', 'g']
const result = arr.includes('x')
console.log('result: ', result) // false

Array.from()

定义

Array.from() 方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

语法

1
Array.from(arrayObject)
参数描述
arrayObject必须。要转为数组的对象

实例

  • 将一个类数组对象转换为真正的数组
1
2
3
4
5
6
7
8
9
const arrObj = {
'0': 'd',
'1': 'o',
'2': 'n',
'3': 'g',
length: 4
}
const arr = Array.from(arrObj)
console.log('arr: ', arr) // ['d', 'o', 'n', 'g']
  • NodeList对象转换为真正的数组
1
2
const boxes = document.querySelectorAll('div')
Array.from(boxes)
  • 只要是部署了 Iterator 接口的数据结构,Array.from都能将其转为数组。

copyWithin

定义

copyWithin() 方法在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组

语法

1
array.copyWithin((target, start = 0, end = this.length))
参数描述
target必须。从该位置开始替换数据。如果为负值,表示倒数。
start可选。从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算
end可选。到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。

实例

  • 使用该方法,会改变原数组
1
2
3
const arr = ['d', 'o', 'n', 'g']
const result = arr.copyWithin(1)
console.log('arr: ', arr) // ['d', 'd', 'o', 'n']
  • 指定开始位置和结束位置
1
2
const arr = ['d', 'o', 'n', 'g']
console.log(arr.copyWithin(1, 2, 3)) // ['d', 'n', 'n', 'g']

参考资料