【ES6基礎】Array數組的新方法（上）

在平常工做中咱們常常會與數組打交道，所以須要熟練掌握數組操做的相關方法，ES6中關於數組的操做，又給咱們帶來了哪些驚喜呢，Array數組操做又添加了哪些新方法？

本篇文章將從如下幾個方面進行介紹：

• Array.from()
• Array.of()
• fill()
• includes()
• find()&findIndex()
• copyWithin()
• entries(), keys()&values()

本篇文章預計10分鐘

Array.from()

Array.from()方法實現了把可迭代的對象（好比：Set，Map，Array）或類數組對象（一個擁有length屬性且其它屬性鍵值爲數字的對象）轉換成數組的功能。Array.from()語法定義以下：

Array.from(arrayLike[, mapFn[, thisArg]])複製代碼

三個參數對應的含義以下：

• arrayLike：類數組或可迭代的對象
• mapFn:可選參數，回調函數實現元素迭代的功能（相似Map函數）
• thisArg：可選參數，map函數中this屬性指向這個對象。

接下來咱們來看幾個例子：

Map轉換

其函數功能就是將Map對象轉換成一個一位數組，相似[key1,value1,key2,value2,key3,value3.....],以下段代碼所示

const map1 = new Map();
map1.set('k1', '前');
map1.set('k2', '端');
map1.set('k3', '達');
map1.set('k4', '人');
console.log('%s', Array.from(map1))
//outputs
//k1,前,k2,端,k3,達,k4,人複製代碼

Set轉換

其函數功能將Set對象轉換成一個一位數組，以下段代碼所示：

const set1 = new Set();
set1.add(1).add(2).add(3);
console.log('%s', Array.from(set1));
//outputs
//1,2,3複製代碼

字符串轉換

其函數功能能夠將一個字符串或unicode字符串轉換成一個字符數組，以下段代碼所示：

console.log('%s', Array.from('hello world'));
console.log('%s', Array.from('\u524d\u7aef\u8fbe\u4eba'));
//outputs
//h,e,l,l,o, ,w,o,r,l,d
//前,端,達,人複製代碼

類數組對象轉換

一個類數組對象必須有length屬性，且它的屬性名必須是數值或者能夠轉換成數值的字符。 注意：屬性名錶明瞭數組的索引號，若是沒有這個索引號，轉出來的數組中對應的元素就爲空。

以下代碼所示：

console.log('%s', Array.from({
  0: '0',
  1: '1',
  3: '3',
  length:4
}));
//outputs
//0,1,,3複製代碼

若是不帶length屬性，數組對象爲空，以下段代碼所示，沒有任何輸出：

console.log('%s', Array.from({
    0: 0,
    1: 1
}))複製代碼

對象的屬性名不能轉換成索引號時，以下段代碼所示，沒有任何輸出：

console.log('%s', Array.from({
  a: '1',
  b: '2',
  length:2
}));複製代碼

mapFn函數轉換

接下咱們來看下如何使用map函數的使用，咱們建立了一個接收可變參數的函數（arguments類數組對象），並返回一個針對參數處理過的數組，以下段代碼所示：

function double(arr) {
    return Array.from(arguments, function(elem) {
        return elem * 2;
    });
}
const result = double(1, 2, 3, 4);
console.log(result);
//outputs
//[ 2, 4, 6, 8 ]複製代碼

第三個參數對象，mapFn函數的this指向

該參數是很是有用的，咱們精彩會將被處理的數據和處理對象進行分離，將各類不一樣的處理數據的方法封裝到不一樣的的對象中去，處理方法採用相同的名字。

在調用Array.from對數據對象進行轉換時，能夠將不一樣的處理對象按實際狀況進行注入，以獲得不一樣的結果，適合解耦。這種作法是模板設計模式的應用，有點相似於依賴注入。以下段代碼所示：

let diObj = {
    handle: function(n){
        return n + 2
    }
}

