Inilah objek literal saya:

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

Bagaimana saya bisa menambahkan bidang key3dengan value3objek?

Ada dua cara untuk menambahkan properti baru ke objek:

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

Menggunakan notasi titik:

obj.key3 = "value3";

Menggunakan notasi braket persegi:

obj["key3"] = "value3";

Formulir pertama digunakan ketika Anda tahu nama properti. Bentuk kedua digunakan ketika nama properti ditentukan secara dinamis. Seperti dalam contoh ini:

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

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

Sebuah nyata susunan JavaScript dapat dibangun baik menggunakan:

Notasi literal Array:

var arr = [];

Notasi konstruktor Array:

var arr = new Array();

Tahun 2017 jawaban: Object.assign()

Object.assign (dest, src1, src2, ...) menggabungkan objek.

Ini menimpa destdengan properti dan nilai objek sumber (namun banyak), kemudian kembali dest.

The Object.assign()metode yang digunakan untuk menyalin nilai dari semua properti enumerable sendiri dari satu atau lebih sumber objek ke objek target. Ini akan mengembalikan objek target.

Contoh langsung

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

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

Tahun 2018 jawabannya: operator penyebaran objek {...}

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

Dari MDN :

Ini menyalin properti enumerable sendiri dari objek yang disediakan ke objek baru.

Kloning dangkal (tidak termasuk prototipe) atau penggabungan objek sekarang dimungkinkan menggunakan sintaks yang lebih pendek daripada Object.assign().

Perhatikan bahwa Object.assign()pemicu setters sedangkan spread syntax tidak.

Contoh langsung

Ia bekerja di Chrome saat ini dan Firefox saat ini. Mereka mengatakan itu tidak bekerja di Edge saat ini.

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

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

Tahun 2019 jawabannya

Operator penugasan objek += :

obj += {key3: "value3"};

Ups ... Saya terbawa suasana. Penyelundupan informasi dari masa depan adalah ilegal. Dikaburkan!

Saya telah menyukai LoDash / Underscore ketika menulis proyek yang lebih besar.

Menambahkan dengan obj['key']atau obj.keysemua jawaban JavaScript murni yang solid. Namun, kedua pustaka LoDash dan Underscore menyediakan banyak fungsi nyaman tambahan saat bekerja dengan Objects dan Array secara umum.

.push()adalah untuk Array , bukan untuk objek .

Tergantung apa yang Anda cari, ada dua fungsi spesifik yang mungkin baik untuk digunakan dan memberikan fungsionalitas yang mirip dengan nuansa arr.push(). Untuk info lebih lanjut periksa dokumen, mereka memiliki beberapa contoh bagus di sana.

_.merge (khusus Lodash)

Objek kedua akan menimpa atau menambah objek dasar. undefinednilai tidak disalin.

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

Objek kedua akan menimpa atau menambah objek dasar. undefinedakan disalin.

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

Objek kedua berisi default yang akan ditambahkan ke objek dasar jika tidak ada. undefinednilai akan disalin jika kunci sudah ada.

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

Selain itu, mungkin bermanfaat menyebutkan jQuery.extend, fungsinya mirip dengan _.merge dan mungkin merupakan opsi yang lebih baik jika Anda sudah menggunakan jQuery.

Objek kedua akan menimpa atau menambah objek dasar. undefinednilai tidak disalin.

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

Mungkin perlu menyebutkan Object.assign ES6 / ES2015, fungsinya mirip dengan _.merge dan mungkin merupakan opsi terbaik jika Anda sudah menggunakan polyfill ES6 / ES2015 seperti Babel jika Anda ingin membuat polyfill sendiri .

Objek kedua akan menimpa atau menambah objek dasar. undefinedakan disalin.

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}

Anda dapat menggunakan salah satu dari ini (disediakan key3 adalah kunci acutal yang ingin Anda gunakan)

arr[ 'key3' ] = value3;

atau

arr.key3 = value3;

Jika key3 adalah variabel, maka Anda harus melakukan:

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

Setelah ini, meminta arr.a_keyakan mengembalikan nilai value3, literal 3.

arr.key3 = value3;

