Остаток и распространение объекта в TypeScript

Остаток и распространение объекта — это функции TypeScript, которые позволяют разработчикам легко манипулировать объектами различными способами. Они похожи на синтаксис расширения и остатка, используемый в массивах, но вместо этого используются для объектов. В этой статье мы углубимся в отдых и распространение объектов, а также рассмотрим варианты их использования на примерах.

Объект Отдых

Остаток объекта — это синтаксис, который позволяет разработчикам извлекать оставшиеся свойства объекта и назначать их новому объекту. Это полезно, когда мы хотим создать новый объект, обладающий большинством свойств существующего объекта, но с некоторыми изменениями. Вот пример:

const person = {
  name: 'John',
  age: 30,
  city: 'New York',
  country: 'USA'
};

const { name, ...rest } = person;

console.log(name);  // Output: John
console.log(rest);  // Output: { age: 30, city: 'New York', country: 'USA' }

В приведенном выше коде мы используем объектный остаток для создания нового объекта с именем rest, который содержит все свойства person, кроме name. Мы делаем это, используя синтаксис деструктуризации объекта { name, ...rest } = person. Свойство name извлекается и назначается переменной name, а остальные свойства назначаются новому объекту rest.

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

function printPersonDetails({ name, age }: { name: string, age: number }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const person = {
  name: 'John',
  age: 30,
  city: 'New York',
  country: 'USA'
};

printPersonDetails({ ...person });  // Output: Name: John, Age: 30

В приведенном выше коде мы используем объектный остаток для извлечения свойств name и age из person и передачи их в качестве аргументов функции printPersonDetails. Это позволяет нам передавать в функцию только необходимые свойства, сохраняя при этом исходный объект нетронутым.

Распространение объекта

Распространение объекта — это синтаксис, который позволяет разработчикам копировать свойства одного объекта в другой объект. Это полезно, когда мы хотим объединить свойства нескольких объектов в новый объект. Вот пример:

const person = {
  name: 'John',
  age: 30,
};

const address = {
  city: 'New York',
  country: 'USA',
};

const newPerson = { ...person, ...address };

console.log(newPerson); // Output: { name: 'John', age: 30, city: 'New York', country: 'USA' }

В приведенном выше коде мы используем расширение объекта для копирования свойств person и address в новый объект с именем newPerson. Это создает новый объект со всеми свойствами person и address. Если в обоих объектах есть свойства с одинаковыми именами, значение свойства во втором объекте (в данном случае address) перезапишет значение в первом объекте (в данном случае person).

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

const person = {
  name: 'John',
  age: 30,
  city: 'New York',
  country: 'USA'
};

const newPerson = { ...person, age: 40 };

console.log(newPerson);  // Output:

В приведенном выше коде мы используем расширение объекта для создания нового объекта с именем newPerson, который содержит все свойства person, но со свойством age, измененным на 40. Это создает новый объект с большинством свойств person, но с некоторыми изменениями.

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

const person = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

const newPerson = { ...person };

console.log(newPerson === person);  // Output: false
console.log(newPerson.address === person.address);  // Output: true

В приведенном выше коде мы используем распространение объектов для создания поверхностной копии person. Это создает новый объект со всеми свойствами person, но с новой ссылкой в памяти. Это означает, что newPerson и person не являются одним и тем же объектом, даже если они имеют одинаковые свойства. Однако свойство address по-прежнему ссылается на тот же объект в памяти, потому что мы создаем только неглубокую копию. Чтобы создать глубокую копию, нам нужно было бы использовать библиотеку или написать собственный код для рекурсивного копирования всех свойств.

Заключение

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

Спасибо за прочтение!

Я надеюсь, что вы нашли эту статью полезной. Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставляйте комментарии. Ваши отзывы помогают мне стать лучше.

Не забудь подписаться⭐️

Страница Facebook: https://www.facebook.com/designTechWorld1

Страница в Instagram: https://www.instagram.com/techd.esign/

Канал YouTube: https://www.youtube.com/@tech..Design/

Твиттер: https://twitter.com/sumit_singh2311

Используемое оборудование:

Ноутбук: https://amzn.to/3yKkzaC

Смотрите:https://amzn.to/41cialm

Вы можете предпочесть React Book: https://amzn.to/3Tw29nx

Некоторые дополнительные книги, связанные с языками программирования:

https://amzn.to/3z3tW5s

https://amzn.to/40n4m6O