Spread Оператор¶

Основная задача spread оператора - это распространить элементы массива или объекта. Проще всего объяснить на примере.

Apply¶

Популярный кейс - это распространение массива в аргументы функции. Раньше вы использовали для этого Function.prototype.apply:

1
2
3

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

Сейчас вы можете сделать это, просто поставив ... перед аргументами:

1
2
3

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

Здесь мы распространили массив args в аргументы функции.

Деструктурирование¶

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

1
2

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

Мотивация здесь в том, чтобы упростить захватывание оставшихся элементов массива.

Присваивание массива¶

Spread оператор позволяет легко создавать расширенную версию массива в другом массиве. Это показано на примере ниже:

1
2
3

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

Вы можете поставить расширенный массив в любом месте и получить ожидаемый результат:

1
2
3

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

Распространение объекта¶

Вы можете распространить один объект в другой объект. Общий случай использования - это простое добавление свойства к объекту без изменения оригинального объекта:

1
2
3

const point2D = { x: 1, y: 2 };
/** Создание нового объекта с использованием всех свойств point2D вместе с z */
const point3D = { ...point2D, z: 3 };

Для объектов положение spread оператора имеет значение. Это работает как Object.assign: то, что приходит первым, "переопределяется" тем, что приходит позже:

1
2
3
4
5

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}

Другим распространенным вариантом использования является простое поверхностное расширение:

1
2
3
4
5

const foo = { a: 1, b: 2, c: 0 };
const bar = { c: 1, d: 2 };
/** Объединение foo и bar */
const fooBar = { ...foo, ...bar };
// fooBar теперь {a: 1, b: 2, c: 1, d: 2}

Заключение¶

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

Комментарии