forEach、for...in、for...of、map區別
阿新 • • 發佈：2022-05-13
for迴圈
其實除了這三種方法以外還有一種最原始的遍歷，自Javascript誕生起就一直用的 就是for迴圈，它用來遍歷陣列
forEach
對陣列的每一個元素執行一次提供的函式（不能使用return、break等中斷迴圈），不改變原陣列，無返回值undefined。
迴圈遍歷的值都是資料結構的鍵值
for…of
它是ES6中新增加的語法，用來迴圈獲取一對鍵值對中的值
迴圈一個數組
其實除了這三種方法以外還有一種最原始的遍歷，自Javascript誕生起就一直用的 就是for迴圈，它用來遍歷陣列
var arr = [1,2,3,4] for(var i = 0 ; i< arr.length ; i++){ console.log(arr[i]) }for迴圈中可以使用return、break等來中斷迴圈
forEach
對陣列的每一個元素執行一次提供的函式（不能使用return、break等中斷迴圈），不改變原陣列，無返回值undefined。
let arr = ['a', 'b', 'c', 'd'] arr.forEach(function (val, idx, arr) { console.log(val + ', index = ' + idx) // val是當前元素，index當前元素索引，arr陣列 console.log(arr) })輸出結果：
a, index = 0
(4) ["a", "b", "c", "d"]
b, index = 1
(4) ["a", "b", "c", "d"]
c, index = 2
(4) ["a", "b", "c", "d"]
d, index = 3
(4) ["a", "b", "c", "d"]
for…in迴圈遍歷的值都是資料結構的鍵值
let obj = {a: '1', b: '2', c: '3', d: '4'} for (let o in obj) { console.log(o) //遍歷的實際上是物件的屬性名稱 a,b,c,d console.log(obj[o]) //這個才是屬性對應的值1，2，3，4 }總結一句: for in也可以迴圈陣列但是特別適合遍歷物件
for…of
它是ES6中新增加的語法，用來迴圈獲取一對鍵值對中的值
迴圈一個數組
let arr = ['China', 'America', 'Korea']
for (let o of arr) {
console.log(o) //China, America, Korea
迴圈一個普通物件（報錯）let obj = {a: '1', b: '2', c: '3', d: '4'} for (let o of obj) { console.log(o) //Uncaught TypeError: obj[Symbol.iterator] is not a function }
一個數據結構只有部署了 Symbol.iterator 屬性, 才具有 iterator介面可以使用 for of迴圈。例子中的obj物件沒有Symbol.iterator屬性 所以會報錯。
Map
迴圈一個Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3
for (let entry of iterable) {
console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]