方法

原数组被修改

返回值

参数

作用

Array.from()

 

新的数组实例

3个参数(arrayLike,mapfn,thisArg)

从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例

Array.isArray()

 

值是Array,返回ture,否则false

1个参数(obj)

确定传递的值是否是一个Array

Array.of()

 

新的数组实例

任意个参数(elementN)

创建一个具有可变数量参数的新数组实例,不考虑参数的数量或类

Array.prototype.at()

数组中与给定索引匹配的元素,找不到返回undefined

1个参数(index),不传参时,默认为0

接收一个整数值并返回索引处的元素,允许负整数

Array.prototype.concat()

新的数组实例

任意个参数(valueN)

合并两个或多个数组

Array.prototype.copyWithin()

修改后的数组

3个参数(target,start,end)

将数组的一部分浅复制到同一数组中的另一位置,不修改数组长度

Array.prototype.entries()

新的迭代器对象 

无参

返回的新的迭代器对象中包含数组中每个索引的键/值对

Array.prototype.every()

callback函数每次返回都为 ​truthy​ (除`false、0、""、null、undefined、和NaN`以外皆为真值),返回true,否则false

2个参数(callback(element, index, array),thisArg)

测试数组中所有元素是否都通过某个函数的测试

Array.prototype.fill()

修改后的数组

3个参数(value,start,end)

用一个固定值填充数组从开始到终止索引内的全部元素(不包括终止索引)

Array.prototype.filter()

通过测试的元素组成的新数组,没有元素通过返回空数组

2个参数(callback(element,index,array),thisArg) 

创建新数组,包含通过函数测试的所有元素 

Array.prototype.find()

数组中第一个通过函数测试元素的值,没有则返回undefind

2个参数(callback(element,index,array),thisArg)

数组中第一个通过函数测试元素的值,否则返回undefined

Array.prototype.findIndex()

否 

数组中第一个通过函数测试元素的索引,没有则返回-1

2个参数(callback(element,index,array),thisArg)

数组中第一个通过函数测试元素的索引,否则返回undefined

Array.prototype.flat()

否 

包含将数组与子数组中所有元素的新数组

1个参数(depth),默认为1

按照可指定的深度递归遍历数组,将所有元素与遍历的子数组中的元素合并为新数组

Array.prototype.flatMap()

否 

新的数组,每个元素都是回调函数的结果,且结构深度depth值为1 

2个参数(callback(currentValue,index,array),thisArg)

映射函数映射每个元素,将结果压缩成新数组,并且最后返回的数组展开一层数组

Array.prototype.forEach()

否 

undefined 

2个参数(callback(currentValue,index,array),thisArg)

对数组的每个元素执行一个给定的函数 

Array.prototype.includes()

否 

布尔值,如果在数组中找到了传递的索引,返回true,否则false 

2个参数(valueToFind,fromIndex)

判断数组是否包含给定的值,包含返回true,否则false

Array.prototype.indexOf()

否 

首个被找到的元素在数组中的索引位置,没有找到返回-1 

2个参数(searchElement,fromIndex)

找到一个给定元素的第一个索引,不存在返回-1

Array.prototype.join()

由所有数组元素连接的字符串,如果长度为0,返回空字符串 

1个参数(separator),默认由(,)分隔

将数组的所有元素连接成字符串并返回,数组只有一个值,那么不会使用分隔符

Array.prototype.keys()

否 

新的数组迭代器对象 

无参 

包含每个索引键的Array Iterator对象

Array.prototype.lastIndexOf()

否 

数组中该元素最后一次出现的索引,未找到返回-1 

2个参数(searchElement,fromIndex)

返回给定元素在数组中的最后一个索引,从后面向前找,不存在返回-1

Array.prototype.map()

否 

由原数组每个元素执行回调函数的结果组成的新数组 

2个参数(callback(currentValue,index,array),thisArg) 

创建新数组,结果是该数组中每个元素调用一次函数后的返回值 

Array.prototype.pop()

数组中删除的元素,数组为空返回undefined 

无参 

删除数组中最后一个元素,并返回该元素的值,同时更改数组的长度 

Array.prototype.push()

是 

修改后数组的长度 

