Два исключительных варианта использования оператора spread, о которых вы можете не знать

Одна из самых популярных функций, используемых в javascript после Ecmascript 2015, без сомнения, является оператор spread. В этой короткой статье «Знаете ли вы…» мы рассмотрим несколько исключительных вариантов использования, которые мы считаем очень полезными, но которые не так хорошо известны.

Выборочный/Условный Spread

Добавление свойства и значения объекта на основе условия:

const isDog = true;

const obj = {
    key: 'value',
    ...(isDog && { woof: true })};

Таким образом, мы можем условно добавить свойство woof без необходимости использования какой-либо логики if/else или аналогичных подходов … если условие возвращает true, оно добавит свойство, в противном случае объект останется нетронутым.

результат в console.log(obj)

{ key: 'value', woof: true };

Важное примечание: условный spread, работает только внутри объекта, если мы попытаемся сделать это вне его, мы получим SyntaxError, если вы хотите немного больше узнать, почему это происходит, вы можете почитать этот разговор, который у нас был в реддит

Копирование объектов и исключение выбранных свойств

Допустим, нам нужны характеристики определенного процессора CPU, и мы хотели бы сохранить большинство из них, за исключением ssd:

// Original CPU
const CPU = {
    ram: '32gb',
    ssd: '64gb',
    micro: 'i7'
};

// new CPU copy without the 64GB ssd
const { ssd, ...newCPU } = CPU;

Теперь, если вы выведете в console.log newCPU, вы увидите, что он больше не содержит свойство ssd, это произошло потому, что мы исключили это свойство из остальных, которые были включены в newCPU, используя оператор rest.

результат в console.log(newCPU)

{ ram: '16gb', micro: 'i7' };

Напомним что такое оператор rest.

Оператор ... интерпретируется по-разному, в зависимости от контекста применения. Spread используется для разделения коллекций на отдельные элементы, а rest, наоборот, для соединения отдельных значений в массив.

Например:
var log = function(...args) {
console.log(args);
};
log(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

Есть вы знаете еще необычные варианты использования оператора spread, поделитесь ими на reddit или в твиттере по нашим ссылкам.

Хотите оставить комментарий? Сделай это в twitter

Оригинальная статья Enmanuel Durán — Two exceptional use cases for the spread operator you may not know of