karena arr Anda sebenarnya bukan array ... Ini adalah objek prototipe. Array nyata adalah:

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

tapi itu masih tidak benar. Sebenarnya harus:

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

Cukup menambahkan properti:

Dan kami ingin menambahkan prop2 : 2objek ini, ini adalah opsi yang paling nyaman:

1. Operator dot: object.prop2 = 2;
2. tanda kurung: object['prop2'] = 2;

Jadi yang mana yang kita gunakan?

Operator titik sintaks lebih bersih dan harus digunakan sebagai default (imo). Namun, operator titik tidak mampu menambahkan kunci dinamis ke objek, yang dapat sangat berguna dalam beberapa kasus. Berikut ini sebuah contoh:

const obj = {
  prop1: 1
}

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

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

console.log(obj);

Menggabungkan objek:

Ketika kita ingin menggabungkan properti dari 2 objek, ini adalah opsi yang paling nyaman:

1. Object.assign(), mengambil objek target sebagai argumen, dan satu atau lebih objek sumber dan akan menggabungkan keduanya. Sebagai contoh:

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

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

console.log(object2);

2. Operator penyebaran objek ...

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

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

console.log(newObj);

Yang mana yang kita gunakan?

• Sintaks penyebaran kurang verbose dan harus digunakan sebagai imo default. Jangan lupa untuk mentranspilasikan sintaks ini ke sintaks yang didukung oleh semua browser karena ini relatif baru.
• Object.assign() lebih dinamis karena kita memiliki akses ke semua objek yang dilewatkan sebagai argumen dan dapat memanipulasi mereka sebelum mereka ditugaskan ke Objek baru.

Saya tahu sudah ada jawaban yang diterima untuk ini, tetapi saya pikir saya akan mendokumentasikan ide saya di suatu tempat. Tolong [orang-orang] merasa bebas untuk melubangi ide ini, karena saya tidak yakin apakah itu solusi terbaik ... tapi saya baru saja menyatukan ini beberapa menit yang lalu:

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

Anda akan menggunakannya dengan cara ini:

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

Karena, fungsi prototipe mengembalikan thisAnda dapat terus .pushmenghubungkan ke akhir objvariabel Anda :obj.push(...).push(...).push(...);

Fitur lain adalah bahwa Anda bisa melewatkan array atau objek lain sebagai nilai dalam argumen fungsi push. Lihat biola saya untuk contoh kerja: http://jsfiddle.net/7tEme/

Performa

Hari ini 2020.01.14 Saya melakukan tes pada MacOs HighSierra 10.13.6 di Chrome v78.0.0, Safari v13.0.4 dan Firefox v71.0.0, untuk solusi yang dipilih. Saya membagi solusi untuk bisa berubah (huruf pertama M) dan tidak berubah (huruf pertama I). Saya juga memberikan beberapa solusi yang tidak berubah (IB, IC, ID / IE) yang belum dipublikasikan dalam jawaban atas pertanyaan ini

Kesimpulan

• solusi mutable tercepat jauh lebih cepat daripada immutable tercepat (> 10x)
• Pendekatan mutable klasik seperti obj.key3 = "abc"(MA, MB) adalah yang tercepat
• untuk solusi abadi {...obj, key3:'abc'}dan Object.assign(IA, IB) tercepat
• secara mengejutkan ada solusi yang lebih cepat daripada beberapa solusi yang dapat diubah untuk chrome (MC-IA) dan safari (MD-IB)

Detail

Dalam cuplikan di bawah ini ada solusi yang telah diuji, Anda dapat memilih dari pengujian di mesin Anda DI SINI

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!

Anda dapat membuat kelas dengan jawaban @ Ionuț G. Stan

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

Membuat objek baru dengan kelas terakhir:

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

Mencetak objek

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

Mencetak Kunci

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

Saya pemula dalam javascript, komentar dipersilahkan. Bekerja untukku.

Dua cara yang paling sering digunakan telah disebutkan dalam sebagian besar jawaban

obj.key3 = "value3";

obj["key3"] = "value3";

Satu lagi cara untuk mendefinisikan properti menggunakan 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
});

