Как избавиться от изменения импортируемого массива?

Question

Есть массив, который содержится в постороннем файле и экспортируется:

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

В определенный класс я импортирую его и ставлю в значение переменной:

import persons from "./data.js";

class Persons {
  list = persons;
  ...
}

Далее в классе есть несколько методов, которые работают с переменной list и изменяют ее. У меня есть метод, который задает значение переменным по умолчанию:

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

Но массив persons у меня приходит уже измененный под старый list и поэтому list не обновляется. Как избавиться от изменения массива persons?

Answer 1

Если вас волнует только то что мутируется массив, но не волнует мутируются ли сами объекты внутри массива, то можно скопировать массив с помощью синтаксиса spread:

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);

БЛОГ НА HUSL

Как избавиться от изменения импортируемого массива?

Ответы (1 шт):