es6中新增的數組方法怎么使用

本文小編為大家詳細介紹“es6中新增的數組方法怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“es6中新增的數組方法怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

es6數組方法有：1、Array.from()，用于將類數組對象或可遍歷對象轉為真正的數組；2、Array.of()，用于將一組值，轉為數組；3、copyWithin()，用于在當前數組內部，將指定位置的成員復制到其他位置；4、fill()；5、find()；6、findIndex()；7、includes()；8、entries()；9、keys()；10、values()。

傳統Array 對象方法

• toSource() 返回該對象的源代碼。

• toString() 把數組轉換為字符串，并返回結果。

• toLocaleString() 把數組轉換為本地數組，并返回結果。

• valueOf() 返回數組對象的原始值

ES6數組方法

Array方法

Array.from()

用于將兩類對象轉為真正的數組：類似數組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

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(3, 11, 8) // [3,11,8]
Array.of(3) // [3]

實例方法

會改變原數組

• copyWithin()

在當前數組內部，將指定位置的成員復制到其他位置（會覆蓋原有成員），然后返回當前數組。

array. copyWithin(target, start = 0, end = this.length);

• target（必需）：從該位置開始替換數據。如果為負值，表示倒數。

• start（可選）：從該位置開始讀取數據，默認為 0。如果為負值，表示倒數。

• end（可選）：到該位置前停止讀取數據，默認等于數組長度。如果為負值，表示倒數。

// 將3號位復制到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相當于3號位，-1相當于4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

• fill()

使用給定值，填充一個數組。

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

let arr = new Array(3).fill([]);
arr[0].push(5);       // [[5], [5], [5]]

不會改變原數組

• find()

用于找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。
find方法的回調函數可以接受三個參數，依次為當前的值、當前的位置和原數組。

[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

• findIndex()

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

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

• includes()

返回一個布爾值，表示某個數組是否包含給定的值。

[1, 2, 3].includes(2) // true

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

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

如果不使用for...of循環，可以手動調用遍歷器對象的next方法，進行遍歷。

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

讀到這里，這篇“es6中新增的數組方法怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。