Как добавить ключ в объект js

Понятие объекта. Добавление информации в объект, вывод

Объекты являются основополагающим понятием любого языка программирования, понятие, которого новички боятся как огня. Давайте поймем, что такое объект, и как с ним работать в JS.

В литературе, синонимом объектов в JS выступают хэши, ассоциативные массивы. Не пугайтесь если встретите такие названия!

Для понимания понятия объект представьте себе комод, ящики которого подписаны.

Для того, чтобы обратиться к ящику, необходимо использовать следующий синтаксис: комод.носки именно такое обращение даст доступ к нужному ящику. Также можно использовать комод.платки и комод.белье . Название ящиков — это ключи объекта, а их содержимое — значение. Говорят, что объект содержит информацию в виде: ключ-значение . Также, часто встречается терминология: свойство-значение.

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

Создание объекта

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

Как я могу добавить пару ключ / значение в объект JavaScript?

Есть два способа добавить новые свойства к объекту:

Используя точечную запись:

Используя обозначение в квадратных скобках:

Первая форма используется, когда вы знаете название свойства. Вторая форма используется, когда имя свойства определяется динамически. Как в этом примере:

Массив JavaScript real может быть создан с использованием:

Буквенное обозначение Array:

Обозначение конструктора Array:

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

Вы можете добавить это так:

Ответы, предлагающие ввести объект с переменной key3 , будут работать только в том случае, если значение key3 было ‘key3’ .

Либо obj[‘key3’] = value3 , либо obj.key3 = value3 добавят новую пару в obj .

Однако я знаю, что jQuery не упоминался, но если вы используете его, вы можете добавить объект через $.extend(obj,) . Например.:

jQuery. extension (target [, object1] [, objectN]) объединяет содержимое два или более объектов вместе в первый объект.

И это также позволяет рекурсивные добавления / модификации с $.extend(true,object1,object2); :

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

Чтобы добавить пару ключ-значение к объекту, чтобы for in работал с этим элементом, сначала сделайте следующее:

Мы можем сделать это и таким образом.

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

Два наиболее часто используемых способа уже упоминались в большинстве ответов

Еще один способ определить свойство — использовать Object.defineProperty ()

Этот метод полезен, когда вы хотите иметь больше контроля при определении свойства. Определенное свойство может быть установлено как перечисляемое, настраиваемое и доступное для записи пользователем.

Лучший способ достичь того же самого указан ниже:

Вы можете создать класс с ответом @ Ionuț G. Stan

Создание нового объекта с последним классом:

Я новичок в JavaScript, комментарии приветствуются. Работает для меня.

Краткий и изящный способ в следующей спецификации Javascript (кандидат на стадии 3):

Он работает уже в node.js, начиная с версии 8.6.0.

Vivaldi, Chrome, Opera и Firefox в новейших выпусках также знают эту функцию, но до сегодняшнего дня Mirosoft — ни в Internet Explorer, ни в Edge.

Потому что ваш arr на самом деле не массив . Это объект-прототип. Реальный массив будет:

Но это все еще не правильно. На самом деле это должно быть:

Просто добавив свойства:

И мы хотим добавить prop2 : 2 к этому объекту, это самые удобные опции:

1. Точечный оператор: object.prop2 = 2;
2. квадратные скобки: object[‘prop2’] = 2;

Так какой же мы используем тогда?

Точечный оператор имеет более чистый синтаксис и должен использоваться по умолчанию (imo). Однако оператор точка не может добавлять динамические ключи к объекту, что может быть очень полезно в некоторых случаях. Вот пример:

Объединение объектов:

Когда мы хотим объединить свойства двух объектов, это самые удобные опции:

1. Object.assign() , принимает целевой объект в качестве аргумента и один или несколько исходных объектов и объединит их вместе. Например:

1. Оператор распространения объекта .

Какой из них мы используем?

