ES6学习笔记二之数组的扩展

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, <