es6新增的数组方法有哪些
这篇文章主要介绍“es6新增的数组方法有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“es6新增的数组方法有哪些”文章能帮助大家解决问题。
遂昌网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联公司2013年至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。
新增数组方法: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对象
传一个参数时,用于将类数组转为真正的数组
数组去重
const arr = [1,2,3,3,3,2,5]; console.log(Array.from(new Set(arr))); //[1,2,3,5] //...也可实现相同的效果 console.log([...new Set(arr)]) //[1,2,3,5]
对于没有部署该方法的浏览器,可使用Array.prototype.slice方法代替
cosnt toArray = (() => { 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
function countLength(string) { return Array.from(string).length }
2、Array.of()
Array.of 方法用于将一组值,转换为数组。弥补数组构造函数 Array()的不足。因为参数个数的不同,会导致 Array()的行为有差异
//如下代码看出差异 Array.of(3); // [3] Array.of(3, 11, 8); // [3,11,8] new Array(3); // [, , ,] new Array(3, 11, 8); // [3, 11, 8] // Array.of方法可以用下面的代码模拟实现。 function ArrayOf() { return [].slice.call(arguments); }
3、数组实例的 find() 和 findIndex()
find()
返回第一个符合条件的数组成员,它的参数是一个回调函数,所有数组成员依次执行该函数,直到找出第一个满足条件的成员,然后返回该成员,如果没有符合条件的成员,则返回undefined
该方法的回调函数接收三个参数: 当前的值 , 当前位置, 原数组
示例1
[1,12,4,0,5].find((item,index , arr) => return item < 1) // 0
示例2
// find() var item = [1, 4, -5, 10].find(n => n < 0); console.log(item); // -5 // find 也支持这种复杂的查找 var points = [ { x: 10, y: 20 }, { x: 20, y: 30 }, { x: 30, y: 40 }, { x: 40, y: 50 }, { x: 50, y: 60 } ]; points.find(function matcher(point) { return point.x % 3 == 0 && point.y % 4 == 0; }); // { x: 30, y: 40 }
findIndex()
写法用法基本与find()方法相同,只是返回第一个符合条件的数组成员的位置,如果没有则返回-1
示例1
[1,2,4,15,0].findIndex((item , index ,arr) => return item > 10) //3
示例2
var points = [ { x: 10, y: 20 }, { x: 20, y: 30 }, { x: 30, y: 40 }, { x: 40, y: 50 }, { x: 50, y: 60 } ]; points.findIndex(function matcher(point) { return point.x % 3 == 0 && point.y % 4 == 0; }); // 2 points.findIndex(function matcher(point) { return point.x % 6 == 0 && point.y % 7 == 0; }); //1
4、数组实例的 fill()
fill()方法使用给定值, 填充一个数组
fill 方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置
// fill方法使用给定值, 填充一个数组。 var fillArray = new Array(6).fill(1); console.log(fillArray); //[1, 1, 1, 1, 1, 1] //fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。 ["a", "b", "c"].fill(7, 1, 2); // ['a', 7, 'c'] // 注意,如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。 let arr = new Array(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 (let index of ["a", "b"].keys()) { console.log(index); } // 0 1 for (let elem of ["a", "b"].values()) { console.log(elem); } // a b for (let [index, elem] of ["a", "b"].entries()) { console.log(index, elem); } // 0 "a" // 1 "b" var a = [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
兼容方法:
function contains = ( () => { Array.prototype.includes ?(arr , val) => arr.includes(val) :(arr , val) => arr.some(item => return item === 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新增的数组方法有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。
本文题目:es6新增的数组方法有哪些
地址分享:http://pwwzsj.com/article/jojjip.html