• Синтаксис распространения является менее многословным и должен использоваться в качестве imo по умолчанию. Не забудьте перенести этот синтаксис в синтаксис, который поддерживается всеми браузерами, потому что он относительно новый.
• Object.assign() более динамичен, потому что у нас есть доступ ко всем объектам, которые передаются в качестве аргументов, и мы можем манипулировать ими до того, как они будут назначены новому объекту.

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

Вы бы использовали это таким образом:

Поскольку функция-прототип возвращает this , вы можете продолжить цепочку .push до конца вашей obj переменной: obj.push(. ).push(. ).push(. );

Другая особенность заключается в том, что вы можете передать массив или другой объект в качестве значения в аргументах функции push. Посмотрите мою скрипку для рабочего примера: http://jsfiddle.net/7tEme/

Я полюбил LoDash / Подчеркивайте при написании больших проектов.

Добавление obj[‘key’] или obj.key — это сплошные чистые ответы JavaScript. Однако обе библиотеки LoDash и Underscore предоставляют много дополнительных удобных функций при работе с объектами и массивами в целом.

В зависимости от того, что вы ищете, есть две конкретные функции, которые могут быть полезны для использования и предоставляют функциональность, подобную ощущению arr.push() . Для получения дополнительной информации проверьте документы, у них есть несколько отличных примеров.

_.merge (только Lodash)

Второй объект будет перезаписан или добавлен в базовый объект. undefined значения не копируются.

_.extend / _.assign

Второй объект будет перезаписан или добавлен в базовый объект. undefined будет скопирован.

_.defaults

Второй объект содержит значения по умолчанию, которые будут добавлены к базовому объекту, если они не существуют. Значения undefined будут скопированы, если ключ уже существует.

$ .extend

Кроме того, стоит упомянуть jQuery.extend, он работает аналогично _.merge и может быть лучшим вариантом, если вы уже используете jQuery.

Второй объект будет перезаписан или добавлен в базовый объект. undefined значения не копируются.

Object.assign ( )

Возможно, стоит упомянуть ES6 / ES2015 Object.assign, он работает аналогично _.merge и может быть лучшим вариантом, если вы уже используете полифилл ES6 / ES2015, например Babel, если вы хотите polyfill самостоятельно.

Второй объект будет перезаписан или добавлен в базовый объект. undefined будет скопирован.

Согласно Accessors , определенным в ECMA-262 (http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf, P67), есть два способа добавить свойства в существующий объект . Все эти два способа, движок Javascript будет относиться к ним одинаково.

Первый способ заключается в использовании точечной нотации:

Но таким образом, вы должны использовать IdentifierName после точечной нотации.

Второй способ — использовать скобочные обозначения:

Таким образом, вы можете использовать Expression (включая IdentifierName ) в скобках.

Если у вас есть несколько анонимных литералов объекта внутри объекта и вы хотите добавить другой объект, содержащий пары ключ / значение, сделайте следующее:

Firebug ‘объект

Добавит Object к объекту Comicbook

Вы можете использовать любой из них (при условии, что key3 — это фактический ключ, который вы хотите использовать)

Если key3 является переменной, то вы должны сделать:

После этого запрос arr.a_key вернет значение value3 , литерал 3 .

Производительность

Сегодня 2020.01.14 я выполняю тесты на MacO HighSierra 10.13.6 на Chrome v78.0.0, Safari v13.0.4 и Firefox v71.0.0 для выбранных решений. Я делю решения на изменяемые (первая буква М) и неизменные (первая буква I). Я также предоставляю несколько неизменных решений (IB, IC, ID / IE), еще не опубликованных в ответах на этот вопрос.

• самые быстрые изменяемые решения намного быстрее, чем самые быстрые неизменяемые (> 10x)
• классический изменчивый подход, такой как obj.key3 = «abc» (MA, MB), самый быстрый
• для неизменяемых решений <. obj, key3:'abc'>и Object.assign (IA, IB) являются самыми быстрыми
• неожиданно существуют неизменяемые решения быстрее, чем некоторые изменяемые решения для Chrome (MC-IA) и Safari (MD-IB)

