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

Рейтинг: 2Ответов: 1Опубликовано: 05.05.2023

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

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

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

import persons from "./data.js";

class Persons {
  list = persons;
  ...
}

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

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

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

javascript
Источник: Stack Overflow на русском

Ответы

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