es6數組方法有:1、Array.from(),用於將類別數組物件或可遍歷物件轉為真正的數組;2、Array.of(),用於將一組值,轉為陣列;3、copyWithin(),用於在目前陣列內部,將指定位置的成員複製到其他位置;4、fill();5、find();6、findIndex();7、includes() ;8、entries();9、keys();10、values()。
本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。
#修改原數組 | 不修改原始數組 |
---|---|
#push,pop | concat |
#unshift,shift | join |
#sort | slice |
reverse | indexOf(),lastIndexOf() |
#splice | forEach |
copyWithin | map |
#filter | |
some | |
every | |
reduce,reduceRight | |
includes | |
#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]
實例方法
#會改變原始數組
array. copyWithin(target, start = 0, end = this.length);target(必要):從該位置開始替換資料。若為負值,表示倒數。
// 将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]
['a', 'b', 'c'].fill(7); // [7, 7, 7] let arr = new Array(3).fill([]); arr[0].push(5); // [[5], [5], [5]]不會改變原數組
[1, 4, -5, 10].find((n) => n < 0) // -5 [1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) // 10
[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2
[1, 2, 3].includes(2) // true
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']
【推薦學習:
javascript進階教學以上是es6新增數組方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!