여기 내 객체 리터럴이 있습니다.

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

실제 자바 스크립트 배열 중 하나를 사용하여 구성 할 수있다 :

배열 리터럴 표기법 :

var arr = [];

배열 생성자 표기법 :

var arr = new Array();

2017 년 답변 : Object.assign()

Object.assign (대상, 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 / 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"} 

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

_. 디폴트

두 번째 객체에는 기본 객체가없는 경우 기본 객체에 추가되는 기본값이 포함됩니다. 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와 유사하게 작동하며 직접 폴리 필 하려는 경우 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}

이 중 하나를 사용할 수 있습니다 (제공된 key3은 사용하려는 acutal 키입니다)

arr[ 'key3' ] = value3;

또는

arr.key3 = value3;

key3이 변수이면 다음을 수행해야합니다.

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

그런 다음 요청 arr.a_key하면의 값인 value3literal 이 반환 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를 체인으로 연결할 수 있습니다 ..pushobjobj.push(...).push(...).push(...);

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

공연

오늘 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!

@ 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

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

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

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;

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

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

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

방화범의 대상 :

console.log(Comicbook);

보고:

[개체 {name = "Spiderman", value = "11"}, 개체 {name = "Marsipulami", value = "18"}, 개체 {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. 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>

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

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

Object spread vs Object.assign 및 Axel Rauschmayers 사이트 에서보다 자세한 내용을 확인할 수 있습니다 .

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

최신 릴리스의 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'.

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 포함 )을 사용할 수 있습니다 .

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

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

하기 위해 앞에 추가 개체에 키 - 값 쌍을 그렇게 에 대한 해당 요소와 작품을 먼저 수행 :

    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