Передача по ссылке или по значению, Spread оператор (ES6-ES9)

Такой код логически предсказуем:

Код

let a = 5;
let b = a; // 5

b = b + 5; // 10

В данном коде в переменной copy будет лежать не копия объекта obj, а лишь ссылка на этот объект:

Код

const obj = {
a: 5,
b : 1
};

const copy = obj;

В этом легко убедиться, если попробовать изменить значение переменной в copy, и мы увидим, как значение той же переменной изменится и в obj

Код

const obj = {
a: 5,
b : 1
};

const copy = obj; // здесь передаётся ссылка на уже существующий объект

copy.a = 10;

console.log(obj.a); // 10
console.log(copy.a); // 10

Создание поверхностных копий объектов

Как вариант, создать копию можно с помощью цикла:

Код

Цитата

{ a: 2, b: 5, c: { x: 7, y: 4 } }

Мы создали копию объекта, можем проверить, повлечёт ли изменение значение свойства в копии, изменение значения подобного свойства в начальном объекте, с которого делали копию:

Код

newNumbers.a = 10;

console.log(newNumbers);
console.log(numbers);

Цитата

{ a: 10, b: 5, c: { x: 7, y: 4 } }
{ a: 2, b: 5, c: { x: 7, y: 4 } }

Как видим, в начальном объекте значение свойства а осталось тем же, оно не изменилось.

Но, если мы изменим значение свойства во вложенном объекте копии, то одноимённое свойство во вложенном объекте начального объекта также изменится, поскольку здесь также будет передача по ссылке:

Код

newNumbers.c.x = 10;

console.log(newNumbers);
console.log(numbers);

Цитата

{ a: 2, b: 5, c: { x: 10, y: 4 } }
{ a: 2, b: 5, c: { x: 10, y: 4 } }

Способ второй: создание поверхностной копии через метод Object.assign()

Метод Object.assign() используется для копирования значений всех собственных перечисляемых свойств из одного или более исходных объектов в целевой объект. После копирования он возвращает целевой объект.

К примеру, в объект numbers нужно добавить данные из объекта add.

Делается это так:

Код

Цитата

{ a: 2, b: 5, c: { x: 7, y: 4 }, d: 17, e: 20 }

Для метода Object.assign() первым аргументом указывается тот объект, в который добавляются данные, вторым аргументом указывается объект, из которого данные добавляются.

Тоже самое можно проделать с пустым объектом, чтобы создать копию целевого объекта:

Код

const add = {
d: 17,
e: 20
}

const newObject = Object.assign({}, add); // здесь независимая поверхностная копия объекта add
console.log(newObject);

Цитата

{ d: 17, e: 20 }

Проверяем, что мы создали независимую копию объекта (при изменении данных в копии, данные в исходном объекте должны остаться без изменений):

Код

newObject.d = true;

console.log(newObject);
console.log(add);

Цитата

{ d: true, e: 20 } // данные изменились
{ d: 17, e: 20 } // данные не изменились

Создание копии массива

Исходный массив:

Код

const oldArray = ['a', 'b', 'c'];

Если попытаться сделать копию таким образом, то получим лишь ссылку на исходный массив

Код

const newArray = oldArray;

Сделать копию можно, используя метод slice()

Код

const newArray = oldArray.slice();

Метод slice() возвращает новый массив, содержащий копию части исходного массива.

Синтаксис:

Код

arr.slice([begin[, end]])

Если не определять begin и end, то вызов вернёт полностью исходный массив, так и получаем поверностную копию этого массива.

Код

const oldArray = ['a', 'b', 'c'];
const newArray = oldArray.slice();
console.log(newArray); // [ 'a', 'b', 'c' ]

Поменяем в newArray значение первого элемента, чтобы убедиться, что это не повлечёт изменений в массиве oldArray

Код

const oldArray = ['a', 'b', 'c'];
const newArray = oldArray.slice();

newArray[0] = 'test';

console.log(newArray);
console.log(oldArray);

Цитата

[ 'test', 'b', 'c' ] // значение поменялось
[ 'a', 'b', 'c' ] // значение не изменилось

Spread оператор (оператор разворота)

Есть три массива, задача: наполнить массив internet данными из массивов video и blogs, плюс какими-то данными дополнительно.

Код

const video = ['youtube', 'vimeo', 'rutube'];
const blogs = ['wordpress', 'livejournal', 'blogger'];
const internet = [];

Spread оператор разворачивает структуру(к примеру, тот же массив) на отдельные значения, применимо к нашей задаче:

Код

const video = ['youtube', 'vimeo', 'rutube'];
const blogs = ['wordpress', 'livejournal', 'blogger'];
const internet = [...video, ...blogs, 'vk', 'facebook'];

console.log(internet);

Цитата

[
'youtube',
'vimeo',
'rutube',
'wordpress',
'livejournal',
'blogger',
'vk',
'facebook'
]

Пример посложнее - есть функция, имеющая три параметра и есть массив данных, допустим, пришедших с сервера. Как нам передать элементы массива как аргументы в параметры функции?

Код

function log(a, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
}

const num = [2, 5, 7]; // допустим, массив данных пришел с серверах

Делается это с помощью Spread оператора, передавая его в вызов функции в качестве аргумента:

Код

log(...num);

Цитата

2
5
7

Получаем ещё один способ создания поверхностных копий объектов, а именно: с использованием Spread оператора.

Пример с массивом:

Код

const array = ['a', 'b'];

const newArray = [...array];

console.log(newArray); // [ 'a', 'b' ] создали поверхностную копию

newArray[0] = 'test'; // меняем значение элемента в копии

console.log(newArray); // [ 'test', 'b' ] значение изменилось
console.log(array); // [ 'a', 'b' ] значения не изменились

По аналогии делаем копию объекта:

Код

Object.assign()Spread operator


Имя *:
Email *:
Все смайлы
Код *: