Объект JavaScript - это набор свойств, в котором каждое свойство имеет имя и значение, подобное хэшу, карте или словарю на других языках.
- Имя свойства может быть любой строкой, включая пустую строку.
- Значением может быть любое значение, например строка, логическое значение, число или значение NULL, но оно не может быть неопределенным.
- Свойства объекта можно определить даже после того, как вы начнете использовать объект.
Давайте посмотрим, как мы можем создавать объекты в JavaScript.
- Создание объекта с использованием нового ключевого слова
2. Создание объекта с помощью объектных литералов.
- Таким образом мы обычно используем фигурные скобки ’{}’.
- Здесь мы используем оператор точки или скобки для добавления ключей.
** Примечание. Мы используем скобки, когда наши объектные ключи являются динамическими и могут содержать пробелы.
var obj = {} obj.first Name = 'Nikhil' // throw an error but with brackets notation it will work obj['first Name']='Nikhil' console.log(obj) // {first Name: "Nikhil"}
3. Создание объекта с использованием строковых литералов объекта.
Проблема 1. Мутация объекта с объектами одного уровня
Когда мы копируем один объект в другой, он копируется по ссылке.
- В приведенном ниже примере вы можете увидеть, как obj4 копируется в obj5, и когда мы обновляем obj5 firstName, оно также обновляется в obj4.
Решение 1. Object.assign
- Мы можем решить указанную выше проблему, используя Object.assign ({}, sourceObj)
- Object.assign создает новый объект и копирует в него исходный объект.
** Обратите внимание, что Object.assign ({}, sourceObj) полезно только для неглубокой копии
Проблема 2 - Мутация объекта с помощью объектов вложенного уровня
- Object.assign решает проблему, если у нас есть объект одного уровня.
- Если у нас есть вложенный объект, такой как obj4, содержащий адрес другого объекта, как показано ниже, возникает другая проблема со ссылками.
Решение 2 - Глубокая копия
- Большинство людей используют внешнюю библиотеку, например lodash, для решения этой проблемы.
- Чтобы решить проблему 2, мы напишем функцию с именем deepCopy.
Решение с использованием ES6
- Мелкая копия оператора распространения
- Оператор распространения создает новую копию (неглубокую) объекта.
- Поскольку оператор распространения делает неглубокую копию, у него также есть проблема с глубоким копированием, как показано ниже.
2. Глубокая копия оператора распространения
- Используя оператор распространения, если у вас есть вложенные объекты, вы можете создать свою собственную функцию deepcopy, как мы делали это раньше, или вы можете обновить вложенный объект, передав его свойство адреса целиком новым объектом.
- Как показано ниже, свойство адреса перезапишет свойство адреса объекта obj4.
- Примечание. Вышеуказанный метод не является предпочтительным, если вы не уверены в уровне вложенности объекта
удалить оператора
- Для удаления свойства из объекта будет использоваться оператор удаления.
delete object.property
- Оператор delete удаляет конкретное свойство из объекта, как показано ниже.
let obj6= { firstName: "Nikhil", lastName: "Karkra" }; console.log(obj6.firstName); // "Nikhil delete obj6.firstName; console.log(appObj); // {lastName: "Karkra"}
Готово, надеюсь, вам понравилась статья! Если вам понравился мой первый пост, вы можете поставить ему ❤ или поделиться им. Спасибо! :)
Прокомментируйте свое предложение по улучшению и обсудите больше объектов в JS.
Разместите свой собственный блог в C2E Blog
Хотите писать для CodeToExpress? Мы будем рады видеть вас техническим писателем. Отправьте нам письмо со ссылкой на ваш черновик на [email protected]