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

「爱情、让人受尽委屈。」 2023-09-29 17:11 7阅读 0赞

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

## 简介 ##

**说明**

本文介绍JavaScript使用for...in和使用for...of遍历的区别。

**官网网址**

[for...in - JavaScript | MDN][for...in - JavaScript _ MDN]

[for...of - JavaScript | MDN][for...of - JavaScript _ MDN]

## 区别 ##

<table> 
 <tbody> 
 <tr> 
 <td style="width:79px;"> 项 </td> 
 <td style="width:354px;"> for in </td> 
 <td> for of </td> 
 </tr> 
 <tr> 
 <td style="width:79px;"> 作用 </td> 
 <td style="width:354px;"> 遍历所有可枚举的(enumerable)属性。 （包括数字属性） </td> 
 <td> 遍历所有value </td> 
 </tr> 
 <tr> 
 <td style="width:79px;"> 推荐用法 </td> 
 <td style="width:354px;"> 遍历对象属性 </td> 
 <td> 遍历数组 </td> 
 </tr> 
 <tr> 
 <td style="width:79px;"> 遍历项 </td> 
 <td style="width:354px;"> key </td> 
 <td> value </td> 
 </tr> 
 <tr> 
 <td style="width:79px;"> 缺点 </td> 
 <td style="width:354px;"> 遍历类数组：类数组很像数组，它们也有 length 和索引属性，但也可能有其它的非数字的属性和方法，这通常是我们不需要的。for..in 循环会把它们都列出来。如果我们需要处理类数组对象，这些“额外”的属性就会存在问题。 遍历数组：遍历数组比遍历对象慢10-100倍。(for..in对遍历对象有优化)。遍历顺序可能不是数组的顺序 </td> 
 <td> 不能获得key 不能遍历对象（可与Object.keys()搭配解决） </td> 
 </tr> 
 <tr> 
 <td style="width:79px;"> 优点 </td> 
 <td style="width:354px;"> </td> 
 <td> 可保证输出顺序 功能丰富 </td> 
 </tr> 
 <tr> 
 <td style="width:79px;"> 可遍历 </td> 
 <td style="width:354px;"> 对象、类数组对象(有index和length)、数组 </td> 
 <td> 可迭代对象(有Symbol.iterator方法)，例如： Array, Map, Set, String, TypedArray，arguments 对象generator </td> 
 </tr> 
 <tr> 
 <td style="width:79px;"> 版本 </td> 
 <td style="width:354px;"> ES5 </td> 
 <td> ES6 </td> 
 </tr> 
 </tbody> 
</table>

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

[JS--_--for...in_for...of_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126714506
[for...in - JavaScript _ MDN]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
[for...of - JavaScript _ MDN]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of