JS 常用数组方法总结

1~7的数组方法接收一个回调方法（callback）作为第一个参数，给回调方法传入的第一个参数为数组元素，回调方法最后有返回，若方法只有一行，则默认返回该行的运算结果

1.forEach()

遍历每个元素，没有返回值

缺点：此方法无法中途退出，使用return，break无效

let arr = ['a', 'b', 'c']
arr.forEach(x => console.log(x)) // a b c

以上代码顺序遍历并输出数组arr的成员

2.map()

遍历所有元素，对每个元素进行处理，返回处理后的新数组，原数组不变

let arr = [2, 3, 4]
console.log(...arr.map(x => x * x)) // 4 9 16
console.log(...arr) // 2 3 4

以上代码对数组arr的每个成员做平方操作，返回新的数组，并用扩展运算符(...，将一个数组转为用逗号分隔开的参数序列)分解后输出，最后一行代码输出原数组，元素组不变

3.find() 

找出第一个符合条件的成员，返回该成员

let arr = [1, 4, 7]
console.log(arr.find(x => x > 3)) // 4

以上代码找到第一个大于3的成员，并返回该成员

4.findIndex() 

 找出第一个符合条件的成员，返回该成员的下标

let arr = [1, 4, 7]
console.log(arr.findIndex(x => x > 3)) // 1

以上代码找到第一个大于3的成员，并返回该成员的下标

5.some()

返回一个布尔值，若数组中存在一个符合条件的成员，返回true，否则返回false

let arr = [1, 4, 7]
console.log(arr.some(x => x > 7)) // false
console.log(arr.some(x => x > 3)) // true

以上代码分别查找数组中是否存在大于7和大于3的成员，返回相应的结果

6.every()

返回一个布尔值，若数组中所有成员都满足条件，返回true，否则返回false

let arr = [1, 4, 7]
console.log(arr.every(x => x > 0)) // true

以上代码判断数组arr中的所有成员是否都大于0，结果是肯定的

7.filter()

（过滤器）过滤出所有满足条件的成员，这些成员组成一个新数组并返回，原数组不变

let arr = [1, 4, 7]
console.log(arr.filter(x => x > 2)) // [4, 7]
console.log(arr) // [1, 4, 7]

以上代码过滤数组arr中所有大于2的成员，将这些成员组成新数组并返回，最后一行输出原数组，可看到原数组不变

keys()，values() ，entries()，返回一个遍历器对象，可用for...of遍历，唯一的区别是：keys是对键名的遍历，values是对键值的遍历，entries是对键值对的遍历

此3个方法同样适用于ES6新增的数据结构set，map

8.keys()

返回数组的遍历器对象，此对象可用for...of循环遍历，遍历内容是数组的下标（因为数组结构成员是单值，在使用该方法后默认以成员的下标作为键，以成员作为值构成键值对形式）

let arr = [1, 4, 7]
console.log(arr.keys()) // Object [Array Iterator] {}
for (let arg of arr.keys()) {
  console.log(arg) // 0 1 2
}

以上代码输出arr.keys()的内容为一个遍历器对象，用for...of 对此对象作遍历操作，得到数组的下标

9.values()

返回数组的遍历器对象，此对象可用for...of循环遍历，遍历内容是数组的成员

let arr = [1, 4, 7]
console.log(typeof (arr.values())) // object
for (let arg of arr.values()) {
  console.log(arg) // 1 4 7
}

以上代码输出arr.values()的内容为一个遍历器对象，用for...of对此对象作遍历操作，得到数组的成员

10.entries()

返回数组的遍历器对象，此对象可用for...of循环遍历，遍历内容是[下标，成员]

let arr = [1, 4, 7]
console.log(typeof (arr.entries())) // object
for (let arg of arr.entries()) {
  console.log(arg) // [ 0, 1 ] [ 1, 4 ] [ 2, 7 ]
}

以上代码输出arr.entries()的内容为一个遍历器对象，用for...of对此对象作遍历操作，得到[下标，成员]的键值对形式

11.fill()

使用给定值填充一个数组，对空数组的初始化非常方便

let arr = [1, 2, 3]
console.log(arr.fill(4)) // [4,4,4]
// 将原数组所有成员的值覆盖为7


let arr = new Array(3).fill(4)
console.log(arr) // [4,4,4]
// 新建一个由三个成员组成的数组，每个成员都为4，可看出此方法方便数组的初始化

fill()方法还可以传递第二个和第三个参数，用于指定填充的起始位置和结束位置 

let arr = [1, 2, 3]
console.log(arr.fill(7,1,2)) // [1,7,3]

12.includes()

返回一个布尔值，表示某个数组是否包含给定的值

let arr = [1, 2, 3]
console.log(arr.includes(2)) // true

