阅读 47

Array.from()

作用

类似数组对象可遍历对象 转换为真正的数组。

1.类似数组对象

1.1 有length属性的对象

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}

Array.from(arrayLike); //['a', 'b', 'c']
复制代码

ES5也是存在可以将上面的类似数组对象转为真正的数组对象

[].slice.call(arrayLike)
复制代码

1.2 DOM操作返回的NodeList集合

let ps = document.querySelectorAll('p');
Array.from(ps).foreach(function(p){
    console.log(p);
});
复制代码

扩展运算符(...)也可以转换

[...document.querySelectorAll('div')]
复制代码

1.3 函数内部的arguments对象

function foo() {
    var args = Array.from(arguments);
}
复制代码

同样扩展运算符(...)也可以实现

function foo(){
    var args = [...arguments];
}
复制代码

总结

扩展运算符(...)不可以将有length属性的对象转换为数组。(...)可以将NodeList集合和arguments对象转换为数组。

2.可遍历对象

部署了Iterator接口的数据结构,包括新增的数据结构Set和Map。

2.1 字符串

Array.from('hello');
//['h','e','l','l','o']
复制代码

2.2 Set

let nameSet = new Set(['a', 'b']);
Array.from(nameSet);//['a', 'b']
复制代码

第二个参数

作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);

Array.from(arrayLike).map(x => x * x);
复制代码