Metode ini berguna ketika Anda ingin memiliki kontrol lebih besar saat mendefinisikan properti. Properti yang didefinisikan dapat ditetapkan sebagai enumerable, dapat dikonfigurasi, dan dapat ditulis oleh pengguna.

Contoh Anda menunjukkan Obyek, bukan Array. Dalam hal itu, cara yang disukai untuk menambahkan bidang ke Objek adalah dengan hanya menetapkannya, seperti:

arr.key3 = value3;

didukung oleh sebagian besar browser, dan memeriksa apakah kunci objek tersedia atau tidak ingin Anda tambahkan, jika tersedia itu mengabaikan nilai kunci yang ada dan tidak tersedia itu menambahkan kunci dengan nilai

Contoh 1

let my_object = {};

// now i want to add something in it  

my_object.red = "this is red color";

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

contoh 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"} }

contoh 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" 
//            }   
//       }

Jika Anda memiliki beberapa objek Objek anonim di dalam Objek dan ingin menambahkan Objek lain yang berisi pasangan kunci / nilai, lakukan ini:

Firebug 'the Object:

console.log(Comicbook);

pengembalian:

[Object {name = "Spiderman", value = "11"}, Object {name = "Marsipulami", value = "18"}, Object {name = "Garfield", value = "2"}]

Kode:

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

akan menambah Object {name="Peanuts", value="12"}Obyek Comicbook

Entah obj['key3'] = value3atau obj.key3 = value3akan menambahkan pasangan baru ke obj.

Namun, saya tahu jQuery tidak disebutkan, tetapi jika Anda menggunakannya, Anda dapat menambahkan objek melalui $.extend(obj,{key3: 'value3'}). Misalnya:

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. memperpanjang (target [, Object1] [, objectN]) menggabungkan isi dari dua atau lebih objek bersama-sama ke objek pertama.

Dan itu juga memungkinkan penambahan / modifikasi rekursif dengan $.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>

Cara singkat dan elegan dalam spesifikasi Javascript berikutnya (kandidat tahap 3) adalah:

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

Diskusi yang lebih dalam dapat ditemukan di Object spread vs Object.assign dan di situs Dr. Axel Rauschmayers .

Ini sudah bekerja di node.js sejak rilis 8.6.0.

Vivaldi, Chrome, Opera, dan Firefox di rilis terbaru tahu fitur ini juga, tetapi Mirosoft tidak sampai hari ini, baik di Internet Explorer maupun di 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);
    });

Output seperti ini: -

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

Anda dapat menambahkannya dengan cara ini:

arr['key3'] = value3;

atau dengan cara ini:

arr.key3 = value3;

Jawaban yang menyarankan memasukkan objek ke variabel key3hanya akan bekerja jika nilai key3itu 'key3'.

Menurut Accessors Properti yang didefinisikan dalam ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , P67), ada dua cara yang dapat Anda lakukan untuk menambahkan properti ke objek yang ada. Semua dua cara ini, mesin Javascript akan memperlakukan mereka sama.

Cara pertama adalah menggunakan notasi titik:

obj.key3 = value3;

Tetapi dengan cara ini, Anda harus menggunakan IdentifierName setelah notasi titik.

Cara kedua adalah menggunakan notasi braket:

obj["key3"] = value3;

dan bentuk lain:

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

Dengan cara ini, Anda bisa menggunakan Ekspresi (termasuk IdentifierName ) dalam notasi braket.

Kita bisa melakukan ini dengan cara ini juga.

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

Karena ini masalah masa lalu tetapi masalah saat ini. Akan menyarankan satu solusi lagi: Cukup berikan kunci dan nilai ke fungsi dan Anda akan mendapatkan objek peta.

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

Untuk menambahkan pasangan nilai kunci ke objek, maka untuk bekerja dengan elemen itu pertama-tama lakukan ini:

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

Cara terbaik untuk mencapai hal yang sama dinyatakan di bawah ini:

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

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

//console.log(obj);

Anda dapat membuat objek baru dengan menggunakan {[key]: value}sintaks:

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

Dengan sintaksis sebelumnya Anda sekarang dapat menggunakan sintaksis penyebaran {...foo, ...bar}untuk menambahkan objek baru tanpa mengubah nilai lama Anda:

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