如何保存对象的初始语句？

Question

我有类型的对象：

export interface IGroupLanguage {

  name: string;

  languages?: Language[];

}

let data = [ { "name": "Automation", "languages": [ { "Name": "English", "Lcid": 1, "RightToLeft": true, "Code": "EN", "Mapped": true } ] }, { "name": "Monitors", "languages": [ { "Name": "Russian", "Lcid": 2, "RightToLeft": true, "Code": "RU", "Mapped": true } ] } ];

然后我尝试过滤对象并返回一个新对象：

 this.filteredObject = [...this.groups];

    this.filteredObject.map(item => {

      item.languages = item.languages.filter(

        lg =>

          lg.Name.toLocaleLowerCase().indexOf(searchQuery) != -1 ||

          lg.Code.toLocaleLowerCase().indexOf(searchQuery) != -1

      );

    });

问题是初始对象this.groups也发生了变化。如何保存对象的初始语句？

结果我不需要修改 objectthis.groups和过滤 object this.filteredObject。

我知道问题是因为 JS 通过引用复制对象，但我不知道如何解决它。

完整代码为：

search(searchQuery: string) {

    this.filteredObject = [...this.groups];

    this.filteredObject.map(item => {

      let tempLang = [...item.languages];

      item.languages = tempLang.filter(

        lg =>

          lg.Name.toLocaleLowerCase().indexOf(searchQuery) != -1 ||

          lg.Code.toLocaleLowerCase().indexOf(searchQuery) != -1

      );

    });

    console.log(this.groups);

  }

ngOnInit() {

    this.filteredObject = [...this.groups];

  }

结果初始对象console.log(this.groups);也被修改

Answer 1

因为您已经深度复制了未嵌套的父数据数组，所以您可以尝试以下方式 -this.filteredObject = [...this.groups];    this.filteredObject.map(item => {      let tempLang = [...item.languages];      item.languages = tempLang.filter(lg =>          lg.Name.toLocaleLowerCase().indexOf(searchQuery) != -1 ||          lg.Code.toLocaleLowerCase().indexOf(searchQuery) != -1      );    });

Answer 2

Spread 语法执行对象的浅拷贝。关于使用扩展语法复制数组的MDN 文档：在复制数组时，Spread 语法有效地深入一层。因此，它可能不适合复制多维数组，如下例所示（与 Object.assign() 和 spread 语法相同）。这意味着如果顶层有任何对象，它们的引用将被复制。这就是这个问题的原因。您可以使用 JSON.parse(JSON.stringify())深度克隆对象。但会有数据丢失如果对象DateS，功能undefined，Infinity或其他复杂的类型。此答案中的更多信息。此外，当你不返回任何值使用forEach()，而不是一个map()。this.filteredObject = JSON.parse(JSON.stringify(this.groups));filteredObject.forEach(item => {  item.languages = item.languages.filter(lg =>    lg.Name.toLocaleLowerCase().indexOf(searchQuery.toLocaleLowerCase()) != -1 ||    lg.Code.toLocaleLowerCase().indexOf(searchQuery.toLocaleLowerCase()) != -1  );});这适用于包含任何嵌套级别的对象的属性。现场示例：let data = [ { "name": "Automation", "languages": [ { "Name": "English", "Lcid": 1, "RightToLeft": true, "Code": "EN", "Mapped": true } ] }, { "name": "Monitors", "languages": [ { "Name": "Russian", "Lcid": 2, "RightToLeft": true, "Code": "RU", "Mapped": true } ] } ];let searchQuery = "English";let filteredObject = JSON.parse(JSON.stringify(data));filteredObject.forEach(item => {  item.languages = item.languages.filter(lg =>    lg.Name.toLocaleLowerCase().indexOf(searchQuery.toLocaleLowerCase()) != -1 ||    lg.Code.toLocaleLowerCase().indexOf(searchQuery.toLocaleLowerCase()) != -1  );});console.log(data);console.log(filteredObject);

Answer 3

您需要深度克隆您的对象。如果您知道对象的结构，则可以创建具有递归性的自定义深度克隆函数。否则，您可以使用库lodash