js中对象进行赋值操作的几种方式,JS中对象的赋值操作多种方法解析

马肤

温馨提示:这篇文章已超过412天没有更新,请注意相关的内容是否还可用!

在JavaScript中,对象赋值操作有几种常见的方式。可以通过直接赋值运算符(=)将一个对象的引用赋给另一个变量。可以使用对象字面量的方式创建新对象并赋值。通过Object.create()方法可以创建一个新对象并继承现有对象的属性和方法。还可以使用扩展运算符(...)进行对象属性的浅拷贝赋值。通过函数参数传递或JSON序列化和反序列化也可以实现对象的赋值操作。这些方式提供了灵活的机制来操作和管理JavaScript中的对象。

赋值操作

在JavaScript中,如果我们直接使用等号(=)将一个对象赋值给另一个对象,那么这两个对象会指向同一个内存地址,如果我们修改其中一个对象的属性值,另一个对象的相应属性值也会发生变化,这是因为对象变量存储的是内存中的地址,而不是实际的数据值。

js中对象进行赋值操作的几种方式,JS中对象的赋值操作多种方法解析 第1张

let obj1 = {name: '小明', age: 10};
let obj2 = obj1; // obj2只是复制了obj1的引用,指向的是同一块内存地址
obj1.age = 20; // 修改obj1的age属性
console.log(obj2.age); // 输出20,因为obj1和obj2指向同一个对象的age属性

浅拷贝与深拷贝

浅拷贝只会复制对象的表层数据,如果对象的属性值是一个指向对象的引用,那么浅拷贝会复制这个引用地址而不是实际的对象,修改新对象中的属性时,原对象的相应属性也会改变,而深拷贝则会复制对象的所有属性及其子对象,创建一个与原对象完全独立的新对象,修改新对象中的属性不会影响到原对象。

浅拷贝示例:

const originalObj = {a:1, b:{c:2}};
const newObj = Object.assign({}, originalObj); // 浅拷贝
newObj.b.c = 3; // 修改新对象的b属性中的c值
console.log(originalObj.b.c); // 输出3,因为浅拷贝只复制了引用地址,所以修改新对象会影响原对象

深拷贝示例:

const originalObj = {a:1, b:{c:2}};
const newObj = JSON.parse(JSON.stringify(originalObj)); // 深拷贝
newObj.b.c = 3; // 修改新对象的b属性中的c值
console.log(originalObj.b.c); // 输出2,深拷贝创建了一个与原对象完全独立的新对象,修改新对象不会影响原对象

需要注意的是,深拷贝在处理具有循环引用的情况时需要特别注意,否则可能会导致死循环,深拷贝也会丢失对象的某些属性(如函数、Symbol等),因此在实际应用中需要根据具体情况选择使用浅拷贝或深拷贝。

js中对象进行赋值操作的几种方式,JS中对象的赋值操作多种方法解析 第2张

ES6展开运算符与解构赋值

ES6的展开运算符(...)可以将一个对象中的所有属性展开,并将它们作为新对象的属性,解构赋值则可以同时为一个或多个变量赋值,这两种方法都可以实现对象的赋值操作

展开运算符示例:

const originalObj = {a:1, b:{c:2}};
const newObj = {...originalObj}; // 使用展开运算符复制对象
newObj.b.c = 3; // 修改新对象的b属性中的c值
console.log(originalObj.b.c); // 输出2,展开运算符实现的是浅拷贝,修改新对象不会影响原对象

解构赋值示例:

const originalObj = {a:1, b:{c:2}};
const { ...newObj } = originalObj; // 使用解构赋值复制对象
newObj.b.c = 3; // 修改新对象的b属性中的c值
console.log(originalObj.b.c); // 输出2,解构赋值同样实现的是浅拷贝
```四、使用Object.getOwnPropertyDescriptors进行赋值操作Object.getOwnPropertyDescriptors方法可以获取对象所有属性的描述符,包括属性方法、可枚举性、可配置性、可写性等,我们可以使用这个方法来复制对象,Object.getOwnPropertyDescriptors示例:const originalObj = {a:1, b:{c:2}};const newObj = Object.defineProperties({}, Object.getOwnPropertyDescriptors(originalObj));newObj.b.c = 3;console.log(originalObj.b.c); // 输出2console.log(newObj.b.c); // 输出3在这个例子中,我们使用了Object.getOwnPropertyDescriptors方法和Object.defineProperties方法对原对象进行了复制,创建了一个与原对象完全独立的新对象,修改新对象的属性不会影响原对象,五、结合函数实现对象的赋值我们还可以结合函数来实现对象的赋值操作,函数中可以调用Object.assign或JSON.parse和JSON.stringify方法实现浅拷贝和深拷贝,function copyObj(obj, flag){    if(flag){        return JSON.parse(JSON.stringify(obj));    }else{        return Object.assign({}, obj);    }}const originalObj = {a:1, b:{c:2}};const newObj = copyObj(originalObj, true);newObj.b.c = 3;console

0
收藏0
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

  • 【研发日记】Matlab/Simulink自动生成代码(二)——五种选择结构实现方法,Matlab/Simulink自动生成代码的五种选择结构实现方法(二),Matlab/Simulink自动生成代码的五种选择结构实现方法详解(二)
  • 超级好用的C++实用库之跨平台实用方法,跨平台实用方法的C++实用库超好用指南,C++跨平台实用库使用指南,超好用实用方法集合,C++跨平台实用库超好用指南,方法与技巧集合
  • 【动态规划】斐波那契数列模型(C++),斐波那契数列模型(C++实现与动态规划解析),斐波那契数列模型解析与C++实现(动态规划)
  • 【C++】,string类底层的模拟实现,C++中string类的模拟底层实现探究
  • uniapp 小程序实现微信授权登录(前端和后端),Uniapp小程序实现微信授权登录全流程(前端后端全攻略),Uniapp小程序微信授权登录全流程攻略,前端后端全指南
  • Vue脚手架的安装(保姆级教程),Vue脚手架保姆级安装教程,Vue脚手架保姆级安装指南,Vue脚手架保姆级安装指南,从零开始教你如何安装Vue脚手架
  • 如何在树莓派 Raspberry Pi中本地部署一个web站点并实现无公网IP远程访问,树莓派上本地部署Web站点及无公网IP远程访问指南,树莓派部署Web站点及无公网IP远程访问指南,本地部署与远程访问实践,树莓派部署Web站点及无公网IP远程访问实践指南,树莓派部署Web站点及无公网IP远程访问实践指南,本地部署与远程访问详解,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南。
  • vue2技术栈实现AI问答机器人功能(流式与非流式两种接口方法),Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法探究,Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法详解
  • 发表评论

    快捷回复:表情:
    评论列表 (暂无评论,0人围观)

    还没有评论,来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码