ES6數組 - 新增的建立數組的方法

在ES6以前，建立數組的方式有2種：
一: 經過數組字面量

let array = [1,2,3];
console.log(array);//[1,2,3]

二: 經過new Array()建立數組

let array = new Array(1, 2, 3);
console.log(array); //[1,2,3]

在大多數狀況下new Array()運行良好：

let array = new Array(1, 2);
console.log(array.length); //2
console.log(array[0]); //1
console.log(array[1]); //2

array = new Array('a');
console.log(array.length); //1
console.log(array[0]);//'a'

array = new Array(1, 'a');
console.log(array.length); // 2
console.log(array[0]);//1
console.log(array[1]);//'a'

可是new Array()有一種詭異的狀況：

let array = new Array(2);
console.log(array[0]); // undefined
console.log(array[1]);// undefined
console.log(array.length);  // 2

當咱們給new Array()傳遞單個數字參數時，這個數字不是做爲數組元素，而是該數組的length屬性而存在，而數組自己則是一個空數組。
爲了解決上面這個使人類沒有安全感的特性，ES6引入了Array.of()來解決這個問題：
三：Array.of()
顧名思義，of()方法就是以它接受到的參數做爲元素來創造數組，上面咱們說的單個數字參數的狀況也一樣適用：

let array = Array.of(3);
console.log(array.length); // 1
console.log(array[0]); // 3

array = Array.of(1, 2);
console.log(array.length);// 2
console.log(array[0]); // 1
console.log(array[1]);// 2

array = Array.of('a');
console.log(array.length);// 1
console.log(array[0]);// 'a'

array = Array.of(1, 'a');
console.log(array.length); // 2
console.log(array[0]);// 1
console.log(array[1]);// 'a'

四：Array.from()
ES6還增長了一個Array.from()，也是用了建立一個數組。它主要用在以類數組對象和可迭代對象爲藍本，建立對應的數組。

1: Array.from(類數組對象)

咱們最熟悉的類數組對象，應該就是function的arguments對象了。接下來，咱們看一個用Array.from()建立包含arguments元素的數組：

function createArrayFrom() {
    console.log(arguments instanceof Array); // false
    return Array.from(arguments);
}

let array = createArrayFrom(1, 2, 3);
console.log(array instanceof Array); // true
console.log(array.length); //3
console.log(array[0]);//1
console.log(array[1]);//2
console.log(array[2]);//3
console.log(array.indexOf(2)); //1

2: Array.from(可迭代對象)

Array.from()也能夠把一個可迭代對象轉換爲數組：
let iteratorObject = {
    *[Symbol.iterator](){
        yield 1;
        yield 2;
        yield 3;
    }
};
let array = Array.from(iteratorObject);
console.log(array instanceof Array); // true
console.log(array.length); // 3
console.log(array[0]); // 1

五：Array.from()的第二個參數
前面的例子，咱們看到了一個類數組對象和可迭代對象做爲Array.from()的第一個參數，從而建立出包含它們元素的數組。Array.from()的第二個參數是一個函數，這個函數用來將類數組對象和可迭代對象的元素進行某種變換後，再做爲生出數組的元素，例如：

let iteratorObject = {
    *[Symbol.iterator](){
        yield 1;
        yield 2;
        yield 3;
    }
};
let array = Array.from(iteratorObject, (item)=>{return item + 1});
console.log(array[0]); //2
console.log(array[1]); //3
console.log(array[2]); //4

這個例子裏，咱們提供了把每一個元素值加一的變換，因此本來的1，2，3，置換到新的數組以後，元素是2，3，4。

六： Array.from()的第三個參數
Array.from()還提供第三個參數可用，第三個參數用來指定在第二個參數所表明的回調函數的this的值，看一個例子：

let firstHelper = {
    diff: 1,
    add(value){
        return value + this.diff;
    }
};
let secondHelper = {
    diff: 2
};
function createArrayFrom() {
    return Array.from(arguments, firstHelper.add, secondHelper);
}

let array = createArrayFrom(1, 2, 3);
console.log(array); //[3, 4, 5]

上面的例子裏面，咱們在回調方法add()裏面使用了this(這行代碼：value + this.diff)。add()定義在firstHelper對象，且firstHelper對象也有diff屬性；可是咱們經過給三個參數傳入secondHelper，從而使得在firstHelper.add()方法裏的this值是secondHelper。

以上就是ES6新增的Array.of()和Array.from()方法，可使得開發者用更少的代碼應對更多變的建立數組的場景。