如何在不更新基本数组的情况下更新数组

Question

  mapConfig(config: IConfigItem[], dataModel: IDataModel): IConfigItem[] {
    return config.map(c => {
      const entries: [string, string][] = Object.entries(c);
      entries.forEach(e => {
        const configValue = e[0];
        const configKey = e[1];
        if (configKey in dataModel) {
          c[configValue] = dataModel[configKey];
        }
      });
      return { ...c };
    });
  }

我在服务 class 中有这个功能，我从我的 angular 组件调用这个方法。

  const configCopy = [...this.config];
    const dataModelCopy = { ...this.dataModel };
    const mappedConfig: IConfigItem[] = this.loader.mapConfig(
      configCopy,
      dataModelCopy
    );

我正在创建 this.config 对象的副本并将其传递给 mapconfig 函数，这样它就不会更新基础对象 (this.config)，但它总是会更新基础对象 this.config。不确定我是否做错了什么。

Answer 1

解构是对象的浅拷贝。这意味着副本和原始对象的内部对象是相同的。你需要某种深度克隆。

最简单（不是最好）的方法是将原文字符串化：

const configCopy = JSON.parse(JSON.stringify(this.config));

How to Deep clone in javascript

Answer 2

应该可以不做任何突变，大致是这样的：

mapConfig(config: IConfigItem[], dataModel: IDataModel): IConfigItem[] {
    return config.map(c => {
        const entries: [string, string][] = Object.entries(c);
        const entriesToBeReplaced = entries.filter(([val, key]) => key in dataModel);

        const entriesWithReplacedValues = entriesToBeReplaced.map(([val, key]) => ({
            [val]: dataModel[key]
        }));

        return {
            ...c,
            Object.fromEntries(entriesWithReplacedValues)
        };
    });
}

如何在不更新基本数组的情况下更新数组

How can i update an array without updating the base array

arrays

shallow-copy

typescript

angular