Array.from()
Array.from() 方法从类似数组(array-like)或可迭代对象(iterable)创建一个新的数组实例(包括ES6新增的数据结构Set和Map)。
Array.from(arrayLike[, mapFn[, thisArg]])
如下是一个类数组的对象,Array.from将它转换为一个真正的数组。
// [].slice.call(arrayLike); es5
let arrayLike = {
'0': 'a',
'1': 'b',
'8': 'c',
length: 5
}
var arr1 = Array.from(arrayLike);
console.log(arr1);
结果是一个5个元素的数组,其中第一个元素是a,第二个元素是b,第三第四第五个元素是undefined。length制定数组的长度,没有这个属性数组长度为0,超过数组索引的值无效,如上述的8。
实际应用中,常见的类似数组的对象是DOM操作返回的NodeList集合,以及函数内部的arguments对象。Array.from都可以将他们转换为真正的数组。
// NodeList对象
let ps = document.querySelectAll('p');
Array.from(ps).forEach(function(p) {
console.log(p);
})
// arguments对象
(function(){
]
var args = Array.from(arguments);
console.log(args);
})(1,2,3)
事实上,只要是部署了Iterator接口的数据结构,Array.from都能将其转换为数组。比如字符串、Set、Map,以及自定义的Iterator。
对于还没有部署该方法的浏览器,可以用Array.prototype.slice方法替代。
const toArray = (() => Array.from ? Array.from : [].slice.call(obj))();
Array.from() 方法有一个可选参数 mapFn,让你可以在最后生成的数组上再执行一次 map 方法后再返回。也就是说 Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg), 除非创建的不是可用的中间数组。
Array.from([1, 2, 3], x => x * x); // [1, 4, 9]
Array.from([1, <