首页 > Windows开发 > 详细

ES6深入浅出-11 ES6新增的API(上)-2.Array新增API

时间:2019-11-14 00:42:12      阅读:141      评论:0      收藏:0      [点我收藏+]

Array.form

把不是数组的东西编程数组。最常见的就是把伪数组变成数组

那么什么是伪数组
这就是伪数组,因为它不是继承自Array的原型的对象。它只是一个看起来很像数组的数组
技术分享图片

只看下面的代码。a看起来很像数组,但是它又不是一个数组 生成的。所以她就是一个伪数组
技术分享图片
伪数组就是拥有数组的下标和length。但是没有数据的任何api

例如我要在数组内添加一个新的内容 就会报错。
技术分享图片

es5的方法,把伪数组变成数组

为什么要用Array.prototype.slice.call呢 ,因为js放了给出方法方便的把伪数组转换成数组。所以只能用这个。
技术分享图片
slice相当于下面的代码。创建一个真正的数组,循环伪数组,复制伪数组的每一项到真数组内。然后返回这个真数组。
技术分享图片

es6用Array.from

技术分享图片

api

把字符串变成数组,把Set变成数组。
技术分享图片

技术分享图片

选中的是一个伪数组。像数组的都有length
技术分享图片
相当于前面没有定义 0到4这5项,直接给了个length
技术分享图片

从一个没有任何下标的伪数组里,搞出一个长度为5的数组

技术分享图片


技术分享图片

创建一个长度为n的数组,这是一个经典的面试题。如果不用Array.form应该怎么做。

使用new Array(5)这种方式,数组有bug。它没有任何的下标。
new Array(5)得到的是没有下标的数组。没有下标你就没法去map
技术分享图片
用map循环每一项并加1返回,但是结果还是一个空的,相当于是没有做任何的操作。Map不会遍历不存在的下标。
技术分享图片
如果用Array.form的形式
技术分享图片

技术分享图片
es5的方式创建有下标的长度为5的数组。
技术分享图片



api内数组去重的方法
技术分享图片

请创建长度为n,但是每一项都是指定项的数组

用一个函数创建6个6
技术分享图片

ES6的方式
技术分享图片

ES5的方式
技术分享图片

首先是创建一个有7个位置的数组,7个中间有6个空隙 所以会得到 6个6 
技术分享图片
原理就是用空隙的东西来做。有点取巧
技术分享图片

ES6简写的方式,一句话
技术分享图片

Array.of

把你写的参数变成数组
技术分享图片
得到了由你传的参数组成的数组
技术分享图片
那么我为什么不直接这么写呢???
技术分享图片

无聊的API

Array.prototype.Fill


prototype是原型,所以可以直接在数组的对象上使用fill方法
技术分享图片

把传的值全部填充到数组。
技术分享图片
所以上面的面试题,可以直接用fill填充就可以了。
技术分享图片
从第一个开始填充3一直到数组的末尾,也就是从1开始把1改成了3,后面所有的都改成3
技术分享图片

find

find必须接受一个函数。
技术分享图片

查找某一项name等于a2的
技术分享图片

技术分享图片
也可以for循环来查找
技术分享图片
find只找到一个,filter找到两个
技术分享图片

findIndex

找对象的索引

技术分享图片

copyWithin


技术分享图片
在0的位置上放3和4之间的东西。就是把 1换成了4
技术分享图片

把0的位置的换成,2个位置的值,从2开始到3结束。也就是把0的位置的a换成了c
技术分享图片

技术分享图片

entries


技术分享图片

技术分享图片

技术分享图片

技术分享图片

keys

也是得到的一个key的可迭代对象。
技术分享图片‘’

values

技术分享图片

技术分享图片

结束




 

ES6深入浅出-11 ES6新增的API(上)-2.Array新增API

原文:https://www.cnblogs.com/wangjunwei/p/11854388.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!