Ось мій об'єкт буквально:

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

Реальний масив 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(). Для отримання додаткової інформації перевірте документи, у них є чудові приклади.

_.merge (лише Лодаш)

Другий об’єкт замінить або додасть до базового об'єкта. 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"}

$ .extend

Крім того, варто згадати 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 на зразок Babel, якщо ви хочете перезавантажити себе .

Другий об’єкт замінить або додасть до базового об'єкта. 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});

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

І ми хочемо додати 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);

Об'єднання об'єктів:

Коли ми хочемо об'єднати властивості двох об'єктів, це найбільш зручні варіанти:

1. Object.assign(), приймає цільовий об'єкт як аргумент та один або декілька вихідних об'єктів і об'єднає їх разом. Наприклад:

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

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

console.log(object2);

2. Оператор розповсюдження об'єктів ...

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

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

console.log(newObj);

Який з них ми використовуємо?

• Синтаксис розповсюдження є менш багатослівним і його слід використовувати як imo за замовчуванням. Не забудьте перевести цей синтаксис у синтаксис, який підтримується всіма браузерами, оскільки він відносно новий.
• Object.assign() є більш динамічним, оскільки ми маємо доступ до всіх об'єктів, які передаються як аргументи, і можемо ними маніпулювати до того, як вони будуть присвоєні новому Об'єкту.

Я знаю, що вже є прийнята відповідь на це, але я думав, що десь задокументувати свою ідею. Будь ласка, [люди] не соромтеся тріпати дірки в цій ідеї, оскільки я не впевнений, чи це найкраще рішення ... але я лише кілька хвилин тому це склав:

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/

Продуктивність

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

Висновки

• найшвидші рішення, що змінюються, набагато швидші, ніж швидкозмінні (> 10x)
• класичний змінний підхід на зразок obj.key3 = "abc"(MA, MB) є найшвидшим
• для непорушних розчинів швидкість {...obj, key3:'abc'}і Object.assign(IA, IB) є найшвидшою
• дивно, що є незмінні рішення швидше, ніж деякі змінні рішення для хрому (MC-IA) та сафарі (MD-IB)

Деталі

У фрагменті нижче є попередньо перевірене рішення, ви можете попередньо протестувати тест на своїй машині ТУТ

var o = {
    key1: true,
    key2: 3,
};

var log= (s,f)=> console.log(`${s} --> ${JSON.stringify(f({...o}))}`);



function MA(obj) {
  obj.key3 = "abc";
  return obj;
}

function MB(obj) {
  obj['key3'] = "abc";
  return obj;
}

function MC(obj) {
  Object.assign(obj, {key3:'abc'});
  return obj;
}

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

function IA(obj) {
  return {...obj, key3:'abc'};
}

function IB(obj) {
  return Object.assign({key3:'abc'}, obj);
}

function IC(obj) {
  let ob= JSON.parse(JSON.stringify(obj))
  ob.key3 = 'abc';
  return ob;
}


function ID(obj) {
	let ob= Object.fromEntries(Object.entries(obj));
  ob.key3 = 'abc';
  return ob;
}

function IE(obj) {
	return Object.fromEntries(Object.entries(obj).concat([['key3','abc']]))
}



log('MA',MA);
log('MB',MB);
log('MC',MC);
log('MD',MD);
log('IA',IA);
log('IB',IB);
log('IC',IC);
log('ID',ID);
log('IE',IE);

This snippet only presents code - it not perform tests itself!

Ви можете створити клас з відповіддю @ 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, коментарі вітаються. Працює для мене.

Два найбільш використані способи, про які вже говорилося в більшості відповідей

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

Цей метод корисний, коли ви хочете мати більше контролю під час визначення властивості. Визначені властивості можуть бути встановлені як перелічені, налаштовані та записані користувачем.

Ваш приклад показує об’єкт, а не масив. У цьому випадку кращим способом додавання поля до Об’єкта є просто призначення його, наприклад:

arr.key3 = value3;

підтримується більшістю браузерів, і він перевіряє ключовий об'єкт доступні чи ні ви хочете додати, якщо є його overides існуючих значень ключа і не доступно його додати ключа із значенням

приклад 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" 
//            }   
//       }

Якщо у вас є декілька анонімних літералів об’єкта всередині Об'єкта і хочете додати ще один Об'єкт, що містить пари ключів / значень, зробіть це:

Об'єкт Firebug:

console.log(Comicbook);

повертає:

[Object {name = "Spiderman", value = "11"}, Object {name = "Marsipulami", value = "18"}, Object {name = "Гарфілд", значення = "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"}до об’єкта коміксів

Або 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. розширити (мета [, object1] [, objectN]) об'єднує вміст двох або більше об'єктів разом в перший об'єкт.

А також дозволяє рекурсивні додавання / модифікації за допомогою $.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>

Короткий та елегантний спосіб у наступній специфікації JavaScript (етап 3 кандидата):

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

Більш глибоке обговорення можна знайти в " Об'єкт поширенню проти Object.assign" та на сайті доктора Акселя Раушмайєра .

Він працює вже в node.js з моменту випуску 8.6.0.

Vivaldi, Chrome, Opera та Firefox в сучасних випусках знають і цю функцію, але Mirosoft до сьогодні не має, як ні в Internet Explorer, ні в Edge.

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

Ви можете додати його таким чином:

arr['key3'] = value3;

або таким чином:

arr.key3 = value3;

Відповіді, що пропонують ввести об'єкт зі змінною, key3спрацюють лише у тому випадку, якщо значення key3було 'key3'.

Згідно Accessors власності визначено в ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , P67), є два способи , які ви можете зробити , щоб додати властивості об'єкт існує. Усі ці два способи, двигун Javascript буде ставитися до них однаково.

Перший спосіб - використовувати позначення крапок:

obj.key3 = value3;

Але таким чином слід використовувати IdentifierName після крапкових позначень.

Другий спосіб - використовувати позначення дужок:

obj["key3"] = value3;

та інша форма:

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

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

Ми можемо це зробити і цим способом.

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

Оскільки це питання минулого, але проблема сьогодення. Я б запропонував ще одне рішення: Просто передайте ключ і значення функції, і ви отримаєте об’єкт карти.

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

Для того , щоб PREPEND пару ключ-значення для об'єкта , тому для в роботи з цим елементом першої зробити це:

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

Ви можете створити новий об’єкт, використовуючи {[key]: value}синтаксис:

const foo = {
  a: 'key',
  b: 'value'
}

const bar = {
  [foo.a]: foo.b
}

console.log(bar); // {key: 'value'}
console.log(bar.key); // value

const baz = {
  ['key2']: 'value2'
}

console.log(baz); // {key2: 'value2'}
console.log(baz.key2); // value2

За допомогою попереднього синтаксису тепер ви можете використовувати синтаксис розповсюдження, {...foo, ...bar}щоб додати новий об’єкт, не змінюючи старе значення:

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

const bar = {...foo, ...{['c']: 3}};

console.log(bar); // {a: 1, b: 2, c: 3}
console.log(bar.c); // 3