聊一聊 ES6 给 Array 带来了哪些新特性

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

在 JavaScript 早期可能我们第一个接触到集合就是数组，通过数组可以模拟出更多的数据结构，随着 ES6，ES2017 引入更多数据结构类型例如 Map、Set 或者 WeakMap 等

我们知道创建数组方式有多种多样，可以是简单的字面量创建一个数组，可以通过 new 关键字通过构造函数来创建一个数组。

const arr1 = [1,2,3]
复制代码

Array.of

当我们用 Array 构造函数创建一个数组时，如果只是传入一个数值，则这个数字作为不过创建一个以这个数字为元素的长度为 1 数组，而是创建了一个长度为 3 的空数组，这样可能会产生空槽，为了解决这个问题，ES6 引入新的创建数组的 API Array.of(...)

Array.from

多种多样的使用 Array.from 创建数组方法

我们可以基于字符串来创建一个数组，

const aString = "machinelearning";
const arr6 = [...aString];
console.log(arr6);//[ 'm', 'a', 'c', 'h', 'i', 'n', 'e', 'l', 'e', 'a', 'r', 'n', 'i', 'n', 'g' ]

复制代码

const arr7 = Array.from(aString);
console.log(arr7)//[ 'm', 'a', 'c', 'h', 'i', 'n', 'e', 'l', 'e', 'a', 'r', 'n', 'i', 'n', 'g' ]
复制代码

一套组合操作

这里可以通过 pipe 操作一个数组

var arr2 = (Array.from({length:5}).fill(1).map((v,i) =>i))
console.log(arr2)//[ 0, 1, 2, 3, 4 ]
复制代码

var arr3 = [1,1,2,3,5]
var uniquedArr3 = Array.from(new Set(arr3));
console.log(uniquedArr3)//[ 1, 2, 3, 5 ]
复制代码

将 arguments 转换为数组

function fn1(){
    console.log(Array.from(arguments))
}
复制代码

避免空槽位数组

var emptySlotsArr = [];
emptySlotsArr.length=4;
emptySlotsArr[2]='foo'
console.log(emptySlotsArr)//[ <2 empty items>, 'foo', <1 empty item> ]

const a = Array.from(emptySlotsArr);
console.log(a)//[ undefined, undefined, 'foo', undefined ]

复制代码

映射

通过字面量来创建一个空数组，然后通过属性 length 为数组设定 4 空槽位置，然后将这个空槽传入到 Array.from 就可以用 undefined 来将空槽位置填充，对于不同需要多步骤解决的空槽问题，使用 Array.from 仅一步就可以解决这个问题。

var b = Array(3)
console.log(b)//[ <3 empty items> ]
var c = Array.apply(null,{length:3})
console.log(c)//[ undefined, undefined, undefined ]
console.log(Array.from({length:3}))//[ undefined, undefined, undefined ]
复制代码

创建数组和子类型

我们已经讨论了 Array.of(..) 和 Array.from(..) 二者都以与构造器类似的方式创建一个新的数组。

class MyArray extends Array {

}

console.log(MyArray.from([1,2]) instanceof MyArray) //true
console.log(Array.from(MyArray.from([1,2])) instanceof MyArray)//false
复制代码

of(..) 和 from(..) 都使用访问构造器来构造数组，如果使用基类 Array.of(..) ，那么得到的就是 Array 实例，如果使用 MyArry.of(..) 就是 MyArry 的实例