Копирование массивов и объектов в JavaScript

06.01.2017 / #javascript

Массивы

Для начала создадим простой массив:

const heros = ['Superman', 'Batman', 'Wonder Woman'];

Вариант №1. Воспользуемся методом .slice(). Мы знаем что он принимает два аргумента - .slice(begin, end). Но если мы пропустим этот шаг и ничего не передадим, то возвратится полная копия массива. 

const copyHeros = heros.slice();
console.log(copyHeros) // ['Superman', 'Batman', 'Wonder Woman']

Вариант №2. Теперь нам поможет .concat(). Вызываем его на пустом массиве и передаем в аргумент heros.

const copyHeros = [].concat(heros);
console.log(copyHeros) // ['Superman', 'Batman', 'Wonder Woman']

Воспользуемся возможностями ES6.

Вариант №3. Используем spread (оператор расширения).

const copyHeros = [...heros];
console.log(copyHeros) // ['Superman', 'Batman', 'Wonder Woman']

Вариант №4. И напоследок применим метод .from(), который необходимо вызвать на объекте Array. 

const copyHeros = Array.from(heros);
console.log(copyHeros) // ['Superman', 'Batman', 'Wonder Woman']

Объекты

В JS с копированием объектов все чуть сложнее чем хотелось бы, т.к. нет нативного метода.

Вариант №1. Мы можем сами написать необходимый код. Выглядеть он будет подобным образом: 

function makeClone(obj) {
  let clone = {}; // Создаем новый пустой объект
  for (let prop in obj) { // Перебираем все свойства копируемого объекта
    if (obj.hasOwnProperty(prop)) { // Только собственные свойства
      if ("object"===typeof obj[prop]) // Если свойство также объект
        clone[prop] = makeClone(obj[prop]); // Делаем клон свойства
      else
        clone[prop] = obj[prop]; // Или же просто копируем значение
    }
  }
 return clone;
}

const cloneObj = makeClone(someObj);

Вариант №2. JSON.parse и JSON.stringify тоже поможет сделать копию объекта:

const cloneObj = JSON.parse(JSON.stringify(someObj));

Вариант №3. В ES6 у Object появился метод .assign(). К сожалению он не делает глубокое копирование: 

const cloneObj = Object.assing({}, someObj);

Вариант №4. Можно воспользоваться сторонними библиотеками.

В jQuery есть метод jQuery.extend():

const cloneObj = $.extend(true, {}, someObj);

В Lodash есть .cloneDeep():

const cloneObj = _.cloneDeep(someObj);
Все статьи