JavaScript 객체에 키/값 쌍을 추가하려면 어떻게 해야 합니까?

질문자 :James Skidmore

다음은 내 객체 리터럴입니다.

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

개체에 value3 key3 을 어떻게 추가할 수 있습니까?

개체에 새 속성 을 추가하는 방법에는 두 가지가 있습니다.

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

Ionuț G. Stan

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() setter를 트리거하지만 스프레드 구문은 그렇지 않습니다.

라이브 예시

현재 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"};

Community Wiki

저는 더 큰 프로젝트를 작성할 때 LoDash / Underscore를 좋아하게 되었습니다.

obj['key'] 또는 obj.key 로 추가하는 것은 모두 견고한 순수 JavaScript 답변입니다. 그러나 LoDash 및 Underscore 라이브러리는 모두 일반적으로 객체 및 배열로 작업할 때 많은 추가 편리한 기능을 제공합니다.

.push() 는 객체 용이 아니라 배열 용입니다.

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

_.확장 / _.할당

두 번째 개체는 기본 개체를 덮어쓰거나 추가합니다. 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와 유사한 기능을 하며 이미 Babel 과 같은 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}

Sir.Nathan Stassen

이 중 하나를 사용할 수 있습니다(key3이 사용하려는 acutal 키인 경우).

 arr[ 'key3' ] = value3;

또는

 arr.key3 = value3;

key3이 변수인 경우 다음을 수행해야 합니다.

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

그 후, arr.a_key value3 값이 반환되고 리터럴 3 입니다.

seth

성능

