9.1 Spread (оператор распаковки)
Операции rest и spread в JavaScript предоставляют широкие возможности для работы с массивами, объектами и функциями. Эти операции помогают упрощать код, делая его более выразительным и гибким. В этой лекции мы подробно рассмотрим основные понятия rest и spread, а также их примеры использования.
Оператор spread (...) позволяет «распаковывать» массивы и объекты в местах, где ожидаются нуль или более элементов. Это может быть полезно при копировании, объединении массивов или объектов, а также при передаче аргументов в функции.
Пример 1: Копирование массива
В этом примере copiedArray является копией originalArray.
Тут оператор … распаковывает массив в виде списка переменных, а опертор [] запаковывает набор переменных в новый массив:
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // Выведет: [1, 2, 3]
Пример 2: Объединение массивов
В этом примере два массива array1 и array2 объединяются в один массив combinedArray.
Тут оператор … распаковывает оба массива в виде списка переменных, а опертор [] запаковывает набор переменных в новый массив:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // Выведет: [1, 2, 3, 4, 5, 6]
Пример 3: Передача аргументов в функцию
В этом примере массив numbers распаковывается в три аргумента для функции sum():
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Выведет: 6
Пример 4: Копирование объекта
В этом примере copiedObject является копией originalObject:
const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // Выведет: { a: 1, b: 2 }
Пример 5: Объединение объектов
В этом примере два объекта obj1 и obj2 объединяются в один объект combinedObject:
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // Выведет: { a: 1, b: 2, c: 3, d: 4 }
9.2 Rest (оператор остаточных параметров)
Оператор rest (...) позволяет собирать несколько элементов в массив. Это особенно полезно при работе с функциями, которые принимают переменное количество аргументов, а также при деструктуризации массивов и объектов.
Пример 1: Остаточные параметры в функциях
В этом примере функция sum() принимает любое количество аргументов и суммирует их, используя метод reduce().
Метод reduce() в JavaScript применяется к массивам и используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата.
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // Выведет: 6
console.log(sum(4, 5, 6, 7)); // Выведет: 22
Пример 2: Деструктуризация массивов с rest
В этом примере первые два элемента массива присваиваются переменным first и second, а остальные элементы собираются в массив rest:
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // Выведет: 1
console.log(second); // Выведет: 2
console.log(rest); // Выведет: [3, 4, 5]
Пример 3: Деструктуризация объектов с rest
В этом примере свойства a и b извлекаются в отдельные переменные, а остальные свойства собираются в объект rest:
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // Выведет: 1
console.log(b); // Выведет: 2
console.log(rest); // Выведет: { c: 3, d: 4 }
9.3 Применение rest и spread в реальных задачах
Пример 1: Объединение массивов с условием
В этом примере пользовательские настройки userSettings переопределяют значения по умолчанию defaultSettings:
const defaultSettings = { theme: 'dark', showNotifications: true };
const userSettings = { showNotifications: false, fontSize: 14 };
const settings = { ...defaultSettings, ...userSettings };
console.log(settings); // Выведет: { theme: 'dark', showNotifications: false, fontSize: 14 }
Пример 2: Разделение массива на части
В этом примере массив numbers разделяется на две части после извлечения первых двух элементов:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const [first, second, ...rest] = numbers;
const firstHalf = rest.slice(0, Math.floor(rest.length / 2));
const secondHalf = rest.slice(Math.floor(rest.length / 2));
console.log(firstHalf); // Выведет: [3, 4, 5, 6]
console.log(secondHalf); // Выведет: [7, 8, 9, 10]
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