for of 与 for in的区别

本文探讨了JavaScript中数组和对象的多种遍历方法,包括for循环、for...in、for...of以及ES5和ES6提供的高级迭代方式。对比了不同方法的优缺点,如for...of更适用于数组,而for...in适合遍历对象键名。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

遍历数组通常使用for循环,ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的返回结果不一样。但是使用foreach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。

1

2

3

4

5

6

7

8

Array.prototype.method=function(){

  console.log(this.length);

}

var myArray=[1,2,4,5,6,7]

myArray.name="数组"

for (var index in myArray) {

  console.log(myArray[index]);

}

使用for in 也可以遍历数组,但是会存在以下问题:

1.index索引为字符串型数字,不能直接进行几何运算

2.遍历顺序有可能不是按照实际数组的内部顺序

3.使用for in会遍历数组所有的可枚举属性,包括原型。例如上栗的原型方法method和name属性

所以for in更适合遍历对象,不要使用for in遍历数组。

那么除了使用for循环,如何更简单的正确的遍历数组达到我们的期望呢(即不遍历method和name),ES6中的for of更胜一筹.

1

2

3

4

5

6

7

8

Array.prototype.method=function(){

  console.log(this.length);

}

var myArray=[1,2,4,5,6,7]

myArray.name="数组";

for (var value of myArray) {

  console.log(value);

}

记住,for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。

for of遍历的只是数组内的元素,而不包括数组的原型属性method和索引name,不能遍历对象,只能遍历数组、map、set等结构的数据。

 因为能够被for...of正常遍历的,都需要实现一个遍历器Iterator。而数组、字符串、Set、Map结构,早就内置好了Iterator(迭代器),它们的原型中都有一个Symbol.iterator方法,而Object对象并没有实现这个接口,使得它无法被for...of遍历

遍历对象 通常用for in来遍历对象的键名

1

2

3

4

5

6

7

8

9

10

11

Object.prototype.method=function(){

  console.log(this);

}

var myObject={

  a:1,

  b:2,

  c:3

}

for (var key in myObject) {

  console.log(key);

}

for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话,可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性

1

2

3

4

5

for (var key in myObject) {

  if(myObject.hasOwnProperty(key)){

    console.log(key);

  }

}

    同样可以通过ES5的Object.keys(myObject)获取对象的实例属性组成的数组,不包括原型方法和属性。

1

2

3

4

5

6

7

8

9

Object.prototype.method=function(){

  console.log(this);

}

var myObject={

  a:1,

  b:2,

  c:3

}

Object.keys(myObject).forEach(function(key,index){<br>  console.log(key,myObject[key])<br>})

### JavaScript 中 `for...in` `for...of` 循环的区别 #### 基本概念 `for...in` 是一种用于遍历对象属性的语句,而 `for...of` 则是用来迭代可迭代对象(如数组、字符串、Map、Set 等)中的值。两者的用途不同,适用场景也有所差异。 #### `for...in` 的特点 `for...in` 遍历的是对象自身的以及继承的可枚举属性名[^2]。它通常被用来访问对象的所有键(即属性名称)。需要注意的是,`for...in` 不仅会返回对象本身的属性,还会返回通过原型链继承来的属性。因此,在处理数组时可能会导致意外的结果,因为数组也是对象的一种形式,并且可能具有额外的方法或属性。 ```javascript const obj = { key1: 'value1', key2: 'value2' }; for (let prop in obj) { console.log(prop); // 输出 "key1", "key2" } ``` #### `for...of` 的特点 相比之下,`for...of` 提供了一种更直观的方式来获取集合类型的值,而不是它们的索引或者键[^4]。它可以作用于任何实现了 Iterable 接口的数据结构之上,比如 Array、String、TypedArray、NodeList 或者 Map/Set 等等。对于这些数据类型来说,每次循环都会提取当前项的实际内容而非其位置信息。 ```javascript const array = ['a', 'b', 'c']; for (let elem of array) { console.log(elem); // 输出 "a", "b", "c" } ``` #### 主要区别总结 | 特性 | for...in | for...of | |---------------------|-----------------------------------|------------------------------| | **主要功能** | 遍历对象的属性 | 获取可迭代对象中的具体值 | | **目标范围** | 所有可枚举属性(包括原型上的方法)| 可迭代对象的内容 | | **性能考虑** | 较慢 | 更高效 | 尽管两者名字相似,但实际应用场景完全不同;如果只是想简单地读取列表里的每一个成员,则应该优先选用效率更高的 `for...of` 而不是容易引起误解甚至错误使用的 `for...in`. ```javascript // 使用for...of来打印数组元素 let letters = ["A", "B", "C"]; for(let letter of letters){ console.log(letter); } // 使用for...in则需注意不要误用到数组上 let numbers = [10, 20 ,30]; for(let index in numbers){ console.log(numbers[index]); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值