ES6数组的扩展详解

本文实例讲述了ES6数组的扩展。分享给大家供大家参考，具体如下：

1. Array.from()

Array.from()将类数组(array-like)对象与可遍历的对象转化为数组并返回。

下面是一个类数组

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

ES5我们可能都会这样写：

var arr1=[].slice.call(arr);

ES6可以把一个类数组转化为一个真正的数组

var arr2=Array.from(arr)

实际应用中，常见的类似数组的对象是DOM操作返回NodeList集合，以及函数内部的arguments对象。array.from将他们转换成真正的数组。

// NodeList对象let ps = document.querySelectorAll('p');Array.from(ps).forEach(function (p) { console.log(p);});// arguments对象function foo() { var args = Array.from(arguments); // ...}

上面代码中，querySelectorAll方法返回的是一个类似数组的对象，只有将这个对象转为真正的数组，才能使用forEach方法。

只要是部署了Iterator接口的数据结构，Array.from都能将其转为数组。

Array.from('hello')// ['h', 'e', 'l', 'l', 'o']let namesSet = new Set(['a', 'b'])Array.from(namesSet) // ['a', 'b']

上面代码中，字符串和Set结构都具有Iterator接口，因此可以被Array.from转为真正的数组。

如果参数是一个真正的数组，Array.from会返回一个一模一样的新数组。

Array.from([1, 2, 3])// [1, 2, 3]

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

// arguments对象function foo() { var args = [...arguments];}// NodeList对象[...document.querySelectorAll('div')]

扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换。

Array.from方法则是还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。

Array.from({ length: 3 });// [ undefined, undefined, undefined ]

上面代码中，Array.from返回了一个具有三个成员的数组，每个位置的值都是undefined。扩展运算符转换不了这个对象。

对于还没有部署该方法的浏览器，可以用Array.prototype.slice方法替代。

const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj))();

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

Array.from(arrayLike, x => x * x);// 等同于Array.from(arrayLike).map(x => x * x);Array.from([1, 2, 3], (x) => x * x)// [1, 4, 9]