文章目錄

• 1. ES5 中數組遍歷方式
• 2. ES6 中數組遍歷方式 for...of
• 3. Array.from()
• 4. Array.of()
• 5. Array.prototype.fill()
• 6. Array.prototype.find()
• 7. Array.prototype.findIndex()
• 8. Array.prototype.copyWithin()

1. ES5 中數組遍歷方式

let arr = [1, 2, 3, 2, 4] // for循環 for (let i = 0; i < arr.length; i++) {console.log(arr[i]) } // forEach 不支持 break、continue 等 arr.forEach(function(elem, index, array) {if (arr[i] == 2) {continue}console.log(elem, index) }) // map 返回新的數組 let result = arr.map(function(value) {value += 1console.log(value)return value }) console.log(arr, result) // filter 返回符合條件的元素數組 let result = arr.filter(function(value) {console.log(value)return value == 2 }) console.log(arr, result) // some 返回boolean，判斷是否有元素符合條件 let result = arr.some(function(value) {console.log(value)return value == 4 }) console.log(arr, result) // every 返回boolean，判斷每個元素都符合條件 let result = arr.every(function(value) {console.log(value)return value == 2 }) console.log(arr, result) // 使用 every 遍歷就可以做到 break 那樣的效果，簡單的說 return false 等同于 break，return true 等同于 continue。如果不寫，默認是 return false。// reduce() 接收一個函數作為累加器 let sum = arr.reduce(function(prev, cur, index, array) {return prev + cur }, 0) console.log(sum)

for…in不能用于遍歷數組。
for…in代碼塊中不能有 return，不然會拋出異常。

2. ES6 中數組遍歷方式 for…of

for (let val of [1, 2, 3]) {console.log(val); } // 1,2,3

for...of后面遍歷的不僅限于array,object，而是iterable（一切可遍歷的元素）。

for (let item of arr) {console.log(item) }for (let item of arr.values()) {console.log(item) }for (let item of arr.keys()) {console.log(item) }for (let [index, item] of arr.entries()) {console.log(index, item) }

for…of是支持 break、continue、return的，所以在功能上非常貼近原生的 for。

3. Array.from()

在 JavaScript 的世界里有些對象被理解為數組，然而缺不能使用數組的原生 API，比如函數中的 arguments、DOM中的 NodeList等。當然，還有一些可遍歷的對象，看上去都像數組卻不能直接使用數組的 API，因為它們是偽數組（Array-Like）。要想對這些對象使用數組的 API 就要想辦法把它們轉化為數組，傳統的做法是這樣的：

• 語法：Array.from(arrayLike[, mapFn[, thisArg]])

let args = [].slice.call(arguments); let imgs = [].slice.call(document.querySelectorAll('img'));

在 ES6 中提供了新的 api 來解決這個問題，就是Array.from，代碼如下：

let args = Array.from(arguments); let imgs = Array.from(document.querySelectorAll('img'));

4. Array.of()

Array.of()方法創建一個具有可變數量參數的新數組實例，而不考慮參數的數量或類型。

Array.of()和 Array 構造函數之間的區別在于處理整數參數：Array.of(7) 創建一個具有單個元素 7 的數組，而 Array(7) 創建一個長度為7的空數組（注意：這是指一個有7個空位(empty)的數組，而不是由7個undefined組成的數組）。

• 語法：Array.of(element0[, element1[, …[, elementN]]])

Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3]Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3]

5. Array.prototype.fill()

用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。

• 語法：arr.fill(value[, start[, end]])

let array = [1, 2, 3, 4] // 第二個元素（索引為1）到第三個元素（索引為2）內的數填充為 0 array.fill(0, 1, 2) // [1,0,3,4]

6. Array.prototype.find()

find() 方法返回數組中滿足提供的測試函數的第一個元素的值，否則返回 undefined。

• 語法：arr.find(callback[, thisArg])

let array = [5, 12, 8, 130, 44];let found = array.find(function(element) {return element > 10; });console.log(found); // 12

7. Array.prototype.findIndex()

findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。

• 語法：arr.findIndex(callback[, thisArg])

let array = [5, 12, 8, 130, 44];let found = array.find(function(element) {return element > 10; });console.log(found);

8. Array.prototype.copyWithin()

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

• 語法：arr.copyWithin(target, start = 0, end = this.length)

let arr = [1, 2, 3, 4, 5] console.log(arr.copyWithin(1, 3)) // [1, 4, 5, 4, 5]

總結

以上是生活随笔為你收集整理的【ES6(2015)】Array数组的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。