Bagaimana saya bisa menambahkan pasangan kunci / nilai ke objek JavaScript?


1383

Inilah objek literal saya:

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

Bagaimana saya bisa menambahkan bidang key3dengan value3objek?


2
Nah, seluruh masalah array asosiatif di JS aneh, karena Anda bisa melakukan ini ... dreaminginjavascript.wordpress.com/2008/06/27/...
Nosredna

@Nosredna - intinya adalah, tidak ada hal-hal seperti array asosiatif dalam javascript. Dalam artikel itu dia menambahkan properti objek ke objek array, tetapi ini bukan bagian dari 'array'.
UpTheCreek

Apakah ada cara untuk menetapkan kunci secara kondisional: pasangan nilai dalam objek literal dengan implementasi ES + di masa mendatang?
Con Antonakos

Jawaban:


2253

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

4
obj adalah obyek. Bagian antara (dan termasuk) kawat gigi adalah objek literal. obj bukan objek literal.
Nosredna

24
bagaimana jika kuncinya adalah angka? obj.123 = 456 tidak berfungsi. obj [123] = 456 tidak bekerja
axel freudiger

10
@ Maxelfreudiger memang, apa pun yang tidak secara sintaksis pengenal variabel yang valid harus digunakan dengan notasi braket.
Ionuț G. Stan

1
@KyleKhalafObject.keys({"b": 1, "c": 3, "a": 2}).sort().forEach(console.log);
Ionuț G. Stan

2
@JohnSmith lengthproperti tidak disetel karena bukan array, ini objek / peta / kamus.
Ionuț G. Stan

348

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!


34
obj + = terdengar luar biasa
Mehrdad Shokri

2
phpstorm merekomendasikan penggunaan constdan letalih-alih var, haruskah itu cara 2018?
Jim Smith

@jimsmith: Tidak yakin mengapa Anda mengatakan ini di sini. Apakah Anda menginginkan pendapat saya? Keuntungan dari juru bahasa adalah kemampuan untuk mengubah segala sesuatu yang hidup di konsol. Saya tidak suka constkarena menghilangkan keuntungan itu. Setiap kali saya menggunakannya, itu menghambat pengembangan.
7vujy0f0hy

kita berada di 2019, apakah itu berarti operator penugasan dapat sudah digunakan untuk menggantikan operator yang tersebar?
Bapak-Program

2
Seorang programmer sejati akan menghargai kesenangan untuk memberikan kelegaan pada profesi yang selalu penuh tekanan. Year 2019 answer ... Opps ...Porsi Anda layak terima kasih, Anda membuat hari saya . Jawaban Terbaik +1
ColinWa

89

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}

Saya percaya _.merge sekarang _.extend (tujuan, orang lain)
AD

Ah, Anda benar, _.extendalias lebih universal karena pustaka garis bawah masih menggunakan extendtidak merge. Saya akan memperbarui jawaban saya.
Sir.Nathan Stassen

66

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.


7
Ini bukan sebuah array tetapi sebuah objek. Array JS hanya diindeks oleh integer. Cobalah untuk melakukan arr.length dan itu akan kembali 0. Lebih banyak membaca tentang ini: less-broken.com/blog/2010/12/…
DevAntoine

Tautan @ DevAntoine tidak dapat diakses. Jika Anda ingin mendapatkan "panjang" dari tipe array ini, gunakan: Object.keys (your_array). Panjang Baca lebih lanjut tentang masalah ini, lihat: stackoverflow.com/questions/21356880/array-length-returns-0
Thế Anh Nguyễn

Kita juga bisa dengan sederhana menimpa properti panjang array yang mereka buat. Pengaturan var myarray ["length"] = numArrayFields menyelesaikan masalah ini untuk saya. Dengan asumsi Anda melacak jumlah bidang yang Anda tambahkan ke array Anda.
John Smith

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

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

22
Ini untuk array, bukan objek.
Roly

12

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

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

1
Di bagian atas pos Anda: itu bukan kurung keriting tetapi kurung kotak.
Bram Vanroy

11

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/


mungkin ini bukan solusi yang baik, saya sepertinya mendapatkan kesalahan di jquery1.9: TypeError: 'undefined' is not a function (evaluating 'U[a].exec(s)')yang aneh karena bekerja di jsfiddle bahkan dengan jquery1.9
sadmicrowave

3
Anda tidak boleh memperluas Object.prototype; ini memecah fitur "objek-sebagai-hashtables" dari JavaScript (dan selanjutnya banyak perpustakaan seperti Google Maps JS API). Lihat diskusi: stackoverflow.com/questions/1827458/…
Justin R.

11

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)

masukkan deskripsi gambar di sini

Detail

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

masukkan deskripsi gambar di sini


9

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.


7

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.


6

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;

6

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

5

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


dengan baik & jelas menjelaskan opsi lain yang lebih cocok untuk mengatasi objek dengan properti id atau nama kemudian menugaskannya sambil menambahkan, bagus. khususnya ketika memiliki atau bisa memiliki di masa depan lebih banyak alat peraga metode yang sama akan berlaku hanya koma lain dan itu siap untuk perubahan rencana
Avia Afer

5

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


5

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.


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

4

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


4

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.


4

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

1

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

2
Ini sepertinya tidak berhubungan dengan pertanyaan yang ditanyakan sama sekali.
Quentin

0

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;

0

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

0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.