Детали

В приведенном ниже фрагменте представлены проверенные решения, вы можете предварительно выполнить тестирование на своем компьютере ЗДЕСЬ

Ответ на 2017 год: Object.assign()

Он перезаписывает dest свойствами и значениями (сколько угодно) исходных объектов, а затем возвращает dest .

Метод Object.assign() используется для копирования значений всех перечисляемых собственных свойств из одного или нескольких исходных объектов в целевой объект. Он вернет целевой объект.

Живой пример

Ответ на 2018 год: оператор распространения объекта

Он копирует собственные перечисляемые свойства из предоставленного объекта в новый объект.

Мелкое клонирование (исключая прототип) или объединение объектов теперь возможно с использованием более короткого синтаксиса, чем Object.assign() .

Обратите внимание, что Object.assign() вызывает сеттеры, а синтаксис распространения — нет.

Живой пример

Это работает в текущем Chrome и текущем Firefox. Говорят, в нынешнем Edge это не работает.

Год 2019 ответ

Ой . Я увлекся. Контрабанда информации из будущего незаконна. Должным образом скрыто!

Как добавить пару ключ / значение в объект JavaScript?

Есть два способа добавить новые свойства к объекту:

Используя точечную запись:

Используя обозначение в квадратных скобках:

Первая форма используется, когда вы знаете название свойства. Вторая форма используется, когда имя свойства определяется динамически. Как в этом примере:

Реальный массив JavaScript может быть построен с использованием:

Буквенное обозначение Array:

Обозначение конструктора Array:

Ответ на 2017 год: Object.assign()

Он перезаписывает dest свойства и значения (сколько угодно) исходных объектов, а затем возвращает dest .

Этот Object.assign() метод используется для копирования значений всех перечисляемых собственных свойств из одного или нескольких исходных объектов в целевой объект. Он вернет целевой объект.

Живой пример

Ответ 2018 года: оператор распространения объекта

Он копирует собственные перечисляемые свойства из предоставленного объекта в новый объект.

Мелкое клонирование (исключая прототип) или объединение объектов теперь возможно с использованием более короткого синтаксиса, чем Object.assign() .

Обратите внимание, что Object.assign() запускает сеттеры, а синтаксис распространения — нет.

Живой пример

Это работает в текущем Chrome и текущем Firefox. Говорят, в нынешнем Edge это не работает.

Год 2019 ответ

Ой . Я увлекся. Контрабанда информации из будущего незаконна. Должным образом скрыто!

Я полюбил LoDash / Underscore при написании больших проектов.

Добавление obj[‘key’] или obj.key все сплошные чистые ответы JavaScript. Однако библиотеки LoDash и Underscore предоставляют много дополнительных удобных функций при работе с объектами и массивами в целом.

В зависимости от того, что вы ищете, есть две конкретные функции, которые могут быть полезны для использования и дают функциональность, похожую на ощущение arr.push() . Для получения дополнительной информации проверьте документы, у них есть несколько отличных примеров.

_.merge (только Lodash)

Второй объект будет перезаписан или добавлен в базовый объект. undefined значения не копируются.

_.extend / _.assign

Второй объект будет перезаписан или добавлен в базовый объект. undefined будет скопирован.

_.defaults

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

$ .extend

Кроме того, стоит упомянуть jQuery.extend, он работает аналогично _.merge и может быть лучшим вариантом, если вы уже используете jQuery.

Второй объект будет перезаписан или добавлен в базовый объект. undefined значения не копируются.

Object.assign ()

Возможно, стоит упомянуть ES6 / ES2015 Object.assign, он работает аналогично _.merge и может быть лучшим вариантом, если вы уже используете полифил ES6 / ES2015, такой как Babel, если вы хотите заполнить себя самостоятельно .

Второй объект будет перезаписан или добавлен в базовый объект. undefined будет скопирован.