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

ㅏ 진짜 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에서 작동합니다. 그들은 그것이 현재 가장자리에서 작동하지 않는다고 말합니다.

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와 밑줄 라이브러리는 모두 객체 및 배열로 작업 할 때 많은 추가 편리한 기능을 제공합니다.

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

_.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 객체를 언급 할 가치가있을 수 있습니다. Assign은 _.merge와 유사한 기능을 수행하며 이미 ES6/ ES2015 PolyFill을 사용하는 경우 최상의 옵션 일 수 있습니다. 바벨 당신이 원한다면 자신을 다리 채우십시오.

두 번째 객체는 기본 객체를 덮어 쓰거나 추가합니다.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 제공은 사용하려는 Acutal Key입니다).

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

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

답으로 클래스를 만들 수 있습니다 @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에 초보자입니다. 의견을 환영합니다. 나를 위해 일합니다.

간단히 속성 추가 :

그리고 우리는 추가하고 싶습니다 prop2 : 2 이 개체에 가장 편리한 옵션입니다.

도트 운영자 : object.prop2 = 2;
사각형 브래킷 : object['prop2'] = 2;

그렇다면 우리는 어느 것을 사용합니까?

도트 연산자는 더 깨끗한 구문이며 기본값 (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);

우리는 어느 것을 사용합니까?

스프레드 구문은 장점이 적고 기본 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
});

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

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

Firebug '대상 :

console.log(Comicbook);

보고:

object {name = "spiderman", value = "11"}, object {name = "marsipulami", value = "18"}, object {name = "garfield", value = "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>

이 방법을 추가 할 수 있습니다.

arr['key3'] = value3;

또는이 방법 :

arr.key3 = value3;

변수를 사용하여 객체에 키잉을 제안하는 답변 key3 가치의 경우에만 작동합니다 key3 ~였다 'key3'.

에 따르면 부동산 접근자 ECMA-262에서 정의 (http://www.ecma-international.org/publications/files/ecma-st/ecma-262.pdf, p67), exiss 객체에 속성을 추가하기 위해 할 수있는 두 가지 방법이 있습니다. 이 두 가지 방법 모두 JavaScript 엔진은 동일하게 처리합니다.

첫 번째 방법은 DOT 표기법을 사용하는 것입니다.

obj.key3 = value3;

그러나 이런 식으로, 당신은 a를 사용해야합니다 식별자 이름 도트 표기법 후.

두 번째 방법은 브래킷 표기법을 사용하는 것입니다.

obj["key3"] = value3;

그리고 다른 형태 :

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

이런 식으로, 당신은 a를 사용할 수 있습니다 표현 (포함 식별자 이름) 브래킷 표기법에서.

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

대부분의 브라우저에서 지원되며 객체 키를 사용할 수 있는지 확인합니다. 사용 가능 그것 기존의 키 가치를 넘어냅니다 그리고 그것 사용할 수 없습니다 그것 값으로 키를 추가하십시오

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

더 깊은 토론을 찾을 수 있습니다 객체 스프레드 대 객체 그리고 on Dr. Axel Rauschmayers 사이트.

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

Vivaldi, Chrome, Opera 및 Firefox는 최신 기능 도이 기능을 알고 있지만 Mirosoft는 오늘날까지 인터넷 익스플로러 나 우위에 있지 않습니다.

하기 위해 Prepend 객체에 대한 키 가치 쌍 IN을 위해 해당 요소와 함께 먼저 작동합니다.

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

과거의 문제이지만 현재의 문제 이후. 하나 더 솔루션을 제안합니다 : 키와 값을 함수에 전달하면 맵 객체가 나타납니다.

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 년 답변

_.merge (lodash 만 해당)

_.extend / _.assign

_.defaults

$ .extend

Object.Assign ()

간단히 속성 추가 :

객체 병합 :

2017 년 답변 : `Object.assign()`

2018 년 답변 : 물체 스프레드 연산자 `{...}`