任意参数(elementN) 

将一个或多个元素添加到数组的末尾,并返回该数组的新长度

Array.prototype.reduce()

否 

函数累计处理的结果

2个参数(callback(accumulator,currentValue,index,array),initialValue)

数组中的每个元素执行一次函数,将其结果汇总为单个返回值

Array.prototype.reduceRight()

否 

函数累计处理的结果

2个参数(callback(accumulator,currentValue,index,array),initialValue)

接受一个函数作为累加器和数组的每个值(从右到左)将其减少为单个值

Array.prototype.reverse()

颠倒后的原数组

无参

将数组中元素的位置颠倒,并返回

Array.prototype.shift()

数组中删除的元素,数组为空返回undefined 

无参

 删除数组第一个元素,并返回该元素的值,数组长度被修改

Array.prototype.slice()

含有被提取元素的新数组

2个参数(begin,end)

 返回一个由begin和end决定的原数组的浅拷贝(不包括end)

Array.prototype.some()

数组中有一个元素通过函数的测试返回true,都没有通过则返回false

2个参数(callback(element,index,array),thisArg)

 测试数组中至少有一个元素通过函数测试

Array.prototype.sort()

排序后的数组

1个参数compareFunction(firstE1,secondE1)

用原地算法对数组的元素排序,并返回,默认顺序将元素转换为字符串,比较它们的UTF-16代码单元值序列时构建的

Array.prototype.splice()

被删除的元素组成的数组,只删除一个元素,返回只包含一个元素的数组,如果没有删除元素,则返回空数组

任意参数(start,deleteCount,item1,item2...),从第三个参数开始可以添加多个

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容

Array.prototype.toLocaleString()

表示数组元素的字符串

2个参数(locales,options)

返回一个字符串表示数组中的元素。数组中的元素将使用各自的 ​​toLocaleString​​ 方法转成字符串

Array.prototype.toString()

表示指定的数组及其元素的字符串

无参

返回一个字符串,表示指定的数组及其元素

Array.prototype.unshift()

是 

表示添加元素后的数组长度 

任意参数(elementN)

 将一个或多个元素添加到数组的开头,并返回该数组的新长度

Array.prototype.values()

新的数组迭代器对象

无参

返回新的Array Iterator对象,对象中包含数组的每个索引的值

██  --  静态方法  ██  --  查找类  ██  --  拼接、转换、扁平类  ██  --  增删改查类  ██  --  生成器(generator)类  ██  --  遍历类

方法详解

  • 静态方法

  1.from()  将一个伪数组(类数组)转换为真数组,从而可以使用数组中的方法



1 (function f() {
2 // 返回一个新数组,把类数组对象转换为真数组后才能使用数组中的方法,当传入第二个参数时,返回经过函数加工后的数组
3 const result = Array.from(arguments).reduce((prev, current) => prev + current)
4 const arr = [1,4,8]
5 const newArr = Array.from(arr, item => item * 2)
6 console.log(newArr) // 返回[2, 8, 16]
7 // const result = arguments.reduce((prev, current) => prev + current) // 报错:TypeError
8 console.log(result) // 9
9 })(1,3,5)


  2.isArray()  判断传递的参数是否是数组类型



1 console.log(Array.isArray({}))      // false
2 console.log(Array.isArray([1,3])) // true
3 console.log(Array.isArray(NaN)) // false
4 // 数组比较的地址值的比较
5 console.log([] === []) // false


  3.of()  创建一个新数组,值就是of方法的值(无论传递的是数量和类型)。修复了new Array创建数组,只传一个Number代表长度的问题



1 console.log(Array.of(4))        // [4]
2 console.log(Array.of(null)) // [null]
3 console.log(Array.of(4,"1")) // [4, "1"]


 

  • 查找类

  4.at()  查找当前索引的值,找不到返回undefined,可以传负整数



1 const arr = [5,2,4,8,9]
2 console.log(arr.at(-3)) // 4
3 console.log(arr.at(5))  // undefined


  5.find()  返回通过函数测试的第一个元素的值,都没通过返回undefined



