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

標籤：執行個體   array   存在   index   fun   第一個   class   傳遞   接收   

建立數組Array.of()方法

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

let arr = Array.of(1, 2);console.log(arr.length);//2let arr1 = Array.of(3);console.log(arr1.length);//1console.log(arr1[0]);//3let arr2 = Array.of('2');console.log(arr2.length);//1console.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;}))//3console.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);}

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