JS--遍历方法--for...in和for...of的区别

原文网址：JS--遍历方法--for...in和for...of的区别_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文介绍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] );
}