for in与for of用法及区别

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

for-in总是得到对象的key或数组、字符串的下标。

for-of总是得到对象的value或数组、字符串的值,另外还可以用于遍历Map和Set。

var arr=[{name:'张三'},{name:'李四'}];
for (var i in arr){
    console.log(i)
}
for (var i of arr){
    console.log(i)
}

结果:

### JavaScript 中 `for...in` 和 `for...of` 的用法区别 #### 1. `for...in` `for...in` 主要用于遍历对象的可枚举属性。当使用 `for...in` 遍历数组时,返回的是数组的索引值(以字符串形式表示),而不是数组的实际元素[^1]。 代码示例: ```javascript const arr = [{ name: 'tom' }, { name: 'lucy' }]; const obj = { name: 'tom', age: 12 }; // 遍历数组 for (let i in arr) { console.log(i); // 输出 "0", "1" } // 遍历对象 for (let i in obj) { console.log(i); // 输出 "name", "age" } ``` 需要注意的是,`for...in` 不仅会遍历对象自身的属性,还会遍历其原型链上的可枚举属性[^2]。因此,在使用 `for...in` 遍历时,通常需要结合 `hasOwnProperty` 方法来过滤掉继承的属性。 代码示例: ```javascript const obj = Object.create({ inherited: true }); obj.name = 'tom'; for (let i in obj) { if (obj.hasOwnProperty(i)) { console.log(i); // 输出 "name" } } ``` #### 2. `for...of` `for...of` 用于遍历可迭代对象(如数组、字符串、Map、Set 等)的值。 `for...in` 不同,`for...of` 返回的是对象的值,而不是属性名或索引[^4]。 代码示例: ```javascript const arr = [{ name: 'tom' }, { name: 'lucy' }]; const str = "qwe"; // 遍历数组 for (let i of arr) { console.log(i); // 输出 "{ name: 'tom' }", "{ name: 'lucy' }" } // 遍历字符串 for (let i of str) { console.log(i); // 输出 "q", "w", "e" } ``` 如果尝试使用 `for...of` 遍历一个非可迭代对象(如普通对象),则会抛出错误[^4]。 代码示例: ```javascript const obj = { name: 'tom', age: 12 }; for (let i of obj) { console.log(i); // TypeError: obj is not iterable } ``` #### 3. 区别总结 - **适用范围**:`for...in` 适用于对象属性的遍历,而 `for...of` 适用于可迭代对象的值的遍历[^2]。 - **返回值**:`for...in` 返回属性名或索引(字符串形式),`for...of` 返回实际的值[^1]。 - **原型链**:`for...in` 会遍历原型链上的属性,而 `for...of` 不会受到原型链的影响[^2]。 - **性能**:在遍历数组时,`for...of` 的性能通常优于 `for...in`,因为后者需要将索引转换为字符串[^3]。 ### 注意事项 - 在使用 `for...in` 遍历对象时,建议结合 `hasOwnProperty` 方法以避免遍历到原型链上的属性。 - 如果需要遍历数组的值而非索引,推荐使用 `for...of` 或其他方法(如 `forEach`)[^3]。 ```javascript const arr = [1, 2, 3]; // 使用 for...of 遍历数组值 for (let value of arr) { console.log(value); // 输出 "1", "2", "3" } // 使用 forEach 遍历数组值 arr.forEach(value => { console.log(value); // 输出 "1", "2", "3" }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值