1. 程式人生 > 實用技巧 >for for in for of forEach的區別

for for in for of forEach的區別

for迴圈

其實除了這三種方法以外還有一種最原始的遍歷,自Javascript誕生起就一直用的 就是for迴圈,它用來遍歷陣列for迴圈中可以使用return、break等來中斷迴圈

var arr = [1,2,3,4]
for(var i = 0 ; i< arr.length ; i++){
	console.log(arr[i])
}

  

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

迴圈遍歷的值都是資料結構的鍵值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…of

它是ES6中新增加的語法,用來迴圈獲取一對鍵值對中的值

迴圈一個數組
let arr = ['China', 'America', 'Korea']
for (let o of arr) {
    console.log(o) //China, America, Korea
}

  

迴圈一個普通物件(報錯)

一個數據結構只有部署了 Symbol.iterator 屬性, 才具有 iterator介面可以使用 for of迴圈。例子中的obj物件沒有Symbol.iterator屬性 所以會報錯。

哪些資料結構部署了 Symbol.iteratoer屬性了呢?

陣列 Array
Map
Set
String
arguments物件
Nodelist物件, 就是獲取的dom列表集合

如果想讓物件可以使用 for of迴圈怎麼辦?使用 Object.keys() 獲取物件的 key值集合後,再使用 for of

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.keys(obj)) {
    console.log(o) // a,b,c,d
}