1 const arr = [5,2,4,8,9]
2 console.log(arr.find(item => item > 5)) // 8
3 console.log(arr.find(item => item > 10)) // undefined


  6.findIndex()  返回通过函数测试的第一个值的索引,都没通过返回-1



1 const arr = [5,2,4,8,9]
2 const result = arr.find((item, index) => {
3 // 找到大于5的时候,退出,下标为3
4 console.log(index) // 0,1,2,3
5 return item > 5
6 })
7 console.log(result) // 8
8 console.log(arr.find(item => item > 10)) // undefined


  7.includes()  判断传递的值是否存在该数组中,存在返回true,不存在返回false



1 const arr = [5,2,4,8,9]
2 console.log(arr.includes(4)) // 返回true,第二个参数默认为0
3 console.log(arr.includes(9, 2)) // 返回true,第二个参数表示从第几个索引开始查找
4 console.log(arr.includes(4, -3)) // 返回true,第二个参数表示从倒数第三个查找,刚好找到


  8.indexOf()  通过传递的元素查找它所在的索引,找不到返回-1



1 const arr = [5,2,4,8,9]
2 console.log(arr.indexOf(4,-3)) // 2
3 console.log(arr.indexOf(8)) // 3
4 // 从倒数第二个索引开始查找,往后找没找到
5 console.log(arr.indexOf(2, -2)) // -1


  9.lastIndexOf()  通过传递的元素查找它最后一次出现的索引,找不到返回-1



1 const arr = [5,2,4,8,9,2,4,6]
2 // 这里-3代表从后往前找,所以开始就把-2地方的4忽略了,找到了索引为2的
3 console.log(arr.lastIndexOf(4,-3)) // 2
4 console.log(arr.lastIndexOf(8)) // 3
5 // 从-2开始,找到0 到 -2中的最后一个元素为2的索引
6 console.log(arr.lastIndexOf(2,-2)) // 5


 

  • 拼接、转换、扁平类

  10.concat()  合并数组,把传递的一个或多个元素与原数组合并,返回一个新数组



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


  11.flat()  将多维数组转换为一维数组



1 const arr = [1,3,[3,6,[6,8,[8,0]]]]
2 console.log(arr.flat(3)) // [1, 3, 3, 6, 6, 8, 8, 0]
3 console.log(arr.flat()) // [1, 3, 3, 6, [6, 8, [8, 0]]]
4 // 当不知道是几维数组,传入参数为"Infinity",无论是几维数组都会变为1维
5 console.log(arr.flat(Infinity)) // // [1, 3, 3, 6, 6, 8, 8, 0]


  12.flatMap()  使用映射函数映射每个元素,将结果压缩成一个新数组



1 const arr = [1,3,[3,6,[6,8,[8,0]]]]
2 // const result = arr.flatMap(item => item * 2)
3 // console.log(result) // [2, 6, NaN]
4 const result = arr.flat(Infinity).flatMap(item => item * 2)
5 console.log(result) // [2, 6, 6, 12, 12, 16, 16, 0]


  13.join()  将数组中的所有元素连接成一个字符串,元素为undefined和null时,会转换为空字符串



1 const arr = [1,3,[3,6,[6,8,[8,0]]]]
2 // console.log(arr.join()) // 1,3,3,6,6,8,8,0
3 // console.log(arr.join("-")) // 1-3-3,6,6,8,8,0
4 console.log(arr.flat(Infinity).join("+")) // 1+3+3+6+6+8+8+0


  14.toLocaleString()  返回一个格式化对象后的字符串,数组中的元素会各自调用自己的toLocaleString()转成字符串



1 const num = 111111111
2 console.log(num.toLocaleString()) // 111,111,111
3 // 格式化日期
4 console.log(new Date().toLocaleString('zh')) // 2021/10/5 上午11:40:39
5 console.log({name: 'zcb', age: 18}.toLocaleString()) // [object Object]


  15.toString()  返回一个字符串,多维数组中的元素也会被迭代出来



