es6學習筆記4--數組


數組的擴展

Array.from()

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

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']

Array.from方法則是還支持類似數組的對象。所謂類似數組的對象,本質特征只有一點,即必須有length屬性。因此,任何有length屬性的對象,都可以通過Array.from方法轉為數組,而此時擴展運算符就無法轉換。

Array.from({ length: 3 });
// [ undefined, undefined, undefinded ]

上面代碼中,Array.from返回了一個具有三個成員的數組,每個位置的值都是undefined。擴展運算符轉換不了這個對象。

Array.from還可以接受第二個參數,作用類似於數組的map方法,用來對每個元素進行處理,將處理后的值放入返回的數組。

Array.from(arrayLike, x => x * x);
// 等同於
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

 

Array.of()

Array.of方法用於將一組值,轉換為數組。

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

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

Array.of總是返回參數值組成的數組。如果沒有參數,就返回一個空數組。

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

 

數組實例的copyWithin()

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

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

它接受三個參數。

  • target(必需):從該位置開始替換數據。
  • start(可選):從該位置開始讀取數據,默認為0。如果為負值,表示倒數。
  • end(可選):到該位置前停止讀取數據,默認等於數組長度。如果為負值,表示倒數。

這三個參數都應該是數值,如果不是,會自動轉為數值。

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

上面代碼表示將從3號位直到數組結束的成員(4和5),復制到從0號位開始的位置,結果覆蓋了原來的1和2。

// 對於沒有部署TypedArray的copyWithin方法的平台
// 需要采用下面的寫法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

 

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

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

[1, 4, -5, 10].find((n) => n < 0)
// -5

上面代碼找出數組中第一個小於0的成員。

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

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

這兩個方法都可以接受第二個參數,用來綁定回調函數的this對象。

另外,這兩個方法都可以發現NaN,彌補了數組的IndexOf方法的不足。

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

[NaN].findIndex(y => Object.is(NaN, y))
// 0

上面代碼中,indexOf方法無法識別數組的NaN成員,但是findIndex方法可以借助Object.is方法做到。

數組實例的fill()

fill方法使用給定值,填充一個數組。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

上面代碼表明,fill方法用於空數組的初始化非常方便。數組中已有的元素,會被全部抹去。

ES6提供三個新的方法——entries()keys()values()——用於遍歷數組。它們都返回一個遍歷器對象(詳見《Iterator》一章),可以用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'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM