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方法声明出来的数组都是由参数组成的数组 。