Написання коду на JavaScript стало більш приємним і динамічним завдяки ES6 та Babel. Тепер нас не дивують ні концептуально нові мови, ні новий спосіб парсингу, як от JSX.
Я великий фанат такої нової фічі як spread-оператор (ми будемо його називати оператором розпакування). Ці три крапки можуть досить кардинально змінити ваш код. В цій статті ми розглянемо декілька корисних кейсів його використання.
Виклик функцій без apply
Раніше для виклику функції, що приймає декілька аргументів потрібно було використовувати Function.prototype.apply, якщо ці аргументи були в вигляді масиву.
function doStuff (x, y, z) { }
var args = [0, 1, 2];
doStuff.apply(null, args);
З новим оператором можна не використовувати метод apply, достатньо лише додати ... перед масивом. Так код стає коротше, чистіше і без null.
doStuff(...args);
Поєднання масивів
Звісно, це можна зробити декількома способами. І оператор розпаковки один з них:
arr1.push(...arr2) // додати елементи в кінець масиву
arr1.unshift(...arr2) // на початок
Якщо ви хочете з'єднати декілька масивів і передати кудись результат, то можна робити так:
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// ["one", "two", "three", "four", "five"]
І синтаксис коротший, і можна контролювати позицію вставки.
Копіювання масивів
Копіювання масивів – досить часта задача, раніше для цього використовували Array.prototype.slice, але зараз і це можна робити за допомогою нового оператора.
var arr = [1,2,3];
var arr2 = [...arr];
arr2.push(4)
Але пам'ятайте, що об'єкти в масиві зберігаються за посиланням, тому це не справжня копія.
Конвертація arguments та NodeList в масив
Як і в випадку з копіюванням масивів, раніше для цього використовували Array.Prototype.slice, тепер це можна зробити коротше і красивіше.
[...document.querySelectorAll('div')]
Також ви можете отримати аргументи функції в вигляді масиву, для цього потрібно лише трохи змінити сигнатуру:
var myFn = function(...args) {
// ...
}
Слід нагадати, що це також можна зробити методом Array.from.
Використання в математичних функціях
Звісно, оператор розпаковує аргументи в будь-яку функцію, але математичні функції – дуже гарний приклад його використання, так як багато з них приймають необмежену кількість аргументів:
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
Веселощі з деструктуризацією
Деструктуризація – це весело, я використовую її дуже часто в своїх React- та Node.js-проектах. Ви можете скористактися деструктуризацією та новим оператором разом для розміщення даних в змінних к вам потрібно:
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
Ще немає коментарів