for/in 循环遍历对象的属性

本文详细介绍了JavaScript中for-in循环的用法,包括如何遍历对象的属性及注意事项,如避免原型链上的属性干扰。

for/in 循环遍历对象的属性

 
for/in 语句循环遍历对象的属性。 
js中获取key得到某对象中相对应的value的方法:obj.key 
js中根据动态key得到某对象中相对应的value的方法有二: 
一、var key = "name1";var value = obj[key]; 
二、var key = "name1";var value = eval("obj."+key); 

Js代码  收藏代码
  1. var obj={"name":"wjy","age":26,"sex":"female"};//定义一个object对象  
  2. var keys=[];//定义一个数组用来接受key  
  3. var values=[];//定义一个数组用来接受value  
  4.   for(var key in obj){  
  5.     keys.push(key);  
  6.     values.push(obj[key]);//取得value   
  7.     alert(eval("obj."+key));//循环内逐一打印value值  
  8.     }  
  9. alert(obj.name);//wjy  
  10. alert("keys is :"+keys+" and values is :"+values);  
  11. //keys is : name,age,sex and values is : wjy,26,female   

使用 for in 循环遍历对象的属性时,原型链上的所有属性都将被访问: 
Java代码  收藏代码
  1. Object.prototype.bar = 10;// 修改Object.prototype  
  2. var obj={"name":"wjy","age":26,"sex":"female"};//定义一个object对象    
  3. var keys=[];//定义一个数组用来接受key    
  4. var values=[];//定义一个数组用来接受value    
  5.   for(var key in obj){    
  6.     keys.push(key);    
  7.     values.push(obj[key]);//取得value      
  8.     }    
  9. alert("keys is :"+keys+" and values is :"+values);   
  10. //keys is : name,age,sex,bar and values is : wjy,26,female,10   

推荐总是使用 hasOwnProperty 方法, 这将会避免原型对象扩展带来的干扰: 
Javascript代码  收藏代码
  1. function allpro(obj){  
  2.     var keys=[];   
  3.     var values=[];    
  4.     for(var key in obj){   
  5.         //只遍历对象自身的属性,而不包含继承于原型链上的属性。  
  6.         if (obj.hasOwnProperty(key) === true){  
  7.             keys.push(key);    
  8.             values.push(obj[key]);   
  9.             }                 
  10.         }  
  11.     alert("keys is :"+keys+" and values is :"+values);    
  12. }  
  13. Object.prototype.bar = 1;// 修改Object.prototype  
  14. var o={"name":"wjy","age":26,"sex":"female"};//定义一个object对象   
  15. allpro(o);  
  16. //keys is : name,age,sex and values is: wjy,26,female  


object对象没有length属性,那么获取object对象的length就可以通过遍历得到key值的数组的长度来获取啦~ 
<think>我们被要求使用for循环遍历对象属性。在JavaScript中,遍历对象属性有多种方法,其中`for...in`循环是常用的一种。 根据引用[1]和[2]:`for...in`循环可以遍历对象的可枚举属性(包括自身属性和继承的可枚举属性,但通常我们只需要自身属性)。 在循环中,我们可以通过`对象[属性名]`的方式获取属性值。 注意:在引用[4]中提到一个错误,即使用`goodsObj['key']`来获取属性值,这实际上会查找字符串'key'对应的属性,而不是变量key的值。 正确做法是使用`goodsObj[key]`,因为`key`是一个变量,表示属性名的字符串。 另外,为了避免遍历到原型链上的属性,我们可以使用`hasOwnProperty`方法检查属性是否为对象自身的属性。 下面我们将介绍如何使用`for...in`循环遍历对象属性,并给出示例代码。</think>在 JavaScript 中使用 `for...in` 循环遍历对象属性是最直接的方法。以下是详细步骤和示例: ### 基础语法 ```javascript for (let key in object) { if (object.hasOwnProperty(key)) { // 推荐:确保只遍历对象自身属性 const value = object[key]; // 获取属性值 // 执行操作... } } ``` ### 完整示例 ```javascript const person = { name: "张三", age: 30, job: "工程师" }; // 遍历对象属性 for (let key in person) { if (person.hasOwnProperty(key)) { const value = person[key]; console.log(`${key}: ${value}`); } } /* 输出: name: 张三 age: 30 job: 工程师 */ ``` ### 关键注意事项 1. **避免原型链污染** 使用 `hasOwnProperty()` 检查确保只处理对象自身的属性,跳过继承属性[^1]: ```javascript const car = { brand: "Toyota" }; // 创建继承对象 const electricCar = Object.create(car); electricCar.model = "Prius"; for (let prop in electricCar) { if (electricCar.hasOwnProperty(prop)) { console.log(prop); // 只输出 "model" } } ``` 2. **动态访问属性值** 必须使用 `object[key]` 而非 `object.key` 语法(后者会尝试访问字面量 "key" 属性)[^4]: ```javascript const colors = { red: "#FF0000", green: "#00FF00" }; for (let colorName in colors) { console.log(colors.colorName); // ❌ 错误:始终输出 undefined console.log(colors[colorName]); // ✅ 正确:输出对应的十六进制值 } ``` 3. **遍历顺序** `for...in` 不保证属性顺序(ES6 后对数字键有特殊排序规则),需要顺序时改用: ```javascript // 按属性名排序遍历 Object.keys(object) .sort() .forEach(key => { console.log(object[key]); }); ``` ### 在 Vue 中的特殊用法 当需要在 Vue 模板中遍历对象时,使用 `v-for` 指令[^3]: ```html <template> <div v-for="(value, key, index) in user" :key="key"> {{ index + 1 }}. {{ key }}: {{ value }} </div> </template> <script> export default { data() { return { user: { name: "李四", points: 1200, level: "黄金会员" } } } } </script> ``` ### 替代方案比较 | 方法 | 特点 | 适用场景 | |------|------|----------| | `for...in` | 遍历所有可枚举属性 | 通用对象遍历 | | `Object.keys()` | 返回自身可枚举属性名数组 | 需要属性名列表时 | | `Object.values()` | 返回属性值数组 | 只需值不需键时 | | `Object.entries()` | 返回 [key, value] 数组 | 需要键值对时 | ```javascript // Object.entries() 示例 const book = { title: "JavaScript 指南", price: 99 }; Object.entries(book).forEach(([key, value]) => { console.log(`键: ${key}, 值: ${value}`); }); ``` ### 常见错误解决 **问题**:遍历时遇到 `undefined` 值 **原因**:使用 `object.key` 代替 `object[key]` [^4] **修复**: ```javascript // 错误写法 for (let key in obj) { console.log(obj.key); // 始终查找 "key" 属性 } // 正确写法 for (let key in obj) { console.log(obj[key]); // 动态获取属性值 } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值