Вот мой объектный литерал:
var obj = {key1: value1, key2: value2};
Как я могу добавить поле key3
с value3
объектом?
javascript
object-literal
Джеймс Скидмор
источник
источник
Ответы:
Есть два способа добавить новые свойства к объекту:
Используя точечную запись:
Используя обозначение в квадратных скобках:
Первая форма используется, когда вы знаете название свойства. Вторая форма используется, когда имя свойства определяется динамически. Как в этом примере:
Реальный массив JavaScript может быть построен с использованием:
Буквенное обозначение Array:
Обозначение конструктора Array:
источник
Object.keys({"b": 1, "c": 3, "a": 2}).sort().forEach(console.log);
length
свойство не установлено, потому что это не массив, это объект / карта / словарь.Ответ на 2017 год:
Object.assign()
Object.assign (dest, src1, src2, ...) объединяет объекты.
Он перезаписывает
dest
свойства и значения (сколько угодно) исходных объектов, а затем возвращаетdest
.Живой пример
Ответ 2018 года: оператор распространения объекта
{...}
От MDN :
Живой пример
Это работает в текущем Chrome и текущем Firefox. Говорят, в нынешнем Edge это не работает.
Год 2019 ответ
Оператор присвоения объекта+=
:Ой ... Я увлекся. Контрабанда информации из будущего незаконна. Должным образом скрыто!источник
const
иlet
вместо этогоvar
должен быть путь 2018 года?const
потому что это устраняет это преимущество. Каждый раз, когда я использовал это, это мешало развитию.Year 2019 answer ... Opps ...
доля заслуживает благодарности, вы сделали мой день . Лучший ответ +1Я полюбил LoDash / Underscore при написании больших проектов.
Добавление
obj['key']
илиobj.key
все сплошные чистые ответы JavaScript. Однако библиотеки LoDash и Underscore предоставляют много дополнительных удобных функций при работе с объектами и массивами в целом..push()
для массивов , а не для объектов .В зависимости от того, что вы ищете, есть две конкретные функции, которые могут быть полезны для использования и дают функциональность, похожую на ощущение
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
будет скопирован.источник
_.extend
это более универсальный псевдоним, поскольку библиотека подчеркивания все ещеextend
не использует егоmerge
. Я обновлю свой ответ.Вы можете использовать любой из них (при условии, что key3 - это действительный ключ, который вы хотите использовать)
или
Если key3 является переменной, то вы должны сделать:
После этого запрос
arr.a_key
вернет значениеvalue3
, литерал3
.источник
потому что ваш arr на самом деле не массив ... Это объект-прототип. Реальный массив будет:
но это все еще не правильно. На самом деле должно быть:
источник
источник
Просто добавив свойства:
И мы хотим добавить
prop2 : 2
к этому объекту самые удобные варианты:object.prop2 = 2;
object['prop2'] = 2;
Так какой же мы используем тогда?
Точечный оператор имеет более чистый синтаксис и должен использоваться по умолчанию (imo). Однако оператор точка не может добавлять динамические ключи к объекту, что может быть очень полезно в некоторых случаях. Вот пример:
Объединение объектов:
Когда мы хотим объединить свойства двух объектов, это самые удобные опции:
Object.assign()
, принимает целевой объект в качестве аргумента и один или несколько исходных объектов и объединит их вместе. Например:...
Какой из них мы используем?
Object.assign()
является более динамичным, потому что у нас есть доступ ко всем объектам, которые передаются в качестве аргументов, и мы можем манипулировать ими до того, как они будут назначены новому объекту.источник
Представление
Сегодня 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), еще не опубликованных в ответах на этот вопрос.
Выводы
obj.key3 = "abc"
(MA, MB) самый быстрый{...obj, key3:'abc'}
иObject.assign
(IA, IB) являются самыми быстрымиподробности
В приведенном ниже фрагменте представлены протестированные решения, которые вы можете предварительно протестировать на своем компьютере ЗДЕСЬ
Показать фрагмент кода
источник
Я знаю, что на этот вопрос уже есть принятый ответ, но я решил где-нибудь документировать свою идею. Пожалуйста, [люди] не стесняйтесь пробивать эту идею, поскольку я не уверен, что это лучшее решение ... но я просто собрал это несколько минут назад:
Вы бы использовали это таким образом:
Так как функция-прототип возвращается,
this
вы можете продолжить цепочку.push
до конца вашегоobj
переменной:obj.push(...).push(...).push(...);
Другая особенность заключается в том, что вы можете передать массив или другой объект в качестве значения в аргументы функции push. Смотрите мой скрипт для рабочего примера: http://jsfiddle.net/7tEme/
источник
TypeError: 'undefined' is not a function (evaluating 'U[a].exec(s)')
что странно, потому что он работает в jsfiddle даже с jquery1.9Вы можете создать класс с ответом @ Ionuț G. Stan
Создание нового объекта с последним классом:
Печать объекта
Печать ключа
Я новичок в JavaScript, комментарии приветствуются. Работает для меня.
источник
Два наиболее часто используемых способа уже упоминались в большинстве ответов
Еще один способ определить свойство - использовать Object.defineProperty ()
Этот метод полезен, когда вы хотите иметь больше контроля при определении свойства. Определенное свойство может быть установлено как перечисляемое, настраиваемое и доступное для записи пользователем.
источник
В вашем примере показан объект, а не массив. В этом случае предпочтительный способ добавить поле в объект - просто присвоить ему, например, так:
источник
поддерживается большинством браузеров, и он проверяет, доступен ли ключ объекта или нет, вы хотите добавить, если он доступен, он переопределяет существующее значение ключа, и он не доступен, он добавляет ключ со значением
пример 1
пример 2
пример 3
источник
Если у вас есть несколько анонимных литералов объекта внутри объекта и вы хотите добавить другой объект, содержащий пары ключ / значение, сделайте следующее:
Firebug 'Объект:
возвращает:
Код:
добавит
Object {name="Peanuts", value="12"}
к объекту Comicbookисточник
Либо
obj['key3'] = value3
илиobj.key3 = value3
добавим новую пару вobj
.Однако я знаю, что jQuery не упоминался, но если вы используете его, вы можете добавить объект через
$.extend(obj,{key3: 'value3'})
. Например:JQuery. Расширение (target [, object1] [, objectN]) объединяет содержимое двух или более объектов вместе в первый объект.
И это также позволяет рекурсивные добавления / модификации с
$.extend(true,object1,object2);
:Показать фрагмент кода
источник
Краткий и элегантный способ в следующей спецификации Javascript (кандидат на стадии 3):
obj = { ... obj, ... { key3 : value3 } }
Более глубокое обсуждение можно найти в « Распространении объектов против Object.assign» и на сайте доктора Акселя Раушмайерса .
Он работает уже в node.js, начиная с версии 8.6.0.
Vivaldi, Chrome, Opera и Firefox в новейших выпусках также знают эту функцию, но до сегодняшнего дня Mirosoft - ни в Internet Explorer, ни в Edge.
источник
Вывод так:
источник
Вы можете добавить это так:
или так:
Ответы предполагающих манипуляции в объект с переменным
key3
будут работать только тогда , когда значениеkey3
было'key3'
.источник
Согласно аксессорам свойств, определенным в ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , P67), есть два способа добавить свойства в Существующий объект. Все эти два способа, движок Javascript будет относиться к ним одинаково.
Первый способ заключается в использовании точечной нотации:
Но таким образом, вы должны использовать IdentifierName после точечной нотации.
Второй способ - использовать скобочные обозначения:
и другая форма:
Таким образом, вы можете использовать Expression (включая IdentifierName ) в скобках.
источник
Мы можем сделать это таким же образом.
источник
Так как это вопрос прошлого, но проблема настоящего. Предложил бы еще одно решение: просто передайте ключ и значения функции, и вы получите объект карты.
источник
Для того, чтобы добавить пару ключ-значение к объекту, чтобы for in работал с этим элементом, сначала сделайте следующее:
источник
Лучший способ достичь того же самого указан ниже:
источник
Вы можете создать новый объект, используя
{[key]: value}
синтаксис:С предыдущим синтаксисом вы можете теперь использовать синтаксис распространения,
{...foo, ...bar}
чтобы добавить новый объект без изменения вашего старого значения:источник