JavaScript 객체에 키/값 쌍을 추가하려면 어떻게해야합니까?
-
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와 밑줄 라이브러리는 모두 객체 및 배열로 작업 할 때 많은 추가 편리한 기능을 제공합니다.
당신이 찾고있는 것에 따라, 사용하기에 좋을 수있는 두 가지 특정 기능이 있습니다. 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});