오늘 2020.01.14 선택한 솔루션에 대해 Chrome v78.0.0, Safari v13.0.4 및 Firefox v71.0.0의 MacOs HighSierra 10.13.6에서 테스트를 수행합니다. 나는 가변(첫 글자 M)과 불변(첫 글자 I)에 대한 솔루션을 나눕니다. 또한 이 질문에 대한 답변으로 아직 게시되지 않은 몇 가지 변경 불가능한 솔루션(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!

Kamil Kiełczewski

arr.key3 = value3;

귀하의 arr은 실제로 배열이 아니기 때문에... 그것은 프로토타입 객체입니다. 실제 배열은 다음과 같습니다.

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

그러나 여전히 옳지 않습니다. 실제로 다음과 같아야 합니다.

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

Robert Koritnik

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

Vicky

나는 이것에 대해 이미 받아들여진 대답이 있다는 것을 알고 있지만 어딘가에 내 아이디어를 문서화할 것이라고 생각했습니다. [사람들이] 이 아이디어에 자유롭게 구멍을 뚫어 주세요. 이것이 최선의 해결책인지 확신할 수 없기 때문에... 하지만 저는 이것을 몇 분 전에 정리했습니다.

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

다음과 같은 방식으로 활용합니다.

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

프로토타입 함수가 this obj 변수의 끝에 .push 계속 연결할 수 있습니다 obj.push(...).push(...).push(...);

또 다른 기능은 배열이나 다른 객체를 푸시 함수 인수의 값으로 전달할 수 있다는 것입니다. 작업 예제는 내 바이올린을 참조하십시오. http://jsfiddle.net/7tEme/

sadmicrowave

속성을 추가하기만 하면 됩니다.

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() 은 인수로 전달된 모든 객체에 액세스할 수 있고 새 객체에 할당되기 전에 조작할 수 있기 때문에 더 동적입니다.

Willem van der Veen

@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

나는 자바 스크립트의 초보자입니다. 의견을 환영합니다. 나를 위해 작동합니다.

Eduen Sarceno

대부분의 답변에서 이미 언급한 가장 많이 사용되는 두 가지 방법

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

이 방법은 속성을 정의하는 동안 더 많은 제어를 원할 때 유용합니다. 정의된 속성은 사용자가 열거 가능, 구성 가능 및 쓰기 가능으로 설정할 수 있습니다.

Sanchay Kumar

귀하의 예는 배열이 아닌 객체를 보여줍니다. 이 경우 객체에 필드를 추가하는 선호하는 방법은 다음과 같이 할당하는 것입니다.

 arr.key3 = value3;

bdukes

다음 Javascript 사양(후보 단계 3)의 짧고 우아한 방법은 다음과 같습니다.

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

Object spread vs Object.assign 및 Dr. Axel Rauschmayers 사이트 에서 더 자세한 토론을 찾을 수 있습니다.

릴리스 8.6.0 이후 node.js에서 이미 작동합니다.

최신 릴리스의 Vivaldi, Chrome, Opera 및 Firefox도 이 기능을 알고 있지만 Mirosoft는 Internet Explorer나 Edge 모두에서 오늘까지 알지 못합니다.

xyxyber

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

Sayed Tauseef Haider Naqvi

대부분의 브라우저에서 지원하고, 검사 추가 할 사용 가능한 개체 키의 경우 여부, 사용 가능한 경우는 키 값을 기존 우선 적용하고 그것은 가치와 키를 사용할 수 없습니다 추가

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

Abhishek Garg

확산 연산자는 배열에 항목을 추가하고, 배열이나 개체를 결합하고, 배열을 함수의 인수로 확산하는 데 유용하고 빠른 구문입니다. 이제 ES2018에는 객체 리터럴에 대한 스프레드 속성이 있습니다. 제공된 개체에서 새 개체로 자체 열거 가능한 속성을 복사합니다.

스프레드 구문은 개체의 속성과 메서드를 새 개체로 결합하는 데 유용합니다.

다음과 같이 객체에 속성을 추가할 수 있습니다.

 const obj1 = {hello: ""}; const obj2 = {...obj1, laugh: "" }; console.log('obj1', obj1) console.log('obj2', obj2)

다음과 같은 개체를 결합할 수도 있습니다.

 const objectOne = {hello: ""} const objectTwo = {world: ""} const objectThree = {...objectOne, ...objectTwo, laugh: ""} console.log(objectThree) // Object { hello: "", world: "", laugh: "" } const objectFour = {...objectOne, ...objectTwo, laugh: () => {console.log("".repeat(5))}} objectFour.laugh() //

Subham Goyal

객체 내부에 여러 개의 익명 객체 리터럴이 있고 키/값 쌍을 포함하는 다른 객체를 추가하려는 경우 다음을 수행하십시오.

방화범' 개체:

 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"} 를 추가합니다.

Steve K

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>

제이쿼리. extend (target[,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>

Armfoot

우리도 이런 식으로 할 수 있습니다.

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

Miraj Hamid

여러 가지 방법으로 JavaScript 객체에 키/값 쌍을 추가할 수 있습니다.

CASE - 1 : 객체 확장
이것을 사용하여 동시에 여러 key: value 를 객체에 추가할 수 있습니다.

 const rectangle = { width: 4, height: 6 }; const cube = {...rectangle, length: 7}; const cube2 = {...rectangle, length: 7, stroke: 2}; console.log("Cube2: ", cube2); console.log("Cube: ", cube); console.log("Rectangle: ", rectangle);

CASE - 2 : dot 표기법 사용

 var rectangle = { width: 4, height: 6 }; rectangle.length = 7; console.log(rectangle);

CASE - 3 : [square] 표기법 사용

 var rectangle = { width: 4, height: 6 }; rectangle["length"] = 7; console.log(rectangle);

Rohit Tagadiya

다음과 같은 방법으로 추가할 수 있습니다.

 arr['key3'] = value3;

또는 이 방법으로:

 arr.key3 = value3;

key3 변수를 사용하여 객체에 키 입력을 제안하는 답변 key3 값이 'key3' 경우에만 작동합니다.

wombleton

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;

이런 식으로 대괄호 표기법에 식 ( IdentifierName 포함)을 사용할 수 있습니다.

Chen Yang

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

Jonathan Stellwag

과거의 문제지만 현재의 문제이기 때문입니다. 한 가지 더 솔루션을 제안합니다. 키와 값을 함수에 전달하기만 하면 지도 객체를 얻을 수 있습니다.

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

PPing

for in 이 해당 요소와 함께 작동하도록 키-값 쌍을 객체 앞에 추가 하려면 먼저 다음을 수행하십시오.

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

relipse

이를 달성하는 가장 좋은 방법은 다음과 같습니다.

 function getKey(key) { return `${key}`; } var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"}; //console.log(obj);

sgajera

출처 : http:www.stackoverflow.com/questions/1168807/how-can-i-add-a-key-value-pair-to-a-javascript-object