深入理解ES6之—增強的數組功能

創建數組

Array.of()方法

ES6為數組新增創建方法的目的之一，是幫助開發者在使用Array構造器時避開js語言的一個怪異點。Array.of()方法總會創建一個包含所有傳入參數的數組，而不管參數的數量與類型。

let arr = Array.of(1, 2);
console.log(arr.length);//2

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

let arr2 = Array.of('2');
console.log(arr2.length);//1
console.log(arr2[0]);//'2'

在使用Array.of()方法創建數組時，只需將想要包含在數組內的值作為參數傳入。

Array.from()方法

在js中將非數組對象轉換為真正的數組是非常麻煩的。在ES6中，將可迭代對象或者類數組對象作為第一個參數傳入，Array.from()就能返回一個數組。

function arga(...args) {
    let arg = Array.from(arguments);
    console.log(arg);
}

arga('cc', 26, 'man');//['cc',26,'man']

映射轉換

如果你想實行進一步的數組轉換，你可以向Array.from()方法傳遞一個映射用的函數作為第二個參數。此函數會將數組對象的每一個值轉換為目標形式，並將其存儲在目標數組的對應位置上。

function arga(...args) {
    return Array.from(arguments, value => value + 1);
}

let arr = arga('cc', 26, 'man');
console.log(arr);//['cc1',27,'man1']

如果映射函數需要在對象上工作，你可以手動傳遞第三個參數給Array.from()方法，從而指定映射函數內部的this值

let helper = {
    diff: 1,
    add(value) {
        return value + this.diff;
    }
}

function translate() {
    return Array.from(arguments, helper.add, helper);
}

let arr = translate('cc', 26, 'man');
console.log(arr);

可迭代對象上使用

Array.from()方法不僅可以用於類數組對象，也可用於迭代對象。（Set，Map）

數組上的新方法

find()與findIndex()方法

find()與findIndex()方法均接受兩個參數：一個回調函數，一個可選值用於指定回調函數內部的this。該回調函數可接受三個參數：數組的某個元素，該元素對應的索引位置，以及該數組本身。該回調函數應當在給定的元素滿足你定義的條件時返回true，而find()和findIndex()方法均會在回調函數第一次返回true時停止查找。

二者唯一的區別是：find()方法返回匹配的值，而findIndex()返回匹配位置的索引。

let arr = [1, 2, 3, 'cc', 5, 1, 9];

console.log(arr.find((value, keys, arr) => {
    return value > 2;
}))//3

console.log(arr.findIndex((value, keys, arr) => {
    return value > 2;
}))//2

fill()方法

fill()方法能使用特定值填充數組中的一個或多個元素。當只是用一個參數時，該方法會用該參數的值填充整個數組。

let arr = [1, 2, 3, 'cc', 5];
arr.fill(1);
console.log(arr);//[1,1,1,1,1];

如果不想改變數組中的所有元素，而只是想改變其中一部分，那么可以使用可選的起始位置參數與結束位置參數（不包括結束位置的那個元素）

let arr = [1, 2, 3, 'cc', 5];

arr.fill(1, 2);
console.log(arr);//[1,2,1,1,1]

arr.fill(0, 1, 3);
console.log(arr);//[1,0,0,1,1];

copyWithin()方法

copyWithin()方法與fill()類似，可以一次性修改數組的多個元素。不過，與fill()使用單個值來填充數組不同，copyWithin()方法允許你在數組內部復制自身元素。為此你需要傳遞兩個參數給copyWithin()方法：從什么位置開始填充，以及被用來復制的數據的起始位置索引。

//將數組的前兩個元素復制到數組的最后兩個位置
let arr = [1, 2, 3, 'cc', 5];

arr.copyWithin(3, 0);
console.log(arr);//[1,2,3,1,2]

默認情況下，copyWithin()方法總是會一直復制到數組末尾，不過你還可以提供一個可選參數來限制到底有多少元素會被覆蓋。這第三個參數指定了復制停止的位置（不包含該位置本身）。

let arr = [1, 2, 3, 'cc', 5, 9, 17];

//從索引3的位置開始粘貼
//從索引0的位置開始復制
//遇到索引3時停止復制
arr.copyWithin(3, 0, 3);
console.log(arr);//[1,2,3,1,2,3,17]

類型化數組

類型化數組是有特殊用途的數組，被設計用來處理數值類型數據。

數值數據類型

類型化數組允許存儲並操作八種不同的數值類型：

1. 8位有符號整數（int8）
2. 8位無符號整數（uint8）
3. 16位有符號整數（int16）
4. 16位無符號整數（uint16）
5. 32位有符號整數（int32）
6. 32位無符號整數（uint32）
7. 32位浮點數（float32）
8. 64位浮點數（float64）

所有與類型化數組相關的操作和對象都圍繞着這八種數據類型。為了使用它們，你首先需要創建一個數組緩沖區用於存儲數據。

數組緩沖區

數組緩沖區（array buffer）是內存中包含一定數量字節的區域，而所有的類型化數組都基於數組緩沖區。你可以使用下例這樣使用ArrayBuffer構造器來創建一個數組緩沖區：

let buffer = new ArrayBuffer(10);//分配了10個字節

也可以使用slice()方法來創建一個新的，包含已有緩沖區部分內容的數組緩沖區。該slice()方法 類似於數組上的同名方法，可以使用起始位置與結束位置參數，返回由原緩沖區元素組成的一個新的ArrayBuffer實例。

let buffer1 = buffer.slice(2, 5);
console.log(buffer1.byteLength);//3

僅僅創建一個緩沖區而不能寫入數據沒有什么意義。為了寫入數據，你需要創建一個視圖。

使用視圖操作數組緩沖區

數組緩沖區代表了一塊內存區域，而視圖則是你操作這塊區域的接口。視圖工作在數組緩沖區或者其子集上，可以讀寫某種數值數據類型的數據。DataView類型是數組緩沖區的通用視圖，允許你對前述所有八種數值數據類型進行操作。

使用DataView首先需要創建ArrayBuffer的一個實例，再在上面創建一個新的ArrayBuffer視圖

循環數組元素的幾種方法

在我們的開發過程中都有遇到這樣的問題：逐個取出數組中的元素。那么在js中有哪些方法可以完成這個工作呢？

for循環

可能我們最先能想到的是for循環了，這也是我們最常用的。

let arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

for-in

通過鍵值（索引）來對數組進行遍歷

let arr = [1, 2, 3, 4, 5];

for (let i in arr) {
    console.log(arr[i]);
}

forEach()

forEach()方法是數組對象的原生方法，用於對數組進行遍歷，傳入的參數是一個回調函數，該回調函數接收三個參數元素值，元素索引和數組對象

let arr = [1, 2, 3, 4, 5];

arr.forEach((value, key, arr) => console.log(`索引${key}的值是${value}`));

for-of

for-of循環在循環每次執行時會調用可迭代對象的next()方法，並將結果對象的value儲存在一個變量上。循環過程會持續到結果對象的done屬性編程true為止。

let arr = [1, 2, 3, 4, 5];

for (let num of arr) {
    console.log(num);
}