​

简介

说明

        本文介绍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

版本

ES5

ES6

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] );
}