主页 / 问题 / 1517861
Accepted
Алексей Яковлев
Asked:2023-05-05 21:27:58 +0000 UTC2023-05-05 21:27:58 +0000 UTC

如何摆脱更改导入的数组？

  • 772

有一个包含在外部文件中并被导出的数组：

export default [{name: "alex", age: 29}, ...];

在某个类中，我将其导入并放入一个变量的值中：

import persons from "./data.js";

class Persons {
  list = persons;
  ...
}

在该类中，还有几种方法可以使用列表变量并对其进行更改。我有一个为变量设置默认值的方法：

resetToDefault() {
  this.list = persons;
  ...
}

persons但是我发现数组已经在旧数组下发生了变化list，因此list没有更新。如何摆脱改变数组persons？

javascript

1 个回答

  1. Best Answer

    如果你只关心数组是否发生了变化，而不关心数组中的对象本身是否发生了变化，那么你可以使用扩展语法复制数组：

    list = [...persons];


    const persons = [
  {
    name: "name 1",
    age: 1
  },
  {
    name: "name 2",
    age: 2
  }
];

class Persons {
  list = [...persons];
  
  mutateList() {
    this.list.map(person => {
      person.name += ' mutated';
      
      return person;
    });
    
    this.list.splice(0, 1);
  }

  resetToDefault() {
    this.list = persons;
  }
}

const personsInstance = new Persons();

console.log('Before mutating :', personsInstance.list);

personsInstance.mutateList();

console.log('After mutating :', personsInstance.list);

personsInstance.resetToDefault();

console.log('After reseting :', personsInstance.list);

    如果您需要数组内的对象也返回到它们以前的状态，那么您可以使用JSON.parse和JSON.stringify的组合创建数组的“深层”副本，如文档中所示：

    list = JSON.parse(JSON.stringify(object));


    const persons = [
  {
    name: "name 1",
    age: 1
  },
  {
    name: "name 2",
    age: 2
  }
];

class Persons {
  list = JSON.parse(JSON.stringify(persons));
  
  mutateList() {
    this.list.map(person => {
      person.name += ' mutated';
      
      return person;
    });
    
    this.list.splice(0, 1);
  }

  resetToDefault() {
    this.list = persons;
  }
}

const personsInstance = new Persons();

console.log('Before mutating :', personsInstance.list);

personsInstance.mutateList();

console.log('After mutating :', personsInstance.list);

personsInstance.resetToDefault();

console.log('After reseting :', personsInstance.list);

    • 0

相关问题