(Array.from和 Array.of)
ES6新增了很多数组操作的方法。但是,Array.from和Array.of 并不在数组的原型对象上。或者说,并不是一个动态的方法。
所以,我们是不可以直接在数组上去调用这个方法的。
const arr = ["one", "two"];
arr.from() //报错 类数组对象 我们常常说到的类数组对象类数组对象,那么,什么是类数组对象呢?
- 吃饭
- 睡觉
- 打豆豆
- 刷牙
- 吃宵夜
image
我们可以看到这个对象的构造器并不是我们的Array,而是NodeList。那么,我们说,这种带有length属性。构造器却不是Array的对象就叫做类数组对象。
那么实际上,我们常常需要去使用数组的方法,去操作这些类数组对象。
例如,我现在需要取得上例的todo。将内容存起来。
上例运行后将会直接报错,因为类数组对象不是数组对象,并不具备我们的map方法。 那么,如何去实现调用map方法呢?
Array.from() 在ES6当中,我们可以通过使用Array.from()来将类数组对象直接转换成数组对象。
const list = document.querySelectorAll('li');
var listArr = Array.from(list);
const todos = listArr.map(val => val.innerText);
当然,这样写总感觉代码还不够美观。那么其实,Array.from有第二个参数,第二个参数就类似的是我们的map方法。
const list = document.querySelectorAll('li');
const todos = Array.from(list,val => val.innerText);
console.log(todos)
Array.of() 我们知道,在我们使用数组的构造器函数去新建一个数组的时候。
var arr = new Array(10);
传入一个参数的时候,将会生成数组的长度。
var arr = new Array(1,2,3); console.log(arr);//[1,2,3]; 将会生成一个数组。
那么ES6就为了避免这种情况发生,设计了Array.of()。来使无论传入多少个参数,都可以直接生成一个数组。
var arr = Array.of(1); console.log(arr); //[1]; var arr1 = Array.of(2,3); console.log(arr1); //[2,3];