Vue 赋值后原数据随赋值后的数据的变化而变化

干了这碗小米汤儿

已于 2024-02-29 16:30:21 修改

阅读量746

点赞数 3

文章标签： vue.js 前端 javascript 数据类型深拷贝

于 2024-02-29 16:29:38 首次发布

本文链接：https://blog.csdn.net/MtangEr/article/details/136374214

版权

本文介绍了如何在JavaScript中避免原数据因赋值操作而变化，通过Object.assign()、JSON.parse()和lodash的cloneDeep()三种方法实现深拷贝，以及它们在处理引用类型数据时的区别。

摘要由CSDN通过智能技术生成

很常见的，当我们直接用“=”号等方式直接赋值后原数据会随赋值后的数据的变化而变化
但是有时候我们的需求是不需要原数据跟随变化
所以怎么解决呢？
解决办法有：
1.使用Object.assign() 方法
2.使用深拷贝函数 JSON.parse()
3.使用第三方库lodash的cloneDeep() 函数进行深拷贝

方法1:
创建一个新的变量并将原始变量复制到该新变量上，然后再对新变量进行操作。这样就能保持原始变量的完整性，同时也可以通过新变量来获得所需结果。示例代码如下：

// 原始变量
let a = { name: 'John', age: 25 }
let b = Object.assign({},a)
console.log(a,b) //  { name: 'John', age: 25 } , { name: 'John', age: 25 }
b.name='tom'
console.log(a,b) //  { name: 'John', age: 25 } , { name: 'tom', age: 25 }

但是注意：当a对象中有引用类型的数据时(引用数据类型：Object、Array、Function等；)，b在复制a后，修改b中的引用类型的值，a里边的引用类型会同样跟随变化。

let c= {name:'c',work:[]}
let d = Object.assign({},c)
console.log(c,d) //{name: 'c', work: Array(0)},{name: 'c', work: Array(0)}
d.work.push({value:'开发'})
console.log(c,d) //{name: 'c', work: [value:'开发']},{name: 'c', work: [value:'开发']}

方法2.利用JavaScript的深拷贝函数JSON.parse()来创建一个全新的对象，从而达到修改赋值后的效果。示例代码如下：

let b = JSON.parse(JSON.stringify(a))
//不管a中有任何类型的属性，修改b里边的任何值时，都不会改变原数据a中的值，

方法3.使用第三方库lodash的cloneDeep() 函数进行深拷贝

// 导入lodash库
import _ from 'lodash';
 
// 原始变量
let a = { name: 'John', age: 25 };
// 使用lodash的cloneDeep()函数进行深拷贝
let b = _.cloneDeep(originalVariable);
b.age = 30; // 修改克隆后的变量的属性
console.log(a); // 输出: { name: 'John', age: 25 }
console.log(b); // 输出: { name: 'John', age: 30 }