for in 和for of 的区别
时间: 2024-05-16 08:18:45 浏览: 17
`for...in`和`for...of`是两种不同的循环方式,用于遍历数据结构中的元素。它们有以下区别:
`for...in`循环:
- 用于遍历对象的可枚举属性。
- 返回的是对象的键(字符串类型)。
- 不保证返回顺序。
- 可以访问到对象原型链上的属性(通过 `hasOwnProperty` 方法可以判断属性是否来自于原型链)。
示例:
```javascript
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
console.log(key); // 输出 "a", "b", "c"
console.log(obj[key]); // 输出 1, 2, 3
}
```
`for...of`循环:
- 用于遍历可迭代对象(如数组、字符串、Set、Map等)中的元素。
- 返回的是对象的值。
- 保证返回顺序与元素在数据结构中的顺序一致。
- 不可以直接遍历普通对象(对象不是可迭代对象),需要使用其他方法(如 `Object.keys()`)先将对象转换为可迭代对象。
示例:
```javascript
const arr = [1, 2, 3];
for (let value of arr) {
console.log(value); // 输出 1, 2, 3
}
const str = 'Hello';
for (let char of str) {
console.log(char); // 输出 "H", "e", "l", "l", "o"
}
```
总之,`for...in`用于遍历对象的属性,而`for...of`用于遍历可迭代对象的元素。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)