ES6 Array.from()和Array.of()

xiaoxiao2021-04-15  63

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

类数组对象举例:实际应用中,常见的类似数组的对象是 DOM 操作返回的 NodeList 集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。 

下面先看类数组对象的转换:

<ul>

<li> go to store</li>

<li>watching tv</li>

<li>gon home</li>

</ul>

js代码如下:

const todos =document.querrySelectorAll('li');

consloe.log(todos );//todos是一个类数组对象,他的_proto_是NodeList,所以我们下面代码直接写会报错

const names=todos .map(todo=>todo.textContent);

正确的写法是先把类数组对象转换成数组对象才能调用map方法

const names=Array.from(todos) .map(todo=>todo.textContent);

Array.from还可以传入第二个参数是一个函数,相当于数组的map方法所以上面的代码可以直接写成:

const names=Array.from(todos,todo=>todo.textContent);

接下来看下argumens对象的转换

function sum(){

return argumens.reduce((prev,curr)=>pre+curr,0)

}

sum(1,2,3,4,5);

运行结果如下:

 所以还要需要把arguments转换一下

function sum(){

return Array.from( arguments).reduce((prev,curr)=>prev+curr,0)

}

可迭代对象比如字符串:

const website='varavList';

Array.from(website);'

运行结果如下:

Array.of方法主要解决数组声明不一致的问题,之前我们在声明一个数组的时候可以使用下面的方法

var arrays = new Array(10);//数组长度是10

运行结果是:

当传入多个参数的时候:

var array2 = new Array(1,2,3,4,5);//有参数组成的数组

console.log(array2);

可以看出来参数不同声明出来的数组也不同,Array.of解决了上面的问题。Array.of(1)

Array.of方法声明出来的数组都是由参数组成的数组 。

 

转载请注明原文地址: https://www.6miu.com/read-4817444.html

最新回复(0)