js中批量修改对象属性

简介: js中批量修改对象属性

首先,有这个对象

1. let a = {
2. id: 1,
3. name: '张三',
4. age: 18,
5. sex: 0
6. }

需求:同时修改name,id,并添加一个新属性c

常规写法:

 

1. a.id = 2;
2. a.name = '李四';
3. a.c = 1;

方法1:使用Object.assign()

Object.assign()常用来拷贝合并对象,相同属性替换,不同属性新增

写法:

 

a = Object.assign(a,{id:2,name:'李四',c:1})

方法2:使用Object.defineProperties()

 

1. object:对其添加或修改属性的对象,可以是本地对象或 DOM 对象。
2. descriptors:包含一个或多个描述符对象,每个描述符对象描述一个数据属性或访问器属性。

写法:

 

1. Object.defineProperties(a, {
2.     id: {
3.         value: 2
4.     },
5.     name: {
6.         value: '李四'
7.     },
8.     c:{
9.         value: 1
10.     }
11. })

而且这两种写法也不会使vue的reactive失去响应

相关文章
|
22天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
24 1
JavaScript基础知识-枚举对象中的属性
|
8天前
|
JavaScript 前端开发
JavaScript Boolean(布尔) 对象
Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false)。
26 8
|
13天前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
9 1
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-对象的基本操作
关于JavaScript对象基本操作的基础知识文章。
27 2
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-对象字面量
文章介绍了JavaScript中对象字面量的创建和使用,包括基本语法、属性赋值以及如何在控制台输出对象属性。
24 0
JavaScript基础知识-对象字面量
|
18天前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
13 1
|
20天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
42 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
70 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
63 4