for in与for of的区别
时间: 2024-05-16 13:18:51 浏览: 140
for...in 和 for...of 是 JavaScript 中两种不同的循环语句,用于遍历数据结构(如数组、对象等)。它们的主要区别在于它们遍历的对象类型和遍历的方式。
1. for...in 循环:
for...in 循环用于遍历对象的可枚举属性。它会将对象的每个可枚举属性(包括原型链上的属性)作为迭代变量来循环遍历。
示例:
```javascript
const obj = { a: 1, b: 2, c: 3 };
for (let prop in obj) {
console.log(prop); // 输出:'a', 'b', 'c'
}
```
注意:for...in 循环不保证对象属性的顺序,并且还会遍历继承的属性。因此,在遍历数组等类数组对象时,可能会得到意外的结果。
2. for...of 循环:
for...of 循环用于遍历可迭代对象(如数组、字符串、Map、Set 等)。它会将对象的每个可迭代项作为迭代变量来循环遍历。
示例:
```javascript
const arr = [1, 2, 3];
for (let item of arr) {
console.log(item); // 输出:1, 2, 3
}
```
for...of 循环提供了一个简洁的语法来遍历数组和其他可迭代对象,并且保证遍历的顺序和对象的迭代器定义的顺序一致。然而,它无法直接用于遍历普通对象的属性,因为普通对象不是可迭代对象。
总结:for...in 循环用于遍历对象的属性,for...of 循环用于遍历可迭代对象的值。
相关问题
for of与for in的区别
for of用于遍历可迭代对象的值,而for in用于遍历对象的属性。
例如,对于一个数组,使用for of可以遍历数组中的每个值:
```
const arr = [1, 2, 3];
for (const val of arr) {
console.log(val);
}
// 输出: 1, 2, 3
```
而使用for in可以遍历对象的属性名:
```
const obj = {a: 1, b: 2, c: 3};
for (const prop in obj) {
console.log(prop);
}
// 输出: a, b, c
```
需要注意的是,使用for in遍历对象时会遍历对象的原型链上的所有属性,因此需要使用hasOwnProperty方法来判断属性是否是对象自身的属性。
for of和for in区别
for...in和for...of都是用来遍历的属性,但是它们有以下区别:
共性:
- 都可以遍历数组和对象
区别:
- for...in语句用于遍历对象的属性,而for...of语句用于遍历可迭代对象的元素
- for...in语句返回的是对象的键名,而for...of语句返回的是对象的键值
- for...in语句可以遍历对象的原型链上的属性,而for...of语句不行
- for...in语句可以遍历字符串类型的键名,而for...of语句不行
以下是两个例子来说明它们的区别:
1. 遍历对象
```javascript
const obj = { a: 1, b: 2, c: 3 }
// for...in语句遍历对象的属性
for (let i in obj) {
console.log(i) // 输出:a b c
}
// for...of语句不能用于对象
for (let i of obj) {
console.log(i) // 输出:Uncaught TypeError: obj is not iterable 报错了
}
```
2. 遍历数组
```javascript
const arr = [1, 2, 3]
// for...in语句遍历数组的下标
for (let i in arr) {
console.log(i) // 输出:0 1 2
}
// for...of语句遍历数组的元素
for (let i of arr) {
console.log(i) // 输出:1 2 3
}
```
阅读全文