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

Вот мой объектный литерал:

var obj = {key1: value1, key2: value2};

Как добавить {key3: value3} к объекту?

ОТВЕТЫ

Ответ 1

Существует два способа добавления новых свойств к объекту:

var obj = {
    key1: value1,
    key2: value2
};

Использование точечной нотации:

obj.key3 = "value3";

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

obj["key3"] = "value3";

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

var getProperty = function (propertyName) {
    return obj[propertyName];
};

getProperty("key1");
getProperty("key2");
getProperty("key3");

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

Литеральная запись массива:

var arr = [];

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

var arr = new Array();

Ответ 2

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

Object.assign(dest, src1, src2,...) объединяет объекты.

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

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

Живой пример

var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});

document.body.innerHTML = JSON.stringify(obj);

Ответ 3

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

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

.push() для массивов, а не для objects.

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

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

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

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.merge(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"}

_. extend/_.assign

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

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.extend(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

_. defaults

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

var obj = {key3: "value3", key5: "value5"};
var obj2 = {key1: "value1", key2:"value2", key3: "valueDefault", key4: "valueDefault", key5: undefined};
_.defaults(obj, obj2);
console.log(obj);
// → {key3: "value3", key5: "value5", key1: "value1", key2: "value2", key4: "valueDefault"}

$. expand

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

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

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
$.extend(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"}

Object.assign()

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

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

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
Object.assign(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

Ответ 4

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

arr[ 'key3' ] = value3;

или

arr.key3 = value3;

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

var key3 = 'a_key';
var value3 = 3;
arr[ key3 ] = value3;

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

Ответ 5

arr.key3 = value3;

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

var arr = [{key1: value1}, {key2: value2}];

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

var arr = [{key: key1, value: value1}, {key: key2, value: value2}];

Ответ 6

var employees = []; 
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});

Ответ 7

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

Object.prototype.push = function( key, value ){
   this[ key ] = value;
   return this;
}

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

var obj = {key1: value1, key2: value2};
obj.push( "key3", "value3" );

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

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

Ответ 8

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

function obj(){
    obj=new Object();
    this.add=function(key,value){
        obj[""+key+""]=value;
    }
    this.obj=obj
}

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

my_obj=new obj();
my_obj.add('key1', 'value1');
my_obj.add('key2', 'value2');
my_obj.add('key3','value3');

Печать объекта

console.log(my_obj.obj) // Return {key1: "value1", key2: "value2", key3: "value3"}

Печать ключа

console.log(my_obj.obj["key3"]) //Return value3

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

Ответ 9

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

arr.key3 = value3;

Ответ 10

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

obj.key3 = "value3";

obj["key3"] = "value3";

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

Object.defineProperty(obj, 'key3', {
  value: "value3",       // undefined by default
  enumerable: true,      // false by default
  configurable: true,    // false by default
  writable: true         // false by default
});

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

Ответ 11

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

Firebug 'Объект:

console.log(Comicbook);

возвращает:

[Объект {name= "Человек-паук", value = "11" }, Объект { name= "Марсипулами", value = "18" }, Object {name= "Garfield", value = "2" }]

Код:

if (typeof Comicbook[3]=='undefined') {
    private_formArray[3] = new Object();
    private_formArray[3]["name"] = "Peanuts";
    private_formArray[3]["value"] = "12";
}

добавит Object {name="Peanuts", value="12"} к объекту Comicbook

Ответ 12

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

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

var obj = {key1: 'value1', key2: 'value2'};
$('#ini').append(JSON.stringify(obj));

$.extend(obj,{key3: 'value3'});

$('#ext').append(JSON.stringify(obj));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>

Ответ 13

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

arr['key3'] = value3;

или следующим образом:

arr.key3 = value3;

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

Ответ 14

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

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

obj.key3 = value3;

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

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

obj["key3"] = value3;

и другая форма:

var key3 = "key3";
obj[key3] = value3;

Таким образом, вы можете использовать выражение (include IdentifierName) в нотации скобки.

Ответ 15

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

obj = {... obj,... { key3: value3 } }

Более глубокое обсуждение можно найти в разделе "Распространение объектов" против объекта Object.assign и на сайте Dr. Axel Rauschmayers.

Он работает уже в node.js с момента выпуска 8.6.0.

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

Ответ 16

var arrOfObj = [{name: 'eve'},{name:'john'},{name:'jane'}];
    var injectObj = {isActive:true, timestamp:new Date()};

    // function to inject key values in all object of json array

    function injectKeyValueInArray (array, keyValues){
        return new Promise((resolve, reject) => {
            if (!array.length)
                return resolve(array);

            array.forEach((object) => {
                for (let key in keyValues) {
                    object[key] = keyValues[key]
                }
            });
            resolve(array);
        })
    };

//call function to inject json key value in all array object
    injectKeyValueInArray(arrOfObj,injectObj).then((newArrOfObj)=>{
        console.log(newArrOfObj);
    });

Вывод:

[ { name: 'eve',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z },
  { name: 'john',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z },
  { name: 'jane',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z } ]

Ответ 17

Мы также можем это сделать.

var myMap = new Map();
myMap.set(0, 'my value1');
myMap.set(1, 'my value2');
 for (var [key, value] of myMap) {
  console.log(key + ' = ' + value);
 }

Ответ 18

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

var map = {};
function addValueToMap(key, value) {
map[key] = map[key] || [];
map[key].push(value);
}

Ответ 19

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

    var nwrow = {'newkey': 'value' };
    for(var column in row){
        nwrow[column] = row[column];
    }
    row = nwrow;

Ответ 20

Лучший способ добиться этого - ниже:

function getKey(key) {
  return `${key}`;
}

var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"};

//console.log(obj);

Ответ 21

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

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

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

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

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

const obj = {
  prop1: 1
}

const key = Math.random() > 0.5 ? 'key1' : 'key2';

obj[key] = 'this value has a dynamic key';

console.log(obj);

Ответ 22

Простое использование:

var myArray = {id1: 100, id2: 200, "tag with spaces": 300};
myArray.id3 = 400;
myArray["id4"] = 500;

Он отлично работает.

Ответ 23

arr.push({key3: value3});