JS--周遊方法--for...in和for...of的差別

​

簡介

說明

        本文介紹JavaScript使用for...in和使用for...of周遊的差別。

官網網址

​​for...in - JavaScript | MDN​​

​​for...of - JavaScript | MDN​​

差別

項	for in	for of
作用	周遊所有可枚舉的(enumerable)屬性。 （包括數字屬性）	周遊所有value
推薦用法	周遊對象屬性	周遊數組
周遊項	key	value
缺點	周遊類數組：類數組很像數組，它們也有 length 和索引屬性，但也可能有其它的非數字的屬性和方法，這通常是我們不需要的。for..in 循環會把它們都列出來。如果我們需要處理類數組對象，這些“額外”的屬性就會存在問題。 周遊數組：周遊數組比周遊對象慢10-100倍。(for..in對周遊對象有優化)。周遊順序可能不是數組的順序	不能獲得key 不能周遊對象（可與Object.keys()搭配解決）
優點	可保證輸出順序 功能豐富
可周遊	對象、類數組對象(有index和length)、數組	可疊代對象(有Symbol.iterator方法)，例如： Array, Map, Set, String, TypedArray，arguments 對象generator
版本

for...in示例

周遊對象屬性

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // 屬性鍵的值
  alert( user[key] ); // John, 30, true
}      

周遊數組

let arr = ["Apple", "Orange", "Pear"];

for (let key in arr) {
  alert( arr[key] ); // Apple, Orange, Pear
}      

for...of示例

let fruits = ["Apple", "Orange", "Plum"];

// 周遊數組元素
for (let fruit of fruits) {
  alert( fruit );
}      

let arr = ["Apple", "Orange", "Pear"];

for (let i = 0; i < arr.length; i++) {
  alert( arr[i] );
}