1. 程式人生 > >ES入門——數組的擴展

ES入門——數組的擴展

defined 遍歷數組 一是 undefined str 區別 之前 嚴格 true

1、Array.from()

該方法用於將兩類對象轉為真正的數組:類似數組的對象(array-like object)和可遍歷(iterable)的對象,包括ES6新增的數據結構Set和Map。下面是一個類似數組的對象,Array.from將它轉為真正的數組。

let arrayLike = {
    "0":"a",
    "1":"b",
    "2":"c",
    length:3
};
//ES5的寫法
var arr1 = [].slice.call(arrayLike);
console.log(arr1); //["a","b","c"]
//ES6的寫法
let arr2 = Array.from(arrayLike);
console.log(arr2); 
//["a","b","c"]

2、Array.of()

該方法用於將一組值,轉換為數組。這個方法的主要目的是彌補數組構造函數Array()的不足。因為參數個數不同,會導致Array()的行為有差異。

console.log(Array.of(3,11,8)); //[3,11,8]
console.log(Array.of(3)); //[3]
console.log(Array.of(3).length); //1
            
console.log(Array()); //[]
console.log(Array(3)); //[]
console.log(Array(3,11,8)); //
[3,11,8]

Array.of基本上可以用來替代Array()或new Array(),並且不存在由於參數不同而導致的重載,它的行為非常統一。

3、數組實例的copyWithin()

數組實例的copyWithin方法,在當前數組內部,將指定位置的成員復制到其他位置(會覆蓋原有成員),然後返回當前數組,也就是說使用這個方法,會修改當前數組。

4、數組實例的find()和findIndex()

數組實例的find方法,用於找出第一個符合條件的數組成員,它的參數是一個回調函數,所有數組成員依次執行該回調函數,直到找出第一個返回值為true的成員,然後返回該成員,如果沒有符合條件的成員,則返回undefined。

數組實例的findIndex方法的用法與find方法非常類似,返回第一個符合條件的數組成員的位置,唯一差別就是如果所有成員都不符合條件,則返回-1,而不是undefined。

5、數組實例的fill()

fill方法使用給定值,填充一個數組。用於空數組的初始化非常方便,數組中已有的元素,會被全部抹去。fill方法還可以接受第二個和第三個參數,用於指定填充的起始位置和結束位置。

6、數組實例的entries(),keys()和values()

ES6提供三個新的方法,entries(),keys()和values()用於遍歷數組。它們都返回一個遍歷器對象,可以用for...of循環進行遍歷,唯一區別就是keys()是對鍵名的遍歷、values是對鍵值的遍歷,entries()是對鍵值對的遍歷

for(let index of [‘a‘,‘b‘].keys()){
    console.log(index); //0 1
}
            
for(let elem of [‘a‘,‘b‘].values()){
    console.log(elem); //‘a‘ ‘b‘(不過經測試,在Chrome瀏覽器下報錯)
}
            
for(let [inde,ele] of [‘a‘,‘b‘].entries()){
    console.log(inde,ele); //0 "a" 1 "b"
}

7、數組實例的includes()

該方法返回一個布爾值,表示某個數組是否包含給定的值,與字符串的includes方法類似,該方法屬於ES7,但是Babel轉碼器已經支持。沒有該方法之前,我們通常使用數組的indexOf方法,檢查是否包含某個值,indexOf方法有兩個缺點,一是不夠語義化,它的含義是找到參數值的第一個出現的位置,所以要去比較是否不等於-1,表達起來不夠直觀。二是它內部使用嚴格相當運算符(===)進行判斷,這會導致對NaN的誤判。

ES入門——數組的擴展