«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript


Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Копирование массивов в JavaScript - Существует несколько способов.

1-ый способ копирования массивов: написать функцию, используя циклы (см. пример здесь, так как массивы - это частный случай объектов).

2-ой способ копирования массивов - метод slice.

3-ий момент: если присвоить массив какой-либо переменной, то это НЕ будет являться копированием. В переменную будет передана ссылка на исходный массив, но не сам массив: подробнее об этом читайте здесь.



Оператор spread - Копирование массивов

Оператор разворота spread работает, начиная со стандарта JavaScript ES6 и используется для копирования массивов.

Синтаксис оператора spread - три точки.

Оператор spread - Примеры
Пример 1.1

const letters = ['a', 'b', 'c'],
      lettersNew = [...letters];

lettersNew[0] = 'X';

console.log(lettersNew);
console.log(letters);

Результат


[ 'X', 'b', 'c' ]
[ 'a', 'b', 'c' ]

Оператор spread - три точки.

1. Копирование массива letters в lettersNew.

2. Изменение значения одного из элементов массива lettersNew.

3. Исходный массив letters - остается прежним.

Пример 1.2

const letters = ['a', 'b', 'c'],
      lettersEnd = ['x', 'y', 'z'],  
      lettersAllPlus = [...letters, ...lettersEnd, 'Q', 'W', 'E'];

Результат


[
  'a', 'b', 'c',
  'x', 'y', 'z',
  'Q', 'W', 'E'
]

В результате в один массив были скопированы два других массива + есть возможность добавления дополнительных элементов.

Оператор spread - На практике

Оператор spread на практике часто используется для передачи массива в функцию.

Как это выглядит? Рассмотрим пример.

Допустим, мы получаем данные в виде массива. Например, ФИО, адрес и возраст. И есть функция с тремя параметрами, которая обрабатывает эти данные определенным образом. Рассмотрим эту ситуацию в простом исполнении. Здесь важно уловить суть.

Пример 2.1

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

const number = ['Ivanov V.M.', 'Koroleva 7 121', 1980];

log(...number);

Результат


Ivanov V.M.
Koroleva 7 121
1980

Оператор spread раскладывает массив на отдельные элементы.

Оператор spread - Копирование объекта

В стандарте JavaScript ES8 оператор spread работает и для объектов.

Пример 3.1

const obj = {
    k: 1,
    s: 2
};

const newObj = {...obj};

console.log(newObj);
newObj.k = 111;

console.log(newObj);
console.log(obj);

Результат


{ k: 1, s: 2 }

{ k: 111, s: 2 }
{ k: 1, s: 2 } // Исходный объект

Оператор spread - в результате копирования мы имеем два независимых объекта.

Оператор spread делает поверхностную - НЕ глубокую копию объекта/массива.

То есть при копировании объекта или массива вложенные конструкции имеют ссылочный тип данных.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 2
Копирование массивов - Оператор spread
406
Условия if else - Конструкция switch case - Тернарный оператор
230
Циклы while и for - Операторы break и continue
278
Практика часть 2 – Циклы и Условия
622
Объявление функций – Стрелочные функции ES6
463
Методы и свойства строк и чисел - Метод substr - Индекс строки
145
Практика часть 3 - Используем функции
333
Что такое callback-функция - Аргумент другой функции
525
Свойства и методы объектов - Деструктуризация объектов ES6
850
Методы массивов - Перебор элементов массива - Псевдомассивы
813
Передача данных по ссылке и по значению – Клонирование объекта
197
Метод assign() – Копирование исходных объектов в целевой объект
162
Прототипное Программирование - Прототип и Экземпляр Объекта
170
Свойство proto - Методы Object.create и Object.setPrototypeOf
433
Практика часть 4 - Используем функции как методы объекта
9721
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки