在 TypeScript 中创建数组的深层副本

要在 TypeScript 中创建数组的深层副本：

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

索引.ts


const arr = [
  { id: 1, address: { country: 'Germany' } },
  { id: 2, address: { country: 'Chile' } },
  { id: 3, address: { country: 'UK' } },
];

/**
 *  👇️ const copy: {
        id: number;
        address: {
            country: string;
        };
      }[]
 */
const copy = JSON.parse(JSON.stringify(arr)) as typeof arr;

console.log(copy);

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

索引.ts


console.log(typeof JSON.stringify([])); // 👉️ "string"

结果，对内存中特定对象的所有引用都丢失了。

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

索引.ts


// 👇️ true
console.log(Array.isArray(JSON.parse(JSON.stringify([]))));

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

索引.ts


const arr = [
  { id: 1, address: { country: 'Germany' } },
  { id: 2, address: { country: 'Chile' } },
  { id: 3, address: { country: 'UK' } },
];

/**
 *  👇️ const copy: {
        id: number;
        address: {
            country: string;
        };
      }[]
 */
const copy = JSON.parse(JSON.stringify(arr)) as typeof arr;

console.log(copy);

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

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

索引.ts


const arr = [
  { id: 1, address: { country: 'Germany' } },
  { id: 2, address: { country: 'Chile' } },
  { id: 3, address: { country: 'UK' } },
];

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

copy.pop();

console.log(copy.length); // 👉️ 2

console.log(arr.length); // 👉️ 3

我们使用pop()方法从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 arr = [
  { id: 1, address: { country: 'Germany' } },
  { id: 2, address: { country: 'Chile' } },
  { id: 3, address: { country: 'UK' } },
];

/**
 *  👇️ const copy: {
        id: number;
        address: {
            country: string;
        };
      }[]
 */
const copy = cloneDeep(arr);

console.log(copy);

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

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

您可以测试从复制的数组中删除一个元素并比较两个数组的长度。

索引.ts


import cloneDeep from 'lodash.clonedeep';

const arr = [
  { id: 1, address: { country: 'Germany' } },
  { id: 2, address: { country: 'Chile' } },
  { id: 3, address: { country: 'UK' } },
];

const copy = cloneDeep(arr);

copy.pop();

console.log(copy.length); // 👉️ 2

console.log(arr.length); // 👉️ 3

–

在 TypeScript 中创建数组的深层副本

目录

Create a Deep Copy of an Array in TypeScript