对象转换为数组的方法

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

[javascript] view
plain copy

let arrayLike = {  

'0': 'a',  

'1': 'b',  

'2': 'c',  

length: 3  

};  

// ES5 的写法  

var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']  

// ES6 的写法  

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']  

  

// NodeList 对象  

let ps = document.querySelectorAll('p');  

Array.from(ps).forEach(function (p) {  

console.log(p);  

});  

// arguments 对象  

function foo() {  

var args = Array.from(arguments);  

// ...  

}  

  

Array.from('hello')  

// ['h', 'e', 'l', 'l', 'o']  

let namesSet = new Set(['a', 'b'])  

Array.from(namesSet) // ['a', 'b']  

  

Array.from({ length: 3 });  

// [ undefined, undefined, undefined ]  

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

[javascript] view
plain copy

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

//  等同于  

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

Array.from([1, 2, 3], (x) => x * x)  

// [1, 4, 9]  

值得提醒的是，扩展运算符（...）也可以将某些数据结构转为数组。

[javascript] view
plain copy

// arguments 对象  

function foo() {  

var args = [...arguments];  

}  

// NodeList 对象  

[...document.querySelectorAll('div')]