В ES6 есть реструктуризация объектов для создания переменных из свойств объекта.

Мы можем создавать объекты с {...} и свойствами, которые имеют пару ключ-значение. Ключ имеет '' вокруг него, а : между ключом и значением. Значение может быть любого типа.

const name = {
    'firstName': 'John',
    'lastName': 'Smith'
}

Мы используем нотацию . для получения значений свойств.

let firstName = name.firstName;

Деструктуризация объекта

Мы можем использовать деструктуризацию объекта Javascript для извлечения значений из свойства объекта или массива и присвоения их переменной. Имя ключа объекта — это переменная, которая содержит значение.

const { firstName } = name;

В приведенном выше примере мы извлекаем свойство объекта firstName и помещаем внутрь {} . Это имя переменной, которая содержит значение свойства. Мы можем использовать let или const для типа переменных.

Мы можем извлечь несколько значений из свойств объекта.

const {firstName, lastName} = name;

Добавить новую переменную и значение по умолчанию

const { firstName, lastName, age=34 } = user;

Мы добавляем age=34 при деструктуризации. Мы можем объединить свойства firstName lastName в новое свойство fullName

const { fisrtName, lastName, fullName=`${firstName} ${lastName}` } = user;

Добавить псевдонимы

const { fristName: fName } = name;
console.log(fName) // John

Деструктуризация вложенных объектов

const name = {
    'firstName': 'John',
    'lastName': 'Smith',
    'address':{
       'street': '43 S. Fox st',
       'city': 'Denver',
       'zip': 80232
}
const { address: { street } } = name

Вы должны начать с верхнего уровня и спускаться вниз по иерархии, пока не достигнете значения, которое хотите извлечь.

Распространение синтаксиса в JavaScript

Синтаксис спреда (также известный как оператор спреда) — еще одна замечательная функция ES6. Как видно из названия, он принимает итерируемый объект (например, массив) и расширяет (распространяет) его на отдельные элементы.

Мы также можем расширять объекты, используя синтаксис распространения, и копировать его свойства enumerable в новый объект.

Расширенный синтаксис помогает нам клонировать объект с самым простым синтаксисом, используя фигурные скобки и три точки {...}.

const clone_some_object = {...some_object}

Благодаря синтаксису распространения мы можем клонировать, обновлять и объединять объекты immutable способом. Неизменяемость помогает уменьшить любые случайные или непреднамеренные изменения исходного (исходного) объекта.

Синтаксис деструктуризации объекта и распространения — это не одно и то же в JavaScript.

Создать клон объекта

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

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}
const clone = {...user} // Output, {name: "Alex", address: "15th Park Avenue", age: 43}
clone === user; // Output, false

В качестве альтернативы вы можете использовать object.assign() для создания клона объекта. Однако синтаксис расширения намного точнее и намного короче.

Синтаксис расширения выполняет поверхностную копию объекта. Это означает, что ни один из экземпляров вложенных объектов не клонирован.

Обновление вложенных объектов

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

У нас есть объект user со свойством department. Значением свойства department является объект, у которого есть другой вложенный объект с его свойством address.

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43,
    'department':{
        'name': 'Sales',
        'Shift': 'Morning',
        'address': {
            'city': 'Bangalore',
            'street': '7th Residency Rd',
            'zip': 560001
        }
    }
}

Теперь, как мы можем добавить новое свойство с именем number со значением, скажем, 7 для объекта department? Что ж, мы могли бы попробовать следующий код, чтобы добиться этого (но это было бы ошибкой):

const updated = {
    ...user, 
    department: {'number': 7}
}
console.log(updated);

Выполнив его, вы поймете, что код заменит весь объект отдела новым значением {'number': 7}. Это не то, что мы хотели!

Как это исправить? Нам нужно распространить свойства вложенного объекта, а также добавить/обновить его. Вот правильный синтаксис, который добавит новое свойство number со значением 7 в объект department без замены его значения:

const updated = {
    ...user, 
    department: {
        ...user.department, 
        'number': 7
    }
};
console.log(updated);

Параметр Rest в JavaScript

Параметр Rest немного противоположен синтаксису spread. В то время как синтаксис расширения помогает расширять или распространять элементы и свойства, параметр rest помогает собирать их вместе.

В случае объектов параметр rest в основном используется с синтаксисом деструктурирования для объединения оставшихся свойств в новом объекте, с которым вы работаете.

Давайте посмотрим на пример следующего объекта user:

const user = { 
    'name': 'Alex',
    'address': '15th Park Avenue',
    'age': 43
}

Мы знаем, как деструктурировать свойство age, чтобы создать переменную и присвоить ей значение. Как насчет создания другого объекта одновременно с остальными свойствами объекта user? Ну вот:

const {age, ...rest} = user;
console.log(age, rest);

Вывод будет:

В выводе мы видим, что значение age равно 43. rest parameter объединяет остальные свойства объекта user, name и address, в отдельный объект.

Ссылки:

https://www.freecodecamp.org/news/javascript-object-destructuring-spread-operator-rest-parameter/