반응형
개체 배열에서 개체 속성 수정
var foo = [{ bar: 1, baz: [1,2,3] }, { bar: 2, baz: [4,5,6] }];
var filtered = $.grep(foo, function(v){
return v.bar === 1;
});
console.log(filtered);
새 배열 및/또는 개체를 만들지 않고 특정 개체 속성(위에서 필터링한 속성과 같은)을 수정할 수 있는 방법이 있습니까?
원하는 결과:[{ bar: 1, baz: [11,22,33] }, { bar: 2, baz: [4,5,6] }]
.map
펼침과 함께)...
) 연산자
var result = foo.map(el => el.bar == 1 ? {...el, baz: [11,22,33]} : el);
예, 변경만 하면 됩니다.
jQuery와 함께$.each
:
$.each(foo, function() {
if (this.bar === 1) {
this.baz[0] = 11;
this.baz[1] = 22;
this.baz[2] = 33;
// Or: `this.baz = [11, 22, 33];`
}
});
ES5와 함께forEach
:
foo.forEach(function(obj) {
if (obj.bar === 1) {
obj.baz[0] = 11;
obj.baz[1] = 22;
obj.baz[2] = 33;
// Or: `obj.baz = [11, 22, 33];`
}
});
...또는 이 다른 SO 답변에 다른 루프 옵션이 있습니다.
속성을 사용하고 변경할 수 있습니다.
let foo = [{ bar: 1, baz: [1,2,3] }, { bar: 2, baz: [4,5,6] }];
let obj = foo.find(f=>f.bar==1);
if(obj)
obj.baz=[2,3,4];
console.log(foo);
jQuery 및 이전 버전과의 호환성 없음
for (var i = 0; i < foo.length; i++) {
if (foo[i].bar === 1) {
foo[i].baz = [11,12,13];
}
}
Array의 맵 기능을 사용하면 다음과 같은 이점을 얻을 수 있습니다.
foo.map((obj) => {
if(obj.bar == 1){
obj.baz[0] = 11;
obj.baz[1] = 22;
obj.baz[2] = 33;
}
})
const objArr = [
{prop1: 'value1', prop2: 'value11'},
{prop1: 'value2', prop2: 'value22'},
{prop1: 'value3', prop2: 'option33'},
{prop1: 'value4', prop2: 'option44'}
]
const newObjArr = objArr.map(obj => {
if (['value1', 'value2'].includes(obj.prop1)) {
return {...obj, prop1: 'newValue'}
}
return obj
}
)
// const responseGotten = [
// { prop1: 'newValue', prop2: 'value11' },
// { prop1: 'newValue', prop2: 'value22' },
// { prop1: 'value3', prop2: 'option33' },
// { prop1: 'value4', prop2: 'option44' }
// ]
$.each(foo,function(index,value)
{
if(this.bar==1)
{
this.baz[0] = 11;
this.baz[1] = 22;
this.baz[2] = 33;
}
});
하지만 루프가 $보다 빠르기 때문에 각각을 사용할 수 있습니다.
for(var i=0; i <foo.length; i++)
{
if(foo[i].bar==1)
{
//change the code
}
}
그러나 언급된 기술을 채택하기 전에 각 접근 방식과 관련된 성능 문제를 염두에 두십시오.
Object iterate For-In, average: ~240 microseconds.
Object iterate Keys For Each, average: ~294 microseconds.
Object iterate Entries For-Of, average: ~535 microseconds.
참조 - 중단해야 할 JavaScript 성능 오류 3가지
게임을 할 수 있습니다.
const tasks = [ { id: 1, done: false }, { id: 2, done: false } ]
const completed_task = { id: 1, done: true }
const markCompleted = (tasks, task) => {
const index = tasks.findIndex(t => t.id === task.id);
tasks.splice(index, 1);
tasks.push(task);
return tasks;
}
console.log(tasks)
console.log(markCompleted(tasks, completed_task))
편집
인덱스 변경을 방지하려면:
const markCompleted = (tasks, task) => {
const index = tasks.findIndex(t => t.id === task.id);
tasks[index] = task;
return tasks;
}
자바스크립트의 필터 기능을 활용할 수 있습니다.
obj = [
{inActive:false, id:1},
{inActive:false, id:2},
{inActive:false, id: 3}
];
let nObj = obj.filter(ele => {
ele.inActive = true;
return ele;
});
console.log(nObj);
단순 for 루프를 사용하여 배열을 수정할 수 있습니다.
var foo = [{ bar: 1, baz: [1,2,3] }, { bar: 2, baz: [4,5,6] }];
for(i = 0;i < foo.length;i++){
//Here your condition for which item you went to edit
if(foo[i].bar == 1){
//Here you logic for update property
foo[i].baz= [1,11,22]
}
}
console.log(foo);
let myArray = [
{ id: 1, body: "wash dishes", state: "done" },
{ id: 2, body: "wash car", state: "onGoing" },
{ id: 3, body: "wash hands", state: "done" },
]
myArray.findIndex(function(obj){ //it will search between every object in array
if (obj.body=="wash car"){ //find the object you looking for and pass to obj
obj.state = "done" // you can select and update any part you want here
}
console.log(myArray) // see the updatet array
언급URL : https://stackoverflow.com/questions/16691833/modify-object-property-in-an-array-of-objects
반응형
'programing' 카테고리의 다른 글
AppEngine Java Google+ 로그인에 gplus_id가 누락됨 (0) | 2023.08.21 |
---|---|
JQuery를 사용한 부트스트랩 탭 활성화 (0) | 2023.08.21 |
UIButton 제목/텍스트를 프로그래밍 방식으로 업데이트할 수 있습니까? (0) | 2023.08.21 |
사이트가 HTTPS이지만 ERR_CLEARTEXT_NOT_PERMITED를 표시하는 웹 보기 (0) | 2023.08.21 |
문자열에서 영숫자가 아닌 문자(공백 포함)를 제거하려면 어떻게 해야 합니까? (0) | 2023.08.21 |