如何克隆ES6导入数据以生成独立可变的对象

Question

我的Cypress测试需要两组略有不同的数据。由于数据集并不短，而且变化与原始数据的偏差很小-我想只复制对象并按照我需要的方式进行变化。但是，ES6 Imports中的变量是绑定的，因此更改副本也会导致更改原始数据。

为了证明这种行为：

//test.json
{
"foo":{
"bar":"XXX"
}
}

import test from './test.json'
const firstTest = {...test}
const secondTest = {...test}
secondTest.foo.bar = '@@@'
console.log(firstTest.foo.bar)
// Output: @@@

Spread运算符显然不能像Object.assign((那样在那里工作

对我来说，摆脱绑定的有效方法是：

import test from './test.json'
const firstTest = JSON.parse(JSON.stringify(test)) //<---
const secondTest = JSON.parse(JSON.stringify(test)) //<---
secondTest.foo.bar = '@@@'
console.log(firstTest.foo.bar)
// Output: XXX

是否有更好的方法来实现这一点，或者只是以不同的方式取消绑定

Answer 1

您可以使用strcuturedClone()算法。

请确保检查与目标环境的兼容性。

// import test from './test.json';
const test = JSON.parse(`{
"foo":{
"bar":"XXX"
}
}`);
const copy1 = structuredClone(test);
const copy2 = structuredClone(test);
copy2.foo.bar = '@@@';
console.log('test', test.foo.bar); // "XXX"
console.log('copy1', copy1.foo.bar); // "XXX"
console.log('copy2', copy2.foo.bar); // "@@@"