首頁  >  文章  >  web前端  >  es6新增數組方法有哪些

es6新增數組方法有哪些

青灯夜游
青灯夜游原創
2023-01-29 14:02:486962瀏覽

es6數組方法有:1、Array.from(),用於將類別數組物件或可遍歷物件轉為真正的數組;2、Array.of(),用於將一組值,轉為陣列;3、copyWithin(),用於在目前陣列內部,將指定位置的成員複製到其他位置;4、fill();5、find();6、findIndex();7、includes() ;8、entries();9、keys();10、values()。

es6新增數組方法有哪些

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

傳統Array 物件方法

  • toSource() 傳回該物件的原始程式碼。
  • toString() 把陣列轉換為字串,並回傳結果。
  • toLocaleString() 將陣列轉換為本機數組,並傳回結果。
  • valueOf() 傳回數組物件的原始值
##fill #filter some# every reduce,reduceRight includes##  ES6陣列方法
#修改原數組 不修改原始數組
#push,pop concat
#unshift,shift join
#sort slice
reverse indexOf(),lastIndexOf()
#splice forEach
copyWithin map
#finde, findIndex
entries(),keys(),values()


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 [&#39;a&#39;, &#39;b&#39;].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of [&#39;a&#39;, &#39;b&#39;].values()) {
  console.log(elem);
}
// &#39;a&#39;
// &#39;b&#39;

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

如果不使用for...of循環,可以手動呼叫遍歷器物件的next方法,進行遍歷。

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

【推薦學習:

javascript進階教學

以上是es6新增數組方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn