在 TypeScript 中创建对象的深层副本

要在 TypeScript 中创建对象的深拷贝：

使用JSON.stringify()方法将对象字符串化。
使用该JSON.parse()方法将字符串解析回对象。
使用类型断言来键入复制的对象。

索引.ts


const obj = {
  person: {
    name: {
      first: 'James',
      last: 'Doe',
    },
    address: {
      country: 'Chile',
      city: 'Santiago',
    },
  },
};

const copy = JSON.parse(JSON.stringify(obj)) as typeof obj;

console.log(copy);

我们使用
JSON.stringify
方法将对象转换为 JSON 字符串。

索引.ts


console.log(typeof JSON.stringify({})); // 👉️ "string"

结果，所有对嵌套对象或数组的引用都丢失了。

下一步是使用
JSON.parse
方法将 JSON 字符串解析回对象。

索引.ts


// 👇️ "object"
console.log(typeof JSON.parse(JSON.stringify({})));

此时我们有了原始对象的深拷贝，但它的类型为
any，所以我们需要使用
类型断言
将其类型设置为原始对象的类型。

索引.ts


const obj = {
  person: {
    name: {
      first: 'James',
      last: 'Doe',
    },
    address: {
      country: 'Chile',
      city: 'Santiago',
    },
  },
};

const copy = JSON.parse(JSON.stringify(obj)) as typeof obj;

console.log(copy);

将对象转换为 JSON 字符串会使所有嵌套数组或对象失去其引用。

如果现在改变复制的对象，则不会更改原始对象的内容。

索引.ts


const obj = {
  person: {
    name: {
      first: 'James',
      last: 'Doe',
    },
    address: {
      country: 'Chile',
      city: 'Santiago',
    },
  },
};

const copy = JSON.parse(JSON.stringify(obj)) as typeof obj;

console.log(copy);

copy.person.name.first = 'Alice';

console.log(obj.person.name.first); // 👉️ "James"

更改copy对象中属性的值不会更改原始对象中的值，因为嵌套对象和数组指向内存中的不同位置。

使用 Lodash 创建对象的深拷贝

要在 TypeScript 中创建对象的深层副本，请安装并使用该
lodash.clonedeep包。该cloneDeep方法递归地克隆一个值并返回结果。该cloneDeep方法返回正确类型的对象。

在项目的根目录中打开终端并
使用以下 2 个命令安装lodash.clonedeep包：

壳


npm i lodash.clonedeep

npm i --save-dev @types/lodash.clonedeep

现在我们可以导入和使用该cloneDeep方法了。

索引.ts


import cloneDeep from 'lodash.clonedeep';

const obj = {
  person: {
    name: {
      first: 'James',
      last: 'Doe',
    },
    address: {
      country: 'Chile',
      city: 'Santiago',
    },
  },
};

const copy = cloneDeep(obj);

console.log(copy);

该cloneDeep方法以一个值作为参数，递归地克隆它并返回结果。

请注意，我们甚至不必使用类型断言，因为该方法会返回具有正确类型的值。

您可以测试更改对象中的copy值并检查原始对象中的值是否已更改。

索引.ts


import cloneDeep from 'lodash.clonedeep';

const obj = {
  person: {
    name: {
      first: 'James',
      last: 'Doe',
    },
    address: {
      country: 'Chile',
      city: 'Santiago',
    },
  },
};

const copy = cloneDeep(obj);

copy.person.name.first = 'Alice';

console.log(obj.person.name.first); // 👉️ "James"

–

目录

Create a Deep Copy of an Object in TypeScript

在 TypeScript 中创建对象的深层副本

使用 Lodash 创建对象的深拷贝