> 原创文章 > Array.prototype.from()的使用,如何将伪数组转换为数组?

Array.prototype.from()的使用,如何将伪数组转换为数组?

原创文章 admin 2020-03-17 20:49:16 180 阅读 0 评论

简介 何为伪数组? 简单地说就是长得像数组,然而并不是数组。怎么理解这句话,比如函数中的 arguments、DOM中的 NodeList等。当然,还有一些可遍历的对象,看上去都像数组却不能直接使用数组的 API,因为它们是伪数组。要想让伪数组可以使用数组的 API 就要想办法把它们转化为数组。

何为伪数组?

伪数组有两个特征:1、按索引方式存储数据 ; 2、具有 length 属性。

简单地说就是长得像数组,然而并不是数组。比如函数中的 arguments、DOM中的 NodeList等。当然,还有一些可遍历的对象,看上去都像数组却不能直接使用数组的 API。

让伪数组可以使用数组的 API,传统的做法

基本原理就是使用 call 将数组的 API 应用到伪数组上面去

相当于利用函数的上下文来间接的使用数组的API

看例子

 ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓ 

[].slice.call(arguments);

[].slice.call(document.querySelectorAll('img'));


ES6 提供了新的 API 来解决这类似的问题,Array.from

 ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓ 

Array.from(arguments);

Array.from(document.querySelectorAll('img'));



Array.from()

不单单只有将伪数组转换为数组的功能,它还具有 map 的功能。

想要初始化一个长度为8的数组,数组的每个元素为10的时候,传统的做法

let arr = Array(9).join(' ').split('').map(item=>10)

↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓ 

这么写可以,但还不够简洁,如果使用 Array.from()

Array.from({ length: 8 }, function () { return 10 })