重學ES6 數組擴展（2）

方法

Array.from()

Array.from(),將兩類對象轉成真正的數組：相似數組的對象和可遍歷的對象（包括Map和Set結構）

let arrayLike = {
    '0':'a',
    '1':'b',
    '2':'c',
    length:3
}
//es5寫法
var arr1 = [].slice.call(arrayLike); //['a','b','c']
//es6
let arr2 = Array.from(arrayLike); //['a','b','c']
複製代碼

常見的相似數組的對象是DOM操做返回的NodeList集合，以及函數內部的arguments對象，均可以將他們轉化成爲真正的數組。

只要部署了Iterator接口的數據結構，Array.from都能將其轉化爲數組。

擴展運算符 ... 也能夠將某些數據結構轉化爲數組。

擴展元算符背後調用的是遍歷接口（symbol.iterator），若是一個對象沒有部署該接口，就沒法轉換。Array.from方法還支持相似數組的對象。類數組對象，本質只有一點，必須有 length 屬性，所以，任何有length屬性的對象，均可以經過Array.from方法轉爲數組，可是擴展運算符沒法轉換。

Array.from({ length:3 });
// [ undefined, undefined, undefined]
複製代碼

兼容寫法

const toArray = (()=>{
    Array.from ? Array.from : obj => [].slice.call( obj )
})();
複製代碼

Array.from還能夠接受第二個參數，做用相似於數組的map方法。用於對每一個元素進行處理，將處理後的值放到返回的數組裏。

Array.from(arrayLike, x => x * x);
//等同
Array.from(arrayLike).map(x => x * x)
複製代碼

取DOM節點文本內容

let spans = document.querySelectorAll('span.name');
// map
let names1 = Array.prototype.map.call(spans, s => s.textContent);
//Array.from()
let names2 = Array.from(spans, s => s.textContent);
複製代碼

將數組中值爲 false 的轉化爲0

Array.from([1,,2,,3], (n) => n|| 0);
//[1,0,2,0,3]
複製代碼

將字符串轉化爲數組

function countSymbols(string){
    return Array.from(string).length;
}
countSymbols("aaa") //3
複製代碼

Array.of()

用於將一組值轉化爲數組

Array.of(3,11,8); //[3,11,8]
Array.of(4); //[4]
複製代碼

這個方法是爲了彌補數組構建函數Array()的不足。由於參數個數不一樣，致使Array行爲有差別。

Array() //[]
Array(3)//[,,,]
Array(3,11,8) //[3,11,8]
複製代碼

Array.of()基本能夠代替Array 或者 new Array,並不存在由於參數不一樣致使的函數重載。

Array.of() //[]
Array.of(undefined) //[undefined]
Array.of(1) //[1]
Array.of(1,2) //[1,2]
複製代碼

Array.of 老是返回參數值組成的數組。若是沒有參數，返回一個空數組。

Array.of 模擬實現

function ArrayOf(){
    return [].slice.call(arguments)
}
複製代碼

數組實例的 copyWithin()

數組實例copyWithin方法，會在當前數組內部將指定位置成員複製到其餘位置（會覆蓋原有成員），而後返回當前數組，方法會修改當前數組。

Array.prototype.coptWithin(target, start=0, end=this.length)

target(必選):從該位置開始替換數據

start(可選)：從該位置開始讀取數據，默認爲0，若是爲負值，表示倒數。

end（可選）：到該位置中止讀取數據，默認等於數組長度。若是爲負值，表示倒數。

這3個參數都應該是數值，若是不是，會自動轉成數值。

find()和 findIndex()

數組實例的find，用於找到第一個符合條件的數組成員。參數是一個回調函數，全部數組成員依次執行該回調函數，直到找到第一個返回值爲true的成員，而後返回該成員，若是沒有，則返回 undefined。

[1,4,-5,3].find((n) => n < 0)
// -5
[1,5,10,15].find(function(value,index,arr){ // 當前值，當前值位置，原數組
    return value > 9;
})
//10
複製代碼

數組實例的findIndex用法與find很是類似，返回第一個符合條件的成員位置，若是都不符合，返回 -1

[1,5,10,15].findIndex(function(value,index,arr){
    return value > 9;
})
//2
複製代碼

fill()

['a','b','c'].fill(7)
// [7,7,7]
new Array(3).fill(7)
// [7,7,7]
複製代碼

fill還能夠接受第二個，第三個參數，指定起始位置和結束位置

['a','b','c'].fill(7,1,2);
// ['a',7,'b']
複製代碼

entires()、 keys()、 values()

以上三個方法，都返回一個遍歷器對象，可用for...of循環遍歷，惟一的區別，keys 是對鍵名的遍歷，values 是對鍵值的遍歷，entires 是對鍵值對的遍歷。

for(let index of ['a','b'].keys()){
    console.log(index)
}
// 0
// 1
複製代碼

for(let index of ['a','b'].values()){
    console.log(index)
}
// 'a'
// 'b'
複製代碼

for(let index of ['a','b'].entires()){
    console.log(index,elem)
}
// 0 'a'
// 1 'b'
複製代碼

還能夠手動調用遍歷器對象的 next 方法進行遍歷

let letter = ['a','b','c'];
let entires = letter.entires();
console.log(entires.next().value); // [0,'a']
console.log(entires.next().value); // [1,'b']
console.log(entires.next().value); // [2,'c']
複製代碼

includes()

返回一個布爾值，表示某個數組是否包含給定的值，與字符串的includes相似。

[1,2,3].includes(2) //true
[1,2,3].includes(4) //false
[1,2,NaN].includes(NaN) //true
複製代碼

該方法的第二個參數表示搜索的起始位置，默認爲0.若是第二個參數爲負數，表示倒數的位置，若是大於數組長度，將重置爲0.

[1,2,3].includes(3,3); //false
[1,2,3].includes(3,-1); //true
複製代碼

indexOf方法有兩個缺點

• 不夠語義化，含義是：找到參數值第一個出現的位置，因此，比較是否不等於 -1 ，不夠直觀。
• 內部使用 === 進行判斷，會致使誤判。

[NaN].indexOf(NaN) //-1

[NaN].includes(NaN) // true
複製代碼

下面代碼用來檢查當前環境是否支持該方法，若是不支持，採用一個簡易的代替版本。

const contains = (()=>
    Array.prototype.includes
        ?(arr,value) => arr.includes(value)
        :(arr,value) => arr.some(el => el === value)
)();
contains(['foo','bar'],'baz'); // false
複製代碼

Map結構的has用來查找鍵名。

Set結構has用來查找值。

數組的空位

Array(3) //[, , ,]
複製代碼

注意，空位不是 undefined，一個位置的值等於 undefeated，依然是有值的。空位是沒有任何值的，in 運算符能夠說明這一點。

0 in [undefined,undefined,undefined] //true
0 in [, , ,] // false複製代碼