for in与for of用法及区别

for in与for of用法及区别

1、

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

2、

for (var i of arr){
     console.log(i)
}

for (var i of obj){
     console.log(i)
}
//报错  obj is not iterable


总结:

  1. for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
  2. for in得到对对象的key或数组、字符串的下标
  3. for of和forEach一样,是直接得到值
  4. for of不能对象用

 

 

### 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、付费专栏及课程。

余额充值