1 const arr = [1,3,[3,6,[6,8,[8,0]]]]
2 // 由数组中每个元素的toString()返回值加上join方法连接而成
3 console.log(arr.toString()) // 1,3,3,6,6,8,8,0
4 // 数组与字符串相加时每个元素会自动调用toString方法
5 console.log(arr + ',v two ray') // 1,3,3,6,6,8,8,0,v two ray


 

  • 增删改查类

  16.copyWithin()  将数组中的部分元素浅拷贝到指定的地方,会修改原来的数组



1 const arr = [5,2,4,8,9,6,3,6,3]
2 // 把索引[4,6)的元素拷贝到索引为0的位置,也就是 9 和 6 两个元素放到 索引 0,1的位置上
3 // console.log(arr.copyWithin(0,4,6)) // [9, 6, 4, 8, 9, 6, 3, 6, 3]
4 // 9 和 6 放到从最后开始的位置
5 // console.log(arr.copyWithin(-2,4,6)) // [5, 2, 4, 8, 9, 6, 3, 9, 6]
6 // console.log(arr.copyWithin(0,6)) // [3, 6, 3, 8, 9, 6, 3, 6, 3]
7 console.log(arr.copyWithin(4)) // [5, 2, 4, 8, 5, 2, 4, 8, 9]


  17.fill()  用一个固定值来填充从索引开始到结束位置,可用于替换数组中的某个元素



1 const arr = [5,2,4,8,9,6,3,6,3]
2 // 把索引为[0,3)地方的元素被5填充
3 // console.log(arr.fill(5,0,3)) // [5, 5, 5, 8, 9, 6, 3, 6, 3]
4 // console.log(arr.fill(5,-2)) // [5, 2, 4, 8, 9, 6, 3, 5, 5]
5 // 从-1到-3开始填充,不包含-1
6 console.log(arr.fill(5,-3,-1)) // [5, 2, 4, 8, 9, 6, 5, 5, 3]
7 // console.log(arr.fill(null)) // [null, null, null, null, null, null, null, null, null]


  18.pop()  删除数组中的最后一个元素,并返回这个元素



1 const arr = ['tom','vray','ft','laowang','express']
2 console.log(arr.pop()) // express
3 console.log(arr) // ['tom', 'vray', 'ft', 'laowang']


  19.push()  添加一个或多个元素到数组末尾,并返回数组新的长度



1 const arr = ['tom','vray','ft','laowang','express']
2 console.log(arr.push('verse', 'love')) // 7
3 console.log(arr) // ['tom', 'vray', 'ft', 'laowang', 'express', 'verse', 'love']
4 // console.log(arr.push('sym')) // 6
5 // console.log(arr) // ['tom', 'vray', 'ft', 'laowang', 'express', 'sym']


  20.reverse()  颠倒数组中元素的位置,第一个为最后一个,最后一个为第一个



1 const arr = ['tom','vray','ft','laowang','express']
2 // 返回颠倒后的数组,会修改原数组
3 console.log(arr.reverse()) // ['express', 'laowang', 'ft', 'vray', 'tom']


  21.shift()  删除数组的第一个元素,并返回这个元素



1 const arr = ['tom','vray','ft','laowang','express']
2 console.log(arr.shift()) // tom
3 console.log(arr) // ['vray', 'ft', 'laowang', 'express']


  22.slice()  将数组的一部分元素浅复制存入新的数组对象,通常用于截取数组的部分元素



1 const arr = [5,2,4,8,9,6,3,6,3]
2 console.log(arr.slice(3)) // [8, 9, 6, 3, 6, 3]
3 // 截取索引[3,5)位置的元素,不包含5
4 console.log(arr.slice(3, 5)) // [8, 9]
5 console.log(arr.slice(-3)) // [3, 6, 3]


  23.sort()  对数组的元素进行排序



1 const arr = [5,2,4,8,9,12,3,34,3]
2 // 按照提供的函数进行排序,升序
3 console.log(arr.sort((a,b) => a - b)) // [2, 3, 3, 4, 5, 8, 9, 12, 34]
4 // 默认按照转换为的字符串的诸个字符的Unicode位点进行排序
5 console.log(arr.sort()) // [12, 2, 3, 3, 34, 4, 5, 8, 9]
6 const strArr = ['tom','vray','Ft','laowang','express']
7 console.log(strArr.sort()) // ['Ft', 'express', 'laowang', 'tom', 'vray']


  24.splice()  删除、替换旧元素和在指定位置添加新元素



