对象的克隆数组删除类类型答案

【问题标题】：Clone array of object removes class type对象的克隆数组删除类类型
【发布时间】：2019-10-23 06:04:35
【问题描述】：

我必须深度克隆一个对象数组

  filterList: Filter[] = [
    new ChipsFilter('Rating', 'rating',
      [
        {
          name: '5 ★',
          key: '5',
          value: true
        },
        {
          name: '4 ★',
          key: '4',
          value: true
        },
        {
          name: '3 ★',
          key: '3',
          value: true
        },
        {
          name: '2 ★',
          key: '2',
          value: true
        },
        {
          name: '1 ★',
          key: '1',
          value: true
        }
      ]),
    new CheckboxFilter('Country', 'country', [
      {
        name: 'India',
        key: 'india',
        value: true
      },
      {
        name: 'Brazil',
        key: 'brazil',
        value: false
      },
      {
        name: 'UAE',
        key: 'uae',
        value: true
      },
      {
        name: 'Sri Lanka',
        key: 'sri-lanka',
        value: true
      },
      {
        name: 'USA',
        key: 'usa',
        value: false
      },
      {
        name: 'England',
        key: 'england',
        value: true
      },
      {
        name: 'South Africa',
        key: 'south-africa',
        value: true
      }
    ]),
    new CalendarFilter('Date', 'createdAt', [
      {
        name: 'Start Date',
        key: 'startDate',
        value: ''
      },
      {
        name: 'End Date',
        key: 'endDate',
        value: ''
      }
    ]),
  ];

克隆后，我希望对象的数据类型相同，但我将对象作为类型，尝试了以下克隆方法。

使用 JSON 字符串化

this.filterList = this.filterList.map(a => Object.assign({}, a));

使用 object.assign

this.filterList = this.filterList.map(a => Object.assign({}, a));

【问题讨论】：

Object.assign 使用这种方式不会以保留类型信息的方式克隆对象。根据这些类的结构（您没有显示），它可能根本不会克隆它们。
使用 Object.assign(...) 表示将第二个参数分配给第一个参数中表示的结构 - 在这种情况下，它是一个 Object 对象。
typescript - cloning object的可能重复

标签： javascript arrays typescript types deep-copy

【解决方案1】：

Object.assign() 的第一个参数是目标对象。该对象实际上就是结果。 Object.assign() 所做的只是将您的 CalendarFilter 实例的自己的可枚举属性复制到该目标。

您可以做的是在array.map() 中创建对象的新实例，而不是使用Object.assign() 将它们分配给通用对象。

this.filterList = this.filterList.map(a => new CalendarFilter(...))

当然，您需要为数组中遇到的每种类型使用正确的构造函数。

【讨论】：

不只是 CalendarFilter，看看它显示 3 种类对象的示例

【解决方案2】：

这将考虑到可变对象类型：

class ChipsFilter {constructor(){this.chipsProp="chipsProp"}}
class CheckboxFilter {constructor(){this.checkboxProp= "checkboxProp"}}
class CalendarFilter {constructor(){this.calendarProp= "calendarProp"}}

const filterList = [
  new ChipsFilter(),
  new CheckboxFilter(),
  new CalendarFilter(),
];

let out = filterList.map(obj=>Object.assign(new obj.constructor, obj));
console.log(out[0].constructor, out[0]);
console.log(out[1].constructor, out[1]);
console.log(out[2].constructor, out[2]);

【讨论】：

出现错误：无法将“new”与类型缺少调用或构造 signature.ts(2351) 的表达式一起使用
这是一个打字稿掉毛问题。您可以清楚地看到这是有效的。