如何区分for in 和 for of
时间: 2023-10-27 22:07:48 浏览: 34
for in 和 for of 都是 JavaScript 的循环语句,但它们的作用不同。
for in 语句用来遍历对象的可枚举属性,例如:
```
const obj = {a:1, b:2, c:3};
for (let prop in obj) {
console.log(prop, obj[prop]);
}
// 输出:
// a 1
// b 2
// c 3
```
for of 语句用来遍历可迭代对象的值,例如:
```
const arr = [1, 2, 3];
for (let value of arr) {
console.log(value);
}
// 输出:
// 1
// 2
// 3
```
注意:for of 只能用于遍历可迭代对象,例如数组、字符串、Set、Map 等,而 for in 可以遍历对象的所有可枚举属性,包括原型链上的属性。如果遍历数组或字符串,使用 for in 会遍历它们的索引或键值,可能会出现无法预期的结果,因此应该使用 for of 来遍历数组或字符串的值。
相关问题
js for of 和for in
当我们需要遍历一个集合或者数组时,JavaScript提供了两种常用的循环方式:for...of和for...in。
1. for...of循环:
for...of循环是ES6引入的一种遍历方式,它可以用来遍历可迭代对象(如数组、字符串、Set、Map等)。它的语法结构如下:
```
for (variable of iterable) {
// 循环体
}
```
其中,variable是每次迭代时的变量,iterable是要遍历的可迭代对象。在每次循环中,variable会被赋值为可迭代对象中的当前元素。例如:
```
const arr = [1, 2, 3];
for (const element of arr) {
console.log(element);
}
// 输出:1 2 3
```
for...of循环会自动遍历可迭代对象中的所有元素,并且不需要我们手动管理索引或者迭代器。
2. for...in循环:
for...in循环是一种用于遍历对象属性的循环方式。它的语法结构如下:
```
for (variable in object) {
// 循环体
}
```
其中,variable是每次迭代时的变量,object是要遍历的对象。在每次循环中,variable会被赋值为对象的一个属性名。例如:
```
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
console.log(key, obj[key]);
}
// 输出:a 1 b 2 c 3
```
for...in循环会遍历对象的所有可枚举属性(包括继承得到的属性),但不会遍历数组或者字符串的索引。
for of 和 for in
`for of`和`for in`是用于循环遍历数据结构的两种不同的语法。
`for of`循环用于遍历可迭代对象(如数组、字符串、Map、Set等),它会遍历对象的每个元素并执行相应的操作。例如:
```javascript
const arr = [1, 2, 3];
for (const element of arr) {
console.log(element);
}
```
输出结果为:
```
1
2
3
```
`for in`循环用于遍历对象的属性(包括继承的属性),它会遍历对象的每个可枚举属性并执行相应的操作。例如:
```javascript
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
console.log(key, obj[key]);
}
```
输出结果为:
```
a 1
b 2
c 3
```
需要注意的是,`for in`循环不仅会遍历对象自身的属性,还会遍历原型链上的属性。如果只想遍历对象自身的属性,可以使用`hasOwnProperty`方法进行过滤。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)