1 const arr = ['a', 'b', 'c', 'd', 'e']
2 // 从索引2开始的地方添加一个元素
3 // arr.splice(2,0, 'a')
4 // console.log(arr) // ['a', 'b', 'a', 'c', 'd', 'e']
5 // 从索引2的地方删除一个元素再添加一个元素
6 // arr.splice(2,1, 'a')
7 // console.log(arr) // ['a', 'b', 'a', 'd', 'e']
8 // 删除索引2的一个元素
9 arr.splice(2,1)
10 console.log(arr) // ['a', 'b', 'd', 'e']


  25.unshift()  添加一个或多个元素到数组开头,并返回数组新的长度



1 const arr = [5,2,4,8,9,12,3,34,3]
2 console.log(arr.unshift(2)) // 10
3 console.log(arr.unshift([4,3])) // 11
4 console.log(arr) // [[4, 3], 2, 5, 2, 4, 8, 9, 12, 3, 34, 3]


 

  • 生成器(generator)类

  26.entries()  返回一个迭代器对象,该对象包含数组中每个索引的键/值对,可以用for...of进行遍历



1 const arr = ['a', 'b', 'c', 'd', 'e']
2 const iterator = arr.entries()
3 console.log(iterator) // Array Iterator
4 console.log(iterator.next().value) // [0, 'a']
5 console.log(iterator.next().value) // [1, 'b']
6 console.log(iterator.next().value) // [2, 'c']
7 console.log(iterator.next().value) // [3, 'd']
8 console.log(iterator.next().value) // [4, 'e']
9 console.log(iterator.next().value) // undefined,迭代器处于数组末尾时, 再迭代就会返回undefined
10 // for (const ikey of iterator) {
11 // console.log(ikey,iterator[ikey]) // 打印数组中每个索引的键/值对
12 // }


  27.keys()  返回一个迭代器对象,该对象包含数组的每个索引的键,可以用for...of遍历



1 const arr = ['a', 'b', 'c']
2 const iterator = arr.keys()
3 console.log(iterator) // Array Iterator
4 console.log(iterator.next().value) // 0
5 console.log(iterator.next().value) // 1
6 console.log(iterator.next().value) // 2
7 console.log(iterator.next().value) // undefined,迭代器处于数组末尾时, 再迭代就会返回undefined
8 // for (const ikey of iterator) {
9 // console.log(ikey,iterator[ikey]) // 打印数组中每个索引的键
10 // }


  28.values()  返回一个迭代器对象,该对象包含数组的每个索引的值,可以用for...of遍历



1 const arr = ['a', 'b', 'c']
2 const iterator = arr.values()
3 console.log(iterator) // Array Iterator
4 console.log(iterator.next().value) // a
5 console.log(iterator.next().value) // b
6 console.log(iterator.next().value) // c
7 console.log(iterator.next().value) // undefined,迭代器处于数组末尾时, 再迭代就会返回undefined
8 // for (const ikey of iterator) {
9 // console.log(ikey,iterator[ikey]) // 打印数组中每个索引的值
10 // }


 

  • 遍历类

  29.every()  测试数组中所有的元素是否都能通过函数测试,全通过返回true,有一个没通过返回false



1 const arr = [5,2,4,8,9,6,3,6,3]
2 console.log(arr.every(item => item > 5)) // false
3 console.log(arr.every(item => item >= 2)) // true
4 // 当数组为空数组时,一切情况下都会返回true
5 console.log([].every(item => item >= 2)) // true


  30.filter()  将数组中通过函数测试的元素组成新的数组,其实就是一个过滤器,筛选掉不符合的元素



1 const arr = [5,2,4,8,9,6,3,6,3]
2 // console.log(arr.filter(item => item > 5)) // [8, 9, 6, 6]
3 // 数组去重:每次遍历查找元素所在下标是否和参数index相等,因indexOf只返回找到第一个元素的小标,所以后面重复的不会被找到
4 // console.log(arr.filter((item, index) => arr.indexOf(item) === index)) // [5, 2, 4, 8, 9, 6, 3]
5 arr.push(null, '', undefined, ' ')
6 // 去掉undefined、null和空字符串,truthy(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)
7 console.log(arr.filter(item => item)) // [5, 2, 4, 8, 9, 6, 3, 6, 3, ' ']


  31.forEash()  数组的每项元素都执行一次传入的函数,返回值为undefined,通常需要遍历操作数组



