最新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参数,也是...的操做符,它可让函数调用时传递的参数保存到一个数组中。以下javascript

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

除了本文内容。接下来我还会在个人裙里用视频讲解的方式给你们拓展下图中的内容:有兴趣的能够来小编的扣扣裙 519293536  免费交流学习,我都会尽力帮你们哦,java

 接下来继续本文内容:node

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

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,这里须要注意的是:若是将扩展运算符用于数组赋值,则只能将其放在参数的最后一位,不然将会报错。app

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 免费交流学习本文的文字及图片来源于网络加上本身的想法,仅供学习、交流使用,不具备任何商业用途,版权归原做者全部,若有问题请及时联系咱们以做处理

相关文章
相关标签/搜索