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

https://stackoverflow.com/questions/1168807

19-09-2019
|

Вопрос

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

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

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

Решение

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

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");

A реальный Массив JavaScript может быть создан с использованием любого:

Литеральная нотация массива:

var arr = [];

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

var arr = new Array();

Другие советы

Ответ на 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);

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

obj = {...obj, ...pair};

От MDN:

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

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

Обратите внимание , что Object.assign() триггеры сеттеры в то время как синтаксис распространения этого не делает.

Живой пример

Это работает в текущем Chrome и текущем Firefox.Они говорят, что это не работает в текущем Edge.

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

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

Ответ на 2019 год

~~Оператор присваивания объекта +=:~~

~~obj += {key3: "value3"};~~

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

Я полюбил этот Lodash / Подчеркивание при написании более крупных проектов.

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

.push() предназначен для массивов, не для Объекты.

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

_.слияние (Только 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"}

_.расширить / _.назначить

Второй объект будет перезаписан или добавлен к базовому объекту.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}

_.значения по умолчанию

Второй объект содержит значения по умолчанию, которые будут добавлены к базовому объекту, если они не существуют.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"}

$.расширить

Кроме того, возможно, стоит упомянуть 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() Объект.назначить()

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

Второй объект будет перезаписан или добавлен к базовому объекту.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}

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

arr[ 'key3' ] = value3;

или

arr.key3 = value3;

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

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

После этого, запрашивая arr.a_key вернул бы значение value3, буквальный 3.

arr.key3 = value3;

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

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

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

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

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

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

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/

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

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, комментарии приветствуются.Работает на меня.

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

И мы хотим добавить prop2 : 2 для данного объекта это наиболее удобные варианты:

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

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

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

const obj = {
  prop1: 1
}

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

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

console.log(obj);

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

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

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

const object1 = {
  a: 1,
  b: 2,
};

const object2 = Object.assign({
  c: 3,
  d: 4
}, object1);

console.log(object2);

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

const obj = {
  prop1: 1,
  prop2: 2
}

const newObj = {
  ...obj,
  prop3: 3,
  prop4: 4
}

console.log(newObj);

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

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

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

arr.key3 = value3;

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

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
});

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

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

Поджигатель" объекта:

console.log(Comicbook);

ВОЗВРАТ:

[Объект { имя= "Человек-паук", значение="11"}, Объект { имя= "Марсипулами", значение="18"}, Объект { имя= "Гарфилд", значение ="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

Либо 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>

jQuery.расширять(цель[,объект1][,объектN]) объединяет содержимое двух или более объектов вместе в первый объект.

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

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
$("#ini").append(JSON.stringify(object1));    

$.extend( true, object1, object2 );
 
$("#ext").append(JSON.stringify(object1));

<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>

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

arr['key3'] = value3;

или таким образом:

arr.key3 = value3;

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

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

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

obj.key3 = value3;

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

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

obj["key3"] = value3;

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

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

Таким образом, вы могли бы использовать Выражение (включить Идентификационное имя) в обозначении в квадратных скобках.

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 } ]

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

пример 1

let my_object = {};

// now i want to add something in it  

my_object.red = "this is red color";

// { red : "this is red color"}

пример 2

let my_object = { inside_object : { car : "maruti" }}

// now i want to add something inside object of my object 

my_object.inside_object.plane = "JetKing";

// { inside_object : { car : "maruti" , plane : "JetKing"} }

пример 3

let my_object = { inside_object : { name : "abhishek" }}

// now i want to add something inside object with new keys birth , gender 

my_object.inside_object.birth = "8 Aug";
my_object.inside_object.gender = "Male";


    // { inside_object : 
//             { name : "abhishek",
//               birth : "8 Aug",
//               gender : "Male" 
//            }   
//       }

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

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

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

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

Более глубокое обсуждение можно найти в Распространение объекта против Object.assign и дальше ДокторСайт Акселя Раушмайера.

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

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

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

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

Наилучший способ добиться того же изложен ниже:

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

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

//console.log(obj);

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

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

arr.push({key3: value3});

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow

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

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

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

Литеральная нотация массива:

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

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

Живой пример

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

Живой пример

Ответ на 2019 год

_.слияние (Только Lodash)

_.расширить / _.назначить

_.значения по умолчанию

$.расширить

Object.assign() Объект.назначить()

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

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

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

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