1 const arr = ['a', 'b', 'c']
2 arr.forEach((item, index) => console.log(item, index)) // 打印值和键 a和0 b和1 c和2


  32.map()  使用函数处理数组中的每个元素,返回处理后的新数组



1 const arr = ["1", "2", "3"]
2 /*
3 首先map里的回调函数可以接收3个参数(currentValue,index,array),parseInt可以接收2个参数(string,radix)
4 这里map的回调函数就相当于传了(string, radix),radix表示其他进制转换为十进制的基数,范围在2~36,不在范围内返回NaN
5 第一次进入,因为radix为0,这里会根据string来判定,有3种情况
6 1、如果string以0x开头,string的其余部分会当作16进制解析
7 2、如果string以0开头,radix被假定为8(八进制)或10(十进制),版本为ECMAScript 5 应该使用 10 (十进制)
8 3、string以任何数开头,radix以10进制解析
9 所以当第一次进入时:结果为10进制的1
10 第二次进入,索引为1,不在radix范围,返回NaN
11 第三次进入,索引为2,把3当作2进制解析,但二进制没有3,所以返回NaN
12 */
13 console.log(arr.map(parseInt)) // [1, NaN, NaN]
14 const arrNum = [1,3,9]
15 console.log(arr.map(item => item * 2)) // [2, 4, 6]


  33.reduce()  接收一个函数作为累加器,数组中的每个值开始合并,返回合并后的值



1 const arr = [1, 2, 3, 4]
2 // console.log(arr.reduce((acc, cur) => acc + cur)) // 10
3 // reduce有两个参数回调函数和初始值,10为开始累加的初始值
4 console.log(arr.reduce((acc, cur) => acc + cur, 10)) // 20
5 // 5的阶乘
6 const arrNum = []
7 for (let i = 1; i < 6; i++) {
8 arrNum.push(i)
9 }
10 console.log(arrNum.reduce((acc, cur) => acc * cur)) // 120
11 // 计算字符出现的次数
12 const str = "abcdaedfbcdba";
13 // 先使用split切割
14 const strCount = str.split("").reduce((acc, cur) => {
15 // 以第一个进入的a为例,如果没存在里面会返回undefined,这时初始化字符的值,存在的时候加1,第一二个acc[cur]代表键,第三个代表值
16 acc[cur] = acc[cur] === undefined ? 1 : acc[cur]++
17 return acc
18 }, {})
19 console.log(strCount) // {a: 3, b: 3, c: 2, d: 3, e: 1, …}


  34.reduceRight()  接收一个函数作为累加器,数组中的每个值开始合并(从右到左)



1 const arr = [1, 2, 3, 4]
2 // 这时累加器是从右往左开始累加4+3+2+1
3 console.log(arr.reduceRight((acc, cur) => acc + cur)) // 10
4 // reduce有两个参数回调函数和初始值,100为开始累减的初始值,其使用方法与reduce基本相似
5 console.log(arr.reduceRight((acc, cur) => acc - cur, 100)) // 90


  35.some()  测试数组中的元素是否通过函数测试,有一个通过返回true,且不再继续执行,全没通过返回false



1 const arr = [5,2,4,8,9,6,3,6,3]
2 console.log(arr.some(item => item > 5)) // true
3 console.log(arr.some(item => item > 10)) // false
4 // 当数组为空数组时,一切情况下都会返回false,与every刚好相反。every(全真为真,一假即假),some(全假为假,一真即真)
5 console.log([].some(item => item > 10)) // false


 

  • 这里还有3种方法Array.prototype[@@unscopables]、get Array[@@iterator]、Array.prototype.toSource(),其中toSource已经不再支持,运行时会报类型错误,其他两种也不常用,如果想了解可以直接参考MDN即可。最后,本人才疏学浅,如有错误,还望留言指正!