[javascript] JavaScript 객체에 키 / 값 쌍을 추가하려면 어떻게해야합니까?
여기 내 객체 리터럴이 있습니다.
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 라이브러리는 일반적으로 객체 및 배열 작업시 많은 편리한 기능을 추가로 제공합니다.
찾고자하는 것에 따라, 사용하기 편리하고 느낌과 유사한 기능을 제공하는 두 가지 특정 기능이 있습니다. 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
하면의 값인 value3
literal 이 반환 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
이 객체 에 추가하고 싶습니다 . 가장 편리한 옵션입니다.
- 도트 연산자 :
object.prop2 = 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);
객체 병합 :
두 객체의 속성을 병합하려면 가장 편리한 옵션이 있습니다.
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()
인수로 전달 된 모든 객체에 액세스 할 수 있고 새로운 객체에 할당되기 전에 조작 할 수 있기 때문에 더욱 역동적입니다.
![](http://daplus.net/wp-content/uploads/2023/04/coupang_part-e1630022808943-2.png)