es6新增的数组方法有哪些

es6新增的数组方法有哪些

这篇文章主要介绍“es6新增的数组方法有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“es6新增的数组方法有哪些”文章能帮助大家解决问题。

新增数组方法：1、from()，可将类数组或可迭代对象转为真正的数组；2、of()，可将一组值转换为数组，它弥补数组构造函数Array()的不足；3、find()和findIndex()，返回第一个符合条件的数组元素；4、fill()等等。

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

es6新增数组方法

1、Array.from()

Array.from 方法用于将两类对象转为真正的数组：

• 类似数组的对象（array-like object）

• 可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

意味着，只要部署了Iterator接口的数据结构，Array.from都能将其转换为数组

实际开发中，一般可以用来转换DOM操作返回的NodeList集合，以及函数内部的arguments对象

传一个参数时，用于将类数组转为真正的数组

• 数组去重
  

constarr=[1,2,3,3,3,2,5];console.log(Array.from(newSet(arr)));//[1,2,3,5]//...也可实现相同的效果console.log([...newSet(arr)])//[1,2,3,5]

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

cosnttoArray=(()=>{Array.from?Array.from:obj=>[].slice.call(obj)})()

还可以接收第二个参数，第二个参数传入一个函数，实现类似map方法的效果，对每个元素进行处理并返回处理好的数组

Array.from([1,2,3],item=>item*2)//[2,4,6]

• 返回字符串的长度

可以用于将字符串转为数组，然后返回字符串的长度，因为它能够正确处理各种Unicode字符，从而避免JS将大于/uFFFF的Unicode字符算作2个字符的自身bug

functioncountLength(string){returnArray.from(string).length}

2、Array.of()

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

//如下代码看出差异Array.of(3);//[3]Array.of(3,11,8);//[3,11,8]newArray(3);//[,,,]newArray(3,11,8);//[3,11,8]//Array.of方法可以用下面的代码模拟实现。functionArrayOf(){return[].slice.call(arguments);}

3、数组实例的 find() 和 findIndex()

find()

返回第一个符合条件的数组成员，它的参数是一个回调函数，所有数组成员依次执行该函数，直到找出第一个满足条件的成员，然后返回该成员，如果没有符合条件的成员，则返回undefined

该方法的回调函数接收三个参数： 当前的值 ， 当前位置， 原数组

示例1

[1,12,4,0,5].find(（item,index,arr）=>returnitem<1)//0

示例2

//find()varitem=[1,4,-5,10].find(n=>n<0);console.log(item);//-5//find也支持这种复杂的查找varpoints=[{x:10,y:20},{x:20,y:30},{x:30,y:40},{x:40,y:50},{x:50,y:60}];points.find(functionmatcher(point){returnpoint.x%3==0&&point.y%4==0;});//{x:30,y:40}

findIndex()

写法用法基本与find()方法相同，只是返回第一个符合条件的数组成员的位置，如果没有则返回-1

示例1

[1,2,4,15,0].findIndex((item,index,arr)=>returnitem>10)//3

示例2

varpoints=[{x:10,y:20},{x:20,y:30},{x:30,y:40},{x:40,y:50},{x:50,y:60}];points.findIndex(functionmatcher(point){returnpoint.x%3==0&&point.y%4==0;});//2points.findIndex(functionmatcher(point){returnpoint.x%6==0&&point.y%7==0;});//1

4、数组实例的 fill()

• fill()方法使用给定值， 填充一个数组

• fill 方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置

//fill方法使用给定值，填充一个数组。varfillArray=newArray(6).fill(1);console.log(fillArray);//[1,1,1,1,1,1]//fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。["a","b","c"].fill(7,1,2);//['a',7,'c']//注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。letarr=newArray(3).fill({name:"Mike"});arr[0].name="Ben";console.log(arr);//[{name:"Ben"},{name:"Ben"},{name:"Ben"}]

这两个方法都可以发现数组中的NaN，而ES5中的indexOf()是发现不了NaN的

5、数组实例的 entries()，keys() 和 values()

三个方法都用来遍历数组，都返回一个遍历器对象，可用for…of循环遍历

不同的是：

• keys()是对键名的遍历

• values()是对键值的遍历

• entries()是对键值对的遍历

for(letindexof["a","b"].keys()){console.log(index);}//01for(letelemof["a","b"].values()){console.log(elem);}//abfor(let[index,elem]of["a","b"].entries()){console.log(index,elem);}//0"a"//1"b"vara=[1,2,3];[...a.values()];//[1,2,3][...a.keys()];//[0,1,2][...a.entries()];//[[0,1],[1,2],[2,3]]

6、includes()方法返回一个布尔值

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

[1,2,3].includes(2)//true[(1,2,3)].includes(4)//false

还可接收第二个参数，表示搜索的起始位置，默认是0。如果第二个参数是负数，则表示到数的位置。如果第二个参数大于数组的长度，则从下标0处开始

includes 方法弥补了 indexOf 方法不够语义化和误判 NaN 的缺点

[1,23,NaN].includes(NaN)//true

兼容方法：

functioncontains=(()=>{Array.prototype.includes?(arr,val)=>arr.includes(val):(arr,val)=>arr.some(item=>returnitem===val)})()

7、数组实例的 flat()，flatMap()

• flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。传参数代表拉平几层默认是一层

• flatMap()只能展开一层数组。方法对原数组的每个成员执行一个函数（相当于执行 Array.prototype.map()），然后对返回值组成的数组执行 flat()方法。该方法返回一个新数组，不改变原数组

//flat()[1,2,[3,[4,5]]].flat()//[1,2,3,[4,5]][1,2,[3,[4,5]]].flat(2)//[1,2,3,4,5]//flatMap()[2,3,4].flatMap((x)=>[x,x*2])//map执行完后是[[2,4],[3,6],[4,8]]//然后在执行flat()方法得到下边的结果//[2,4,3,6,4,8]//flatMap()只能展开一层数组。//相当于.flat()[1,2,3,4].flatMap(x=>[[x*2]])//map执行完后是[[[2]],[[4]],[[6]],[[8]]]//然后在执行flat()方法得到如下结果//[[2],[4],[6],[8]]复制代码

8、数组实例的copywithin()

在当前数组内部将指定位置的成员复制到其他位置，然后返回当前数组，会改变原数组

接收三个参数：

1、target(必需) 从该位置开始替换数据

2、start(可选) 从该位置开始读取数据，默认为0，如果为负数，则表示到数

3、end(可选) 到该位置前停止读取数据，默认等于数组长度。如果是负数，表示到数

三个参数都应该是数字，如果不是，会自动转为数值

[1,2,3,4,5].copywithin(0,3);//[4,5,3,4,5]表示从下标3位置直到结束的成员(4,5)，复制到从下标0开始的位置，结果替换掉了原来的1和2

关于“es6新增的数组方法有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注恰卡编程网行业资讯频道，小编每天都会为大家更新不同的知识点。