首页
视频
资源
登录
原
精
es6 数组的新增方法
4625
人阅读
2020/7/4 17:17
总访问:
95527
评论:
0
收藏:
0
手机
分类:
ES6
数组的扩展 + 类数组 / 伪数组 + Array.from() + Array.of() + copyWithin() + fill() + includes() 类数组 / 伪数组: 什么是类数组或者伪数组呢?? >> **指的就是不是真正意义上的数组 **如: ```javascript let div1 = document.getElementsByTagName('div') console.log(div1) // HTMLCollection [] let div2 = document.getElementsByClassName('div') console.log(div2) // HTMLCollection [] let div3 = document.querySelectorAll('.xx') console.log(div3) // NodeList [] ``` 从以上代码输出信息可知 具有数组的标识 [] 和 length 但是想这些数组中使用 push() 方法就会报错 从这步可以检测出 这些数组不是真正意义上的数组 不具有数组的方法 但是具有数组的 length 属性 故称之为 **伪数组 / 类数组** 检测数组的方法: ````javascript console.log(div2 instanceof Array) // true 是数组 false 就不是数组 ```` **问题: 如何将伪数组转换为真正意义上的数组呢??** ```javascript // ES5 做法 let arr = Arrray.prototype.slice.call(div3) console.log(arr) // [] arr.push(123) console.log(arr) [123] ``` 函数参数的 argument 参数也是一个伪数组 ES6 中有没有直接转化为数组的方法 Array.from() ```javascript let arrayLike = { 0: 'es6', 1: 'es7', 2: 'es8', length: 3 } let arr = Array.from(arrayLike) arr.push('es9') console.log(arr) // ['es6', 'es7', 'es8', 'es9'] ``` 使用数组的构造函数的一些问题 ```javascript let arr = new Array(1, 2) // 当参数为两个以上时 这里的参数就是 数组的每项值 console.log(arr) // [1, 2] ``` ```javascript let arr = new Array(3) // 当参数为 1 个时 代表初始化的数组的长度 console.log(arr.length) // 3 ``` **如何优雅的处理以上的问题呢? Array.of() 方法即可解决** ```javascript let arr = Array.of(3) console.log(arr) // [3] let arr = Array.of(3, 5, 7) console.log(arr) // [3, 5, 7] ``` Array.of() 就是为了处理数组构造器存在的一些问题而设定 使用这个方法即使值传入一个参数 也会是数组的项值 而不是数组的长度值 用法: ```javascript let arr = Array.of(1, 'name', true, [1, 'xiaojian', false, {age: 12}], {age: 23}) console.log(arr) ``` 通过以上的输出结论可知: 我们可以将各种各样的数据通过 Array.of 方式拼成一个数组 **数组值替换: Array.copyWithin()** ```javascript let arr = [1, 2, 3, 4, 5] console.log(arr.copyWithin(arr)) // [1, 4, 5, 4, 5] ``` copyWithin() 支持3个参数: target: 复制到指定目标索引位置 start: 元素复制的起始位置 end: 停止复制的索引位置(默认为 *array*.length) 如果为负值,表示倒数 **数组填充: Array.fill()** ```javascript let arr = [1, 2, 3, 4, 5] arr.fill('xiaojian', 1, 3) console.log(arr) // [1, 'xiaojian', 'xiaojian', 4, 5 ] // 如果只传入一个参数 arr.fill(0) console.log(arr) // 0,0,0,0,0 ``` fill() 支持3个参数: value: 填充的值 [必传] start: 开始填充位置 [可选] end: 停止填充位置 [可选] 默认是数组的长度 **是否包含: includes()** 在 es5 之前为了检测某一个项是不是在数组中存在 通常通过 indexOf() 方法配合 indexOf() 方法可以获得数组元素在数组中的索引 如果存在就会返回索引值 不存在就会返回 -1 然而有以下情况: ```javascript let arr = [1, 2, 3, NaN] console.log(arr.indexOf(NaN)) // -1 console.log(NaN == NaN) // false 在js 中 NaN 是不等于 NaN 的 所以在数组中通过 indexOf() 方法得到的就是 -1 ``` 以上情况可以通过 includes() 方法即可处理 ```javascript let arr = [1, 2, 3, NaN] arr.includes(NaN) // true ```
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
叼着奶瓶逛酒吧
大概你身上总有我喜欢的味道,所以我一见你就开心的笑
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
祈祷永无bug
8篇
初吻给了奶嘴
1篇
Vue课程笔记
3篇
ES6
5篇
TypeScript
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术