console.log('%s', Array.from(
    [1, 2, 3, 4, 5], 
    function (x){
        return this.handle(x)
    }, 
    diObj))複製代碼

處理Dom對象的應用

在實際開發過程當中，咱們常常會處理Dom對象，針對對象進行循環迭代處理，以下段所示：

const arr = document.querySelectorAll('div');
/* arr.forEach( item => console.log(item.tagName) ) */ // => wrong
Array.from(arr).forEach( item => console.log(item.tagName) ); 
// correct」複製代碼

有上述代碼咱們看出，arr.forEach沒法運行，是由於DOM對象是類數組對象，並不是真實數組，咱們須要使用Array.from()方法進行數組轉換。

Array.of()

在ES6以前，咱們使用 Array(...)方法聲明一個數組，此方法接收一個參數，即此參數表明數組的長度而不是一個包含此數字的數組，聲明後會構建一個此長度的空數組，有時候會產生難以發現的錯誤。所以ES6推出了Array.of()用於解決此問題，成爲數組的推薦函數構造器。以下段代碼代碼所示：

let arr1 = Array(2);
let arr2 = Array.of(1,2,3);
console.log(arr1.length);
console.log(arr1);
console.log(arr2.length)
console.log(arr2);複製代碼

上述代碼將會輸出：

2
[ <2 empty items> ] 3 [ 1, 2, 3 ]複製代碼

因而可知使用 Array.of() 更能體現構建數組的意圖，更清晰直白。

fill()

fill()函數用來將數值填充到指定的數組中，咱們能夠定義被填充數組的開始位置和結束位置，其使用語法定義以下：

Array.prototype.fill(value[, start[, end]])複製代碼

• value：要填充的數值，必填
• start：填充的開始位置，選填
• end：填充的結束位置，不包含此項，選填

注：若是隻有value參數，即數組中全部的內容爲此項；若是沒有end參數，則其默認值爲數組的長度；若是start或end爲負數，其對應的值爲當前數值+數組的長度

爲了更好理解此函數，咱們先來一段代碼，以下所示：

let arr1 = [1, 2, 3, 4];
let arr2 = [1, 2, 3, 4];
let arr3 = [1, 2, 3, 4];
let arr4 = [1, 2, 3, 4];
let arr5 = [1, 2, 3, 4];
arr1.fill(5);
arr2.fill(5, 1, 2);
arr3.fill(5, 1, 3);
arr4.fill(5, -3, 2);
arr5.fill(5, 0, -2);
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(arr5);複製代碼

上述代碼將會輸出：

[ 5, 5, 5, 5 ]
[ 1, 5, 3, 4 ]
[ 1, 5, 5, 4 ]
[ 1, 5, 3, 4 ]
[ 5, 5, 3, 4 ]複製代碼

includes()

includes()方法用來判斷數組中是否含有某元素，若是存在返回true,不存在返回false，以下段代碼所示：

const arr = [0, 1, 1, 2, 3, 5, 8, 13];
arr.includes(0); // true
arr.includes(13); // true
arr.includes(21); // false複製代碼

與indexOf()方法的區別

indexof()方法用來判斷數組中是否含有某元素，可是返回結果是此元素在數組的索引位置，若是不存在則返回-1，以下段代碼所示：

const arr = ['apple', 'mango', 'banana'];
console.log(arr.indexOf('前端達人')); 
// -1
console.log(arr.indexOf('apple')); 
// 0
console.log(arr.indexOf('mango')); 
// 1
console.log(arr.indexOf('apple') >= 0); 
// true 
console.log(arr.includes('apple')); 
// true 
console.log(arr.indexOf('pineapple') >= 0); 
// false 
console.log(arr.includes('pineapple')); 
// false複製代碼

若是你還要問還有什麼區別，還有一個不太經常使用的關於NaN的判斷，示例代碼以下：

const arr = ['Some elements I like', NaN, 1337, true, false, 0017];
console.log(arr.includes(NaN)); 
// true
console.log(arr.indexOf(NaN) >= 0); 
// false複製代碼

