js动态的使用对象成员&遍历对象属性值

本文深入解析JavaScript中对象的动态添加成员、属性获取及遍历方法,包括使用方式1和方式2,帮助开发者掌握对象操作的核心技巧。

(入门级, 仅作为记录)

  

var obj = {
 id : 123,
 name : "Tom"
};

1.为对象动态添加成员

1.1 方式1

obj['desc']="abc";

 

1.2 方式2

eval('(obj.age=23)');

 

 

2.取值

2.1方式1
 alert(obj["id"]);
 alert(obj["name"]);
 

2.2 方式2
 var a =eval('(obj.id)');
 var b = eval('(obj.name)')
 alert("a=" + a + ", b=" + b);

 

3.遍历js对象的全部属性和值

var obj = { id : 111, name :"tom" };

 

3.1 方式1

for( name in obj  ) {

   alert("name: " + name + ", value: " + obj[name]);

}

 

3.2 方式2

$.each(obj, function(name, value) {

   alert("name:" + name + ", value: " + value);

}); 

### Vue 中遍历对象属性并根据条件修改属性值 在 Vue 中可以通过 `v-for` 指令来遍历对象的属性,并通过 JavaScript 的逻辑操作实现基于特定条件对属性值的修改。以下是详细的说明: #### 使用 `v-for` 遍历对象 Vue 提供了强大的模板语法支持,其中 `v-for` 可用于遍历对象的键值对[^2]。其基本结构如下所示: ```html <div v-for="(value, key, index) in object"> <!-- value 是当前属性的值 --> <!-- key 是当前属性的名字 --> <!-- index 是当前迭代项的索引 --> </div> ``` #### 动态更新对象属性 当需要根据某些条件动态修改对象中的属性值时,可以在 Vue 实例的数据绑定中定义相应的计算逻辑或者方法。例如,在数据初始化阶段或事件触发过程中执行条件判断。 下面是一个完整的例子展示如何结合 `v-for` 和条件语句完成这一目标: ```javascript new Vue({ el: '#app', data: { user: { name: 'Alice', age: 25, email: 'alice@example.com' } }, methods: { updateProperty(key, newValue) { if (this.user[key]) { // 判断是否存在此key this.$set(this.user, key, newValue); // 修改指定key对应的值 } } } }); ``` 在这个示例里,我们创建了一个名为 `updateProperty` 的函数用来依据传入的关键字和新数值更改用户的个人信息[^3]。注意这里使用的是 `$set()` 方法而不是直接赋值的方式,这是因为在响应式系统下对于新增加的对象成员应该采用这种方式才能让它们成为可观察的状态。 另外一种更灵活的做法是在渲染之前就处理好符合条件的数据源再交给视图层去显示。比如利用 computed 属性来进行过滤筛选后的呈现效果。 #### 示例代码片段 假设我们需要找到所有大于等于18岁的用户并将他们的状态设置为成年人,则可以这样做: ```javascript computed:{ adults(){ return Object.keys(this.users).map((key)=>{ const user=this.users[key]; if(user.age>=18){ user.status='adult';// 添加新的字段status表示成年与否 }else{ delete user.status;// 如果不符合则移除该字段 } return {[key]:user}; }).reduce((acc,cv)=>({...acc,...cv}),{}); } } ``` 以上代码展示了如何运用 map 函数配合 reduce 构建一个新的满足需求的对象集合[^1]。 ### 总结 综上所述,要实现在 Vue 应用程序内按照一定规则调整模型里的条目信息,既可以从视图层面出发借助指令控制样式表现;也可以深入到业务逻辑部分编写自定义算法达成目的。这两种途径各有优劣需视具体场景而定择善固执之。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值