spread-operator.md

Spread Operator

Основна мета "Spread" оператора (...) — розповсюдження елементів масиву або об’єкта. Це найкраще пояснити на прикладах.

Apply

Поширеним випадком використання є розподіл масиву на аргументи функції. Раніше вам потрібно було використовувати Function.prototype.apply:

function foo(x, y, z) { }
var args = [0, 1, 2];
foo.apply(null, args);

Зараз ви можете зробити це простіше за допомогою оператора ...:

function foo(x, y, z) { }
var args = [0, 1, 2];
foo(...args);

Тут ми розширюєме масив argsв arguments.

Destructuring

Деструктурізація.

Ви вже познаймилися з одним прикладом destructuring:

var [x, y, ...remaining] = [1, 2, 3, 4];
console.log(x, y, remaining); // 1,2,[3,4]

Мотивація тут полягає в тому, щоб просто полегшити вам захоплення решти елементів масиву під час деструктуризації.

Array Assignment

Присвоєння масиву.

Оператор поширення дозволяє легко розмістити розширену версію масиву в інший масив. Це показано на прикладі нижче:

ʼ

var list = [1, 2];
list = [...list, 3, 4];
console.log(list); // [1,2,3,4]

Ви маєте змогу помістити розширений масив в будь-яку позицію масива:

var list = [1, 2];
list = [0, ...list, 4];
console.log(list); // [0,1,2,4]

Object spread

Розширення обʼєкту. Ві также можете расширить один обʼект іншим. Типичною є задача розжирення обʼєкту без зміни його базового стану:

const point2D = {x: 1, y: 2};
/** Create a new object by using all the point2D props along with z */
const point3D = {...point2D, z: 3};

Для обʼєктом місце, куди ви дадаєте розширення, має значення. Це працює схоже на Object.assign, і робить те, що ви очікуєте: те, що приходить першим, «замінюється» тим, що приходить пізніше:

const point2D = {x: 1, y: 2};
const anotherPoint3D = {x: 5, z: 4, ...point2D};
console.log(anotherPoint3D); // {x: 1, y: 2, z: 4}
const yetAnotherPoint3D = {...point2D, x: 5, z: 4}
console.log(yetAnotherPoint3D); // {x: 5, y: 2, z: 4}

Іншим поширеним випадком використання є просте дрібне розширення:

const foo = {a: 1, b: 2, c: 0};
const bar = {c: 1, d: 2};
/** Merge foo and bar */
const fooBar = {...foo, ...bar};
// fooBar is now {a: 1, b: 2, c: 1, d: 2}

Summary

apply ви часто використовуєте в JavaScript, тому було би добре мати кращий синтаксис, без null для this. Крім того, наявність спеціального синтаксису для переміщення масивів з (деструктурування) або в (присвоєння) інших масивів забезпечує чіткий синтаксис для обробки часткових масивів.