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

Spread the love

Одна из самых популярных функций, используемых в 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

Была ли вам полезна эта статья?

[1 / 5]

Spread the love

Editorial Team

Next Используем zip() для парной итерации »

Previous « Функции высшего порядка и их использование в javascript

View Comments

Анонимно says:

08.02.2021 at 07:17

Когда пишу свои библиотеки-велосипеды, часто использую следующий трюк. Он позволяет в "библиотечный" класс передать объект с параметрами, не затирая при этом свойства дефолтного объекта, которые не были указаны:
const defConfig = {
direction: "right",
fullWidth: true
}

class MyLib {
constructor(config = {} ) {
this.config = { ...defConfig, ...config }
}
}

Vue 3.4 Новая механика v-model компонента

Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…

12 месяцев ago