Что такое три точки (…) или оператор спреда в Javascript?

Что такое оператор спреда? Каково использование оператора спреда? Как использовать оператор распространения в коде JavaScript?

оператор расширения, синтаксис расширения или 3 точки (…) — это тип синтаксиса в JavaScript, который используется как при вызовах функций, так и в массивы/объекты. Он имеет множество различных применений, поэтому давайте посмотрим, как мы используем синтаксис распространения в реальном коде JavaScript.

В вызовах функций

Мы можем использовать 3 точки в вызовах функций JavaScript, чтобы преобразовать массив в набор аргументов для функции. Давайте посмотрим на пример. Ниже наш массив преобразуется в значения для x, y, z и a.

let numbers = [ 1, 2, 3, 4 ];
let myFunction = function(x, y, z, a) {
    return x + y + z + a;
}
// Returns 10
myFunction(...numbers);

Это можно комбинировать с другими значениями, поэтому следующее также допустимо, используя ту же функцию, что и раньше:

let numbers = [ 1, 2 ];
// Returns 15 (i.e. 5 + 7 + 1 + 2)
myFunction(5, 7, ...numbers);

Это также можно использовать при вызове конструктора с new, например:

let numbers = [ 1999, 26, 3 ];
let thisDate = new Date(...number);

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

Еще один полезный способ использования синтаксиса распространения — это объединение массивов. Например, мы можем объединить два отдельных массива в новый, используя два синтаксиса расширения:

let x = [ 1, 2, 3 ];
let y = [ 4, 5, 6 ];
// Returns [ 1, 2, 3, 4, 5, 6 ]
let newArray = [ ...x, ...y ];

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

let x = [ 1, 2 ];
// Returns [] 4, 5, 1, 2 ]
let newArray = [ 4, 5, ...x ];

Объединить объекты

Наконец, мы можем использовать синтаксис распространения для объединения объектов. В приведенном ниже примере мы объединяем два объекта с парами ключ/значение в один объект:

let obj1 = { name: "John" };
let obj2 = { age: 114 };
// Returns { name: "John", age: 114 }
let newObj = { ...obj1, ...obj2 };

Если мы попытаемся объединить два объекта и есть дублирующийся ключ, второй объект будет иметь приоритет и перезапишет первый, как показано ниже:

let obj1 = { name: "John" };
let obj2 = { name: "Jake" };
// Returns { name: "Jake" }
let newObj = { ...obj1, ...obj2 };

Вот как работает расширенный синтаксис — он позволяет нам легко запускать функции с массивами и хорош для слияния объектов и массивов. Вы можете найти больше руководств по JavaScript внизу этой страницы.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.