Примеры использования синтаксиса распространения

Когда я думаю об удивительных возможностях EcmaScript6, одна из первых супер крутых вещей, которая приходит мне в голову, - это «Синтаксис распространения» или «Оператор распространения». Эта функция - один из самых полезных приемов для управления деструктуризацией большого количества данных и объектов. Поэтому я покажу вам все варианты использования, которые обнаружил во время работы.

1. Слияние массивов

Когда вам нужно безопасно объединить два массива (подробнее о слиянии массивов здесь):

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr1Plusarr2 = [...arr1, ...arr2];
const newArrayMerged = [0, ...arr1, ...arr2];
console.log(arr1Plusarr2); // [1, 2, 3, 4]
console.log(newArrayMerged); // [0, 1, 2, 3, 4]

2. Объединение объектов

Когда вам нужно объединить свойства двух разных объектов:

const object1 = { b: 2 };
const object2 = { c: 3 };
const object1PlusObject2 = { ...object1, ...object2 };
const newObjectMerged = { a: 1, ...object1, ...object2 };
console.log(object1PlusObject2); // { b: 2, c: 3 }
console.log(newObjectMerged); // { a: 1, b: 2, c: 3 }

3. Разрушение массива

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

const bigArray = [0, 1, 2, 3, 4];
const [index0, index1, ...rest] = bigArray;
console.log(index0); // 0
console.log(index1); // 1
console.log(rest); // [2, 3, 4]

4. Разрушение объекта.

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

const mainObject = { a: 1, b: 2, c: 3, d: 4, e: 5 };
const { a, b, ...rest } = mainObject;
console.log(a); // 1
console.log(a); // 2
console.log(rest); // { c: 3, d: 4, e: 5 }

5. Функциональные параметры

Когда вам нужно передать функции много параметров, независимо от их количества. Параметры поступили в виде массива:

const addAll = (...params) => params.reduce(
  (acc, current) => acc + current,
  0
);
addAll(1, 2, 3); // 6
addAll(1, 2, 3, 1, 1, 1, 1); // 10
addAll(3, 5); // 8

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

const subwaySandwich = (bread, size, ...ingredients) => {
  console.log(bread); // Italian
  console.log(size); // 15cm
  console.log(ingredients); // ['mustard', 'mayo']
}
subwaySandwich(
  'Italian',
  '15cm',
  'mustard',
  'mayo'
);

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

const person = ({ age, gender, ...rest }) => {
  console.log(age); // 15
  console.log(gender); // female
  console.log(rest); // { hair: 'brun', eyes: 'blue' }
}
person({
  age: 15,
  gender: 'female',
  hair: 'brun',
  eyes: 'blue',
})

6. С условиями

Да! Вы также можете использовать оператор распространения для управления объектом (или массивом) условно: вам просто нужно заключить его в круглые скобки и создать условие.

const carBase = { wheels: 4, doors: 4 };
const isVehicle = true;
const renault = {
  ...(isVehicle && carBase),
  country: 'France',
}
console.log(renault) // { wheels: 4, doors: 4, country: 'France' }

Итак, как вы можете видеть, оператор распространения - это современный синтаксис для манипулирования объектами и структурами данных, предлагающий вам возможность делать больше с меньшими затратами.