很常见的,当我们直接用“=”号等方式直接赋值后 原数据会随赋值后的数据的变化而变化
但是有时候我们的需求是不需要原数据跟随变化
所以怎么解决呢?
解决办法有:
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 }