该方法的第二个参数表示，开始查找的位置，若该参数是负数，则表示倒数的位置，如果这时它大于数组的长度，则会重置于从0开始

let arr = [1, 2, 3]
console.log(arr.includes(2, 2)) // false
console.log(arr.includes(2, -1)) // false
console.log(arr.includes(2, -2))  // true
console.log(arr.includes(2, -100)) // true

第二行代码，从数组的下标为2（第三个成员3）的成员开始查找，找不到剩下的成员是2的，所有返回false

第三行代码，同样是从数组的下标为2的成员开始查找，同样返回flase

第四行代码，从数组的下标为1的成员开始查找，找到成员2，所以返回true

第五行代码，从数组的开始位置开始查找，找到成员2，返回true

13.copyWithin()

使用这个方法会在当前数组内部将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组，此方法会覆盖原数组

它接受3个参数：

target(必选)：从该位置开始替换数据

start(可选)：从该位置开始读取数据，默认为0

end(可选)：到该位置前停止读取数据，默认等于数组长度

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

以上代码从数组下标为2的成员开始替换，替换为从下标为3开始的成员，替换第四个成员后（从4变成5），由于已经读取到末尾，所以第五个成员无需更改

14.slice()

从原数组中截取一段作为新数组返回，原数组不变，此方法接受连个参数

start(必选)： 从此处开始读取数组

end(可选)：从此处之前停止读取数组

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

15.splice()

用于添加或删除数组中的成员，此方法会更改原数组

参数列表:

index(必须)：规定从何处开始添加/删除数组

howmany(可选)：规定删除数组成员的个数，若值为0，则不删除成员，意味着只往数组中添加成员

item1, item2, ... , item n(可选): 要添加到数组的新成员

let arr = [1,2,3]
arr.splice(1, 0, 'a', 'b')
console.log(arr) // [ 1, 'a', 'b', 2, 3 ]

let arr = [1,2,3]
arr.splice(1, 1, 'a', 'b')
console.log(arr) // [ 1, 'a', 'b', 3 ]

以上为数组实例方法，以下是两个数组原型方法

16.Array.from()

用于将两类对象转换为真正的数组：类似数组的对象和可遍历对象（包括map和set）

（1）类似数组的对象本质特征是必须有length属性，length的值为number类型或能转成数字的字符串

let arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

let arr = Array.from(arrayLike)
console.log(arr) // [ 'a', 'b', 'c' ]

以上代码顺利输出数组的值 

let arrayLike = {
  0: 'a',
  'kkk': 'b',
  2: 'c',
  length: 3
}

let arr = Array.from(arrayLike)
console.log(arr) // [ 'a', undefined, 'c' ]

 以上代码由于下标为2的成员不确定，所以值为undefined

let arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  // length: 3
}

let arr = Array.from(arrayLike)
console.log(arr) // []

 以上代码删除了必要属性length，使得arr为空

let arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 2
}

let arr = Array.from(arrayLike)
console.log(arr) // [ 'a', 'b' ]

以上代码的length值为2，所以arr的长度为2

let arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: '3'
}

let arr = Array.from(arrayLike)
console.log(arr) // [ 'a', 'b', 'c' ]

以上代码的length值可转成number类型，正常输出 

let arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 'abc'
}

let arr = Array.from(arrayLike)
console.log(arr) // []

以上代码的length的值无法转成number，所以arr为[]

（2）如果一个对象部署了Iterator接口，则Array.from能将器转为数组

let arr = Array.from([1,2,3])
console.log(arr) // [ 1, 2, 3 ]
let set = new Set([2,3,4,2,2])
let arr2 = Array.from(set)
console.log(arr2) // [ 2, 3, 4 ]

数组[1,2,3]自动部署了Iterator接口，作为参数传递给Array.from()时能够成功转为数组，换句话说，若传入此方法的参数为数组，则会返回一个完全相同的数组

set集合也自动部署了Iterator接口，所以能通过Array.from()转换成新的数组

17.Array.of()

用于将一组值转换为数组，此方法的主要目的是弥补数组构造函数Array()的不足，因为参数个数的不同会导致Array()的行为有差异

console.log(new Array()) // []
console.log(new Array(3)) // [ <3 empty items> ]
console.log(new Array(1,2)) // [1,2]

当参数个数为0时，生成空数组，当只有1个参数时，生成由n个成员组成且成员为空的数组，仅当参数个数大于1时，Array()才会返回由参数组成的新数组

console.log(Array.of()) // []
console.log(Array.of(3)) // [3]
console.log(Array.of(undefined, 1)) // [undefined, 1]

以上代码表明无论给Array.of()传递多少个参数，都会严格返回相应个数的新数组，它的行为非常统一