6 способів використання оператора розпаковки в JS

27 квітня 2017 16:00 OlegWock 948 0

Завдяки ES6 та Babel написання JavaScript стало ще приємнішим і динамічним. Тепер нас не дивують ні концептуально нові мови, ні новий спосіб парсингу, як от 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 }

Джерело перекладу

948 8

Схожі матеріали:

Коментарі:

Авторизуйтесь, щоб залишити коментар.