由於index.of()的使用嚴格匹配(===)進行判斷，咱們可使用console.log(NaN===NaN)進行確認，運行結果爲false。

find()&findIndex()

find()

find()函數用來在數組中查找目標元素，找到就返回該元素（找到一個便可，再也不尋找其它），找不到返回undefined。其語法定義以下：

arr.find(callback[, thisArg]);複製代碼

• callback：回調的函數
• thisArg：執行回調函數時的this指向，可選

在callback回調函數上一共有三個參數：

• 每一次迭代查找的數組元素
• 每一次迭代查找的數組元素索引
• 被查找的數組

爲了更好的理解這個函數，咱們來看以下代碼，示例以下：

const arr = [1, 2, 3, 4];
const result = arr.find(function(elem) { return elem > 2; });
console.log(result);
//ourputs
//3複製代碼

上述輸出結果只返還了一項，其實知足條件的有兩項，可是find函數的功能，只要找到一項內容就返回。

findIndex()

findIndex()和find()相似，差異就是返回該元素在數組中對應的索引，只返回最早知足條件的元素的索引。以下段代碼所示：

const arr = [1, 3, 4, 5];
const result = arr.findIndex(function(elem) {return elem > 3;});
console.log(result);
//outputs
//2複製代碼

數組中知足大於3的元素有4，5兩項，因爲此函數只返還最早知足大於3的元素的索引，元素4的索引爲2，所以返回2。

copyWithin()

copyWithin()方法淺複製數組的一部分到同一數組中的另外一個位置，覆蓋這個位置全部原來的值，並返回它，不會改變原數組的長度。其語法定義以下：

arr.copyWithin(target[, start[, end]])複製代碼

• target：在當前數組，定義要從什麼位置開始複製的索引。若是數值大於等於數組長度，數組不會進行拷貝，保持原樣。
• start： 在當前數組，選取要複製的數組內容的起始索引，若是爲負值，對應的值則爲當前值+數組的長度
• end：在當前數組，選取要複製的數組內容的結束索引，不包含此項內容。若是爲負值，對應的值則爲當前值+數組的長度，此參數可選。若是沒提供，其值默認爲數組的長度

注：索引從0開始

爲了更好的理解此方法，筆者用下圖進行示意：

接下來爲了理解這些參數，咱們來看一段代碼，示例代碼以下：

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [1, 2, 3, 4, 5];
const arr3 = [1, 2, 3, 4, 5];
const arr4 = [1, 2, 3, 4, 5];
arr1.copyWithin(1, 2, 4);
arr2.copyWithin(0, 1);
arr3.copyWithin(1, -2);
arr4.copyWithin(1, -2, -1);
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);複製代碼

上述代碼的輸出結果：

[1,3,4,4,5]
[2,3,4,5,5]
[1,4,5,4,5]
[1,4,3,4,5]複製代碼

entries(), keys()&values()

entries()方法返回一個Array Iterator對象，該對象包含數組中每一個索引的鍵/值對，相似[key1,value1,key2,value2,key3,value3.....] keys()方法返回一個包含數組中每一個索引鍵的Array Iterator對象。 values()方法返回一個新的 Array Iterator 對象，該對象包含數組每一個索引的值。 注意：使用這些方法返回的是可迭代的Array Iterator對象而不是數組。

const arr = ['a', 'b', 'c'];
const entries = arr.entries();
const keys = arr.keys();
const values = arr.values();
console.log(...entries);
console.log(...keys);
console.log(...values);複製代碼

上述代碼輸出結果：

0,a 1,b 2,c
0 1 2
a b c複製代碼

小節

因爲內容篇幅有限，今天的文章就介紹到這裏，下篇文章筆者將繼續介紹Array數組迭代的新方法——map()，filter()，forEach()，some()，reduce()等，敬請期待。

更多精彩內容，請微信關注「前端達人」公衆號