Использует оператор расширения JavaScript

Давайте обсудим некоторые наиболее распространенные варианты использования оператора распространения.

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

Оператор распространения позволяет легко создать фактическую копию массива, а не просто копировать ссылку. Давайте посмотрим пример.

let originalArray=[1,2,3,4,5];
let copiedArray=[...originalArray];
originalArray.push(6);
console.log(originalArray); // logs [1, 2, 3, 4, 5, 6]
console.log(copiedArray); // logs [1, 2, 3, 4, 5]

В приведенном выше коде оператор let copyArray=[…originalArray];

распределяет значения originalArray для создания нового массива и присваивает его переменной copyArray. Как видно, добавление нового значения в исходный массив не влияет на скопированный массив.

2. Объединение массива

Вот пример, демонстрирующий, как можно использовать оператор расширения для объединения массивов.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];
let arr4 = [...arr1, ...arr2, ...arr3];
console.log(arr4); // logs [1, 2, 3, 4, 5, 6, 7, 8, 9]

3. Копирование объекта

Оператор распространения можно использовать для копирования объекта. Вот пример:

let actor = {
    name: 'Christian Bale',
    born: '01/30/1974',
    nationality: 'British',
    movie: {
        name: 'Batman Begins',
        director: ' Christopher Nolan',
        year: 2005
    }
}
let copiedActor = { ...actor };
console.log(copiedActor.name); // logs Christian Bale
console.log(copiedActor.movie.name); // logs Batman Begins
actor.name = 'Robert Downy Jr.';
actor.movie.name = 'Ironman';
console.log(copiedActor.name); // logs Christian Bale
console.log(copiedActor.movie.name); // logs Ironman

Вложенный объект фильма — это всего лишь поверхностная, а не глубокая копия. Таким образом, если какое-либо свойство объекта фильма будет изменено, это также повлияет на свойство фильма скопированного объекта. Чтобы создать глубокую копию вложенного объекта, мы также должны использовать оператор распространения для их копирования, как показано ниже.

let copiedActor = { ...actor, movie: { ...actor.movie } };

4. Объединение объектов

В следующем примере показано, как использовать оператор распространения для объединения нескольких объектов.

let carEngine = {
    power: 425,
    torque: 425
}
let carDimensions = {
    length: 4580,
    width: 2045,
    height: 1135
}
let car = { ...carEngine, ...carDimensions }
console.log(car); // logs {power: 425, torque: 425, length: 4580, width: 2045, height: 1135}

В приведенном выше примере оператор let car = { …carEngine, …carDimensions } объединяет свойства объектов carEngine и carDimensions и присваивает их объекту автомобиля.

Выполнение неизменяемых операций над массивами и объектами

Существует несколько традиционных методов работы с массивами, таких как push, unshift и splice, которые могут изменять массив, но они также изменяют исходный массив. Однако можно добиться того же результата, не меняя исходный массив, используя оператор расширения, как показано в примерах ниже.

1. Добавление элементов в конец массива

let numbers = [1, 2, 3];
// Adding item to the end of the array, similar to push
let newNumbers = [...numbers, 4, 5];
console.log(numbers); // logs [1, 2, 3]
console.log(newNumbers); // logs [1, 2, 3, 4, 5]

2. Добавление элементов в начало массива

let colors = ['cyan', 'gold'];
// Adding items at the beginning of the array, similar to unshift
let newColors = ['aqua', 'black', ...colors];
console.log(colors); // logs ["cyan", "gold"]
console.log(newColors); // logs ["aqua", "black", "cyan", "gold"]

Аналогичным образом мы можем смоделировать операцию сращивания, как показано ниже.

let colors = ['aqua', 'black', 'cyan', 'gold'];
//Simulating splice
//Removing ‘black’; adding ‘white’ and ‘silver’
let newColors = [...colors.slice(0, 1), 'white', 'silver', ...colors.slice(2)]
console.log(newColors); // logs  ["aqua", "white", "silver", "cyan", "gold"]

3. Изменение объекта

Оператор распространения может создать новый объект и изменить его свойства, не изменяя исходный объект.

let car = {
    power: 425,
    torque: 425,
    length: 4580,
    width: 2045,
    height: 1135
}
let newCar = { ...car, length: 4600, width: 2100 };
console.log(newCar); // logs {power: 425, torque: 425, length: 4600, width: 2100, height: 1135}

В приведенном выше примере оператор let newCar = { …car, length: 4600, width: 2100 }; копирует объект автомобиля в объект newCar с новыми значениями свойств длины и ширины.