最新ES6+中数组的拓展总结，面试必备

目录：

1.扩展运算符
2.Array.form()
3.Array.of()
4.数组实例的copyWithin()
5.数组实例的find()和findIndex()
6.数组实例的fill()
7.数组实例的entries(),keys(),vlaues()
8.数组实例的includes()
9.数组的空位

1.扩展运算符

在ES6中新增加了一个...运算符，叫做扩展运算符，在我的ES6+中函数的扩展大总结 说了ES6中函数的参数有了一个rest参数，也是...的操作符，它可以让函数调用时传递的参数保存到一个数组中。如下

function add(...values){
   let sum = 0;
   values.forEach(value=>{
    sum + = value; 
 ])
  return sum
}
let sum = add（1,2,3,4,5,6,7）

除了本文内容。接下来我还会在我的裙里用视频讲解的方式给大家拓展下图中的内容：有兴趣的可以来小编的扣扣裙 519293536  免费交流学习，我都会尽力帮大家哦，

 接下来继续本文内容：

而在数组中的这个扩展运算符如同rest参数的逆运算，可以将一个数组转为用逗号分隔的参数序列。

console.log(...[1,2,3,4,5,6,7]);
//1,2,3,4,5,6,7

[...document.querySelectorAll('div')]
//<div> <div> <div>
复制代码

两个运算符（rest参数和...运算符）配合起来会非常的方便

function  push(array, ...items){
   array.push(...items)
}
复制代码

由于有了扩展运算符，所以不需要使用apply将数组转化为函数的参数

//ES5
function f(x,y,z){
    //...
}
f.apply(null,[1,2,3])

//ES6
function f(x,y,z){
}
f(...[1,2,3])
复制代码

应用：

1.合并数组

//在ES5中合并数组使用的时Array.concat()API，在ES6中就可以使用扩展运算符
let array = [1,2,3,4,5,...[6,7,8,9]]
let array= [...[1,2,3,4],...[5,6,7],...[8,9,0]]
复制代码

2.与 解构赋值 配合使用

let a ,array
[a,...array] = [1,2,3,4,5,6,7,8]

a//1
array//[2,3,4,5,6,7,8]
复制代码

上面的代码中将等号右边的数组中的第一个元素通过解构赋值传递给a，后面的传递给数组array,这里需要注意的是：如果将扩展运算符用于数组赋值，则只能将其放在参数的最后一位，否则将会报错。

const [...butlast,last] = [1,2,3,4,5,6]

//报错！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
复制代码

3.函数的参数

上面已经举过例子了，这里。。。。。。。

4.字符串

扩展运算符可以将字符串转为真正的数组

5.将DOM节点的对象转换为数组

请看如下代码：

let nodeList = document.querySelectorAll("div");
let array = [...nodeList]
复制代码

其中nodeList是一个对象（类似数组的对象，但是还是对象），而不是一个数组，但是使用扩展运算符可以将该对象转换为真正的数组，这是因为扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterato接口的对象都可以使用扩展符，上面代码中的nodeList具有Iterator接口，所以可以使用。

2.Array.from()

Array.form方法用于将两类对象转化为真正的数组：类似数组的对象和可遍历的对象（ES6新增的Map和Set）。

下面的代码是类似数组的对象，Array.from将它转化为真正的数组。

let arrayLike = {
   "0":"a",
   "1":"b",
   "2":"c"
    length:3
}
let array = Arrat.from(arrayLike);//["a","b","c"]
复制代码

在实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象，Array.from都可以将他们转化为数组。

同样只有部署了Iterator接口的数据结构才可以被Array.from转化，如果转化的对象是数组则会返回一个一模一样的数组。

Array.from('hello');//['h','e','l','l','o']


let namesSet = new Set(['a','b']);
Array.from(namesSet)//['a','b']
复制代码

上面我们说过，只有具有Iterator接口的数据结构才可以使用扩展运算符，而类似数组的对象，所谓类似数组的对象实际上就是具有length的属性的对象，而有的情况下具有length的对象Array.from无法正确的转化，请看下面这种情况。

Array.from({length: 3})
//[undefined,undefined,undefined]
复制代码

对于没有部署该方法的浏览器可以使用Array.prototype.slice 方法代替。

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike,x => x*x);
//等同于
Array.from(arrayLike).map(x => x*x);

Array.from([1,2,3],(x) => x*x)
//[1,4,9] 
复制代码

如果第二个参数（类似map的参数）用到了this，那么参数还可以传递第三个值，用来绑定this。

3.Array.of()

Array.of()方法用于将一组值转换为数组。

let array = Array.of(1,2,3,4,5);
array //[1,2,3,4,5]
复制代码

代码看起来是不是似曾相识？？？是不是像let array = Array(1,2,3,4,5)其实这个方法是对Array（）的弥补，因为Array（）的参数个数不同会返回不同的结果，会有一些差异。

Array()//[]
Array(3)//[ , , ]
Array(1,2,3)//[1,2,3]
复制代码

上面的代码中参数的个数分别为0个，1个，多个时所返回的结果会有不同，而Array.of就不会因为参数的个数不同而导致重载，他的行为非常统一。

Array.of()//[]
Array.of(2)//[2]
Array.of(1,2)//[1,2]
Array.of(undefined)//[undefined]
复制代码

4. 数组实例的copyWithin()

数组实例的copyWithin方法会在当前内部指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组，也就是说使用这个方法会改变当前数组。

Array.prototype.copyWithin(target,start = 0,end = this.length)

它接受三个参数：
1.（必选） target: 从该位置开始复制
2. （可选）start ：从该位置开始读取数据，默认为0，如果为负值则表示倒数
3.（可选）end：到该位置停止读取数据，默认为数组的长度，如果为负值则表示倒数

这三个位置应该都是数子,表示对应的下标，如果不是则会自动转为数值。

5.数组实例的find()和findIndex()

数组实例的find()和findIndex()方法都是用于找出数组中第一个符合条件的数组成员，它的参数是一个回调函数，所有数组成员一次执行该回调函数，直到找出第一个返回值为true的成员，他们的区别就是find()会返回值，而findindex()会返回下标。他们都可以接受三个参数，依次是：当前值，当前的位置和原数组。

[1,2,3,4,5,6].find((n)=>n > 5) //6(值)
[1,2,3,4,5,6].findIndex((n)=>n > 5) //5（下标）
复制代码

需要注意的是这两个方法里的参数是回调函数，可以在回调函数里面使用 Object.is()来区分NaN，弥补了indexOf的不足

6.数组实例的fill()

fill方法使用给定值填充一个数组

['a','b','c'].fill(7)
//[7,7,7]
new Array(3).fill(7);
//[7,7,7]
复制代码

从上面代码可以看出，fill方法用于空数组的初始化时非常方便，数组中已有的元素会被覆盖，当然也可以传递第二个和第三个参数来表示开始和结束填充的位置

['a','b','c'].fill(7,1,2)
复制代码

7.数组实例的entries(),keys(),values()

ES6提供了这三个新的方法用于遍历数组，他们都返回一个遍历器对象，可以使用for ... of ...循环遍历，他们的区别在于：keys()是对键名的遍历，values是对键值对的遍历，entries是对键值对的遍历。

 for(let index of ['a','b'].keys()){console.log(index)}//0 1

 for(let value of ['a','b'].keys()){console.logvalue)}//a  b

 for(let [index,value] of ['a','b'].keys()){console.log(index,value)}//0  'a'   1  'b'
复制代码

需要注意的是第三行代码的[index,value]中的是数组

8.数组实例的includes()

Array.prototype.includes方法返回一个布尔值，表示数组是否包含给定的值，与字符串的includes类似。

[1,2,3].includes(2) //true 
复制代码

该方法还可以传递第二个参数表示开始搜索的位置，如果该参数大于数组的长度则会被重置为0，如果为负数则表示倒数。

[1,2,3].includes(2,2) //false
复制代码

这个方法与indexOf类似，需要区别的是indexOf不够语义化，无法指定开始搜索的位置，而且indexOf中使用===来进行判断,会导致NaN误判，includes使用的是不一样的算法，就没有这个问题。

9.数组的空位

数组的空位表示在声明一个数组的时候只定义了数组的大小并未赋值时的空位

new Array(3);
//[  ,   ,  ]
复制代码

空位不是undefined，一个位置的值等于undefined依然是有值的，空位是没有任何值得,可以使用in操作符证明

在ES5中对空位的处理很不一致，大多数情况下会忽略（forEach(),filter(),every(),some()会跳过空位，map()会跳过空位，但会保留这个值，join(),toString()会将空位视为undefined，而undefined和null会被处理成空字符串）。ES6则明确的将空位转为undefined。（Array.from,扩展运算符会视为undefined,copyWithin会将空位一起复制，fill将空位视为正常的数组位置。。。。。）

总之：由于空位的处理非常不统一，所以要避免出现空位 !!!!!

好了，除了以上内容。接下来我还会在我的裙里用视频讲解的方式给大家拓展下图中的内容：有兴趣的可以来我的扣扣裙 519293536  免费交流学习，我都会尽力帮大家哦，

以上内容我会不定期在群里视频讲解。想学习的可以来小编的扣扣裙 519293536 免费交流学习
本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理