ssuuuk

Используем spread оператор по максимуму

target="_blank">instagram, fb, tg

Клонирование массива

Мы можем использовать spread оператор для копирования массива, но это будет не глубокое копирование. Допустим, у нас есть массив с именем arr1, и мы хотим создать клон этого массива с именем arr2.


const arr1 [1,2,3];

const arr2 [...arr1];

console.log(arr2);

// [ 1, 2, 3 ]


Таким образом, мы можем скопировать массив, имейте в виду, что он не работает для многоуровневых массивов или массивов функциями.

Объединение массивов

Допустим, у нас есть два массива, которые мы хотим объединить в один. Мы могли бы использовать метод concat. Но spread оператор упрощает этот процесс:


const arr1 [1,2,3];

const arr2 [4,5,6];

const arr3 [...arr1, ...arr2];

console.log(arr3);

// [ 1, 2, 3, 4, 5, 6 ]


Можно указать, какой из них должен быть первым:


const arr3 = [...arr2, ...arr1];

console.log(arr3);

[4, 5, 6, 1, 2, 3];


Это хороший способ комбинировать массивы. Количество, которым мы можем оперировать бесконечно:


const output = [...arr1, ...arr2, ...arr3, ...arr4];


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

Когда нам нужно добавить несколько элементов в массив, мы можем воспользоваться Array.push, но ... также будет работать:


let arr1 = ['this', 'is', 'an'];

arr1 = [...arr1, 'array'];

console.log(arr1);

// [ 'this', 'is', 'an', 'array' ]


Можно передать и несколько строк:


arr1 = [...arr1, 'array', 'cool'];

console.log(arr1);

// [ 'this', 'is', 'an', 'array', 'cool' ]


Добавление свойства к объекту

Допустим, у нас есть объект user, но у него отсутствует свойство age.


cconst user = { firstname: 'Chris', lastname: 'Bongers' };


Чтобы добавить свойство к этому объекту, мы снова можем использовать spread.


const output = {...user, age: 31};


Весь код будет выглядеть так:


const user = { firstname: 'Chris', lastname: 'Bongers' }; const output = {...user, age: 31}; console.log(output); // { firstname: 'Chris', lastname: 'Bongers', age: 31 }


Функуия Math()

Допустим, у нас есть массив чисел, и мы хотим получить наименьшее, наибольшее или сумму этих чисел. Отличная возможность воспользоваться spread оператором! Вот наш массив:


const arr1 = [1, -1, 0, 5, 3];


Чтобы получить наименьшее число, мы можем использовать оператор ... и метод Math.min:


const arr1 = [1, -1, 0, 5, 3];

const min = Math.min(...arr1);

console.log(min);

// -1


Чтобы получить максимальное число, мы можем использовать метод Math.max


const arr1 = [1, -1, 0, 5, 3];

const max = Math.max(...arr1);

console.log(max);

// 5


Аргументы функции

Допустим, у нас есть функция, которая принимает три аргумента:


const myFunc(x1, x2, x3) => { console.log(x1); console.log(x2); console.log(x3); }


Мы могли бы вызвать эту функцию следующим образом:


myFunc(1, 2, 3);


Но что произойдет, если у нас есть массив, который мы хотим передать?


const arr1 = [1, 2, 3];


Теперь мы можем использовать оператор ...:


myFunc(...arr1);

// 1

// 2

// 3


Как видите, мы разделили массив на три отдельных аргумента, которые передаем функции. Полный вызов будет выглядеть так:


const myFunc = (x1, x2, x3) => { console.log(x1); console.log(x2); console.log(x3); }; const arr1 = [1, 2, 3]; myFunc(...arr1); // 1 // 2 // 3



Преобразование nodeList в массив

Допустим, вы использовали ..., чтобы получить все блоки на своей странице. Они появятся в виде списка узлов. Затем мы можем использовать spread оператор, чтобы преобразовать этот список узлов в массив:


const el = [...document.querySelectorAll('div')];

console.log(el);

// (3) [div, div, div]


Теперь мы можем легко перебрать эти элементы, потому что они находятся в формате массива.


const el = [...document.querySelectorAll('div')]; el.forEach(item => { console.log(item); }); // ❮div❯❮/div❯ // ❮div❯❮/div❯ // ❮div❯❮/div❯


Деструктуризация объекта

spread оператор очень удобно использовать при деструктуризация объекта. Допустим, у нас снова есть объект user:


const user = { firstname: 'Chris', lastname: 'Bongers', age: 31 };


Мы можем деструктурировать его как отдельные переменные, используя ....


const {firstname, ...rest} = user;

console.log(firstname);

console.log(rest);

// 'Chris'

// { lastname: 'Bongers', age: 31 }


Разделение строки

Последний вариант использования оператора ... - разделить строку. Допустим, у нас есть следующая строка:


const str = 'Hello';


Если мы используем ... в этой строке, мы получим массив букв:


const str = 'Hello';

const arr = [...str];

console.log(arr);

// [ 'H', 'e', 'l', 'l', 'o' ]


Приятного кодинга!


©2019