개체 배열에서 값을 검색 및 업데이트하려면 어떻게 해야 합니까?
나는 여러 가지 물건을 가지고 있다.특정 필드에서 찾은 다음 변경하려는 경우
var item = {...}
var items = [{id:2}, {id:2}, {id:2}];
var foundItem = items.find(x => x.id == item.id);
foundItem = item;
원래의 오브젝트를 변경해 주었으면 합니다.어떻게요? (로다시에 있어도 상관없습니다.)
findIndex를 사용하여 개체 배열에서 인덱스를 찾아 필요에 따라 바꿀 수 있습니다.
var item = {...}
var items = [{id:2}, {id:2}, {id:2}];
var foundIndex = items.findIndex(x => x.id == item.id);
items[foundIndex] = item;
이것은, 일의의 ID 를 상정하고 있습니다.ID가 중복된 경우(예시와 같이) 각각에 대해 사용하는 것이 좋습니다.
items.forEach((element, index) => {
if(element.id === item.id) {
items[index] = item;
}
});
최선의 접근법은 다음과 같습니다.
var item = {...}
var items = [{id:2}, {id:2}, {id:2}];
items[items.findIndex(el => el.id === item.id)] = item;
findIndex 참조
새 개체로 대체하지 않고 대신 다음 필드를 복사하려는 경우item
, 을 사용하면 .Object.assign
:
Object.assign(items[items.findIndex(el => el.id === item.id)], item)
.map()
:
Object.assign(items, items.map(el => el.id === item.id? item : el))
기능적 접근법:
어레이를 수정하지 말고 새 어레이를 사용하여 부작용이 발생하지 않도록 합니다.
const updatedItems = items.map(el => el.id === item.id ? item : el)
메모
적절하게 사용하면 객체에 대한 참조가 손실되지 않으므로 새 참조를 작성하는 대신 원래 개체 참조를 사용할 수도 있습니다.
const myArr = [{ id: 1 }, { id: 2 }, { id: 9 }];
const [a, b, c] = myArr;
// modify original reference will change object in the array
a.color = 'green';
console.log(myArr[0].color); // outputs 'green'
이 문제는 보통 데이터베이스에서 목록을 소비한 후 목록을 매핑하여 목록의 요소를 수정하는 HTML 콘텐츠를 생성할 때 발생합니다. 그런 다음 목록을 업데이트하여 목록으로 데이터베이스에 다시 보내야 합니다.
은 참고 있기 때문에 것 그러면 코드를 정리하여 이점을 얻을 수 있고list
0 ~0 의 할 수 .length -1
할 마다, 과 같이 .list[i]
참조가 손실되지 않고 원래 객체가 변경됩니다.) 이고, 오브젝트를 번 하지 않고, 에하고 있지 않은 경우)에.list
」를 참조해 주세요.
나쁜 소식은 아키텍처가 잘못되었다는 것입니다.필요한 경우 ID(사전)별로 객체를 수신해야 합니다.
{
1232: { id: 1232, ...},
asdf234asf: { id: 'asdf234asf', ...},
...
}
이렇게 하면 어레이에서 검색할 필요가 없어지기 때문에 리소스가 많이 소비됩니다.오브젝트내의 키만으로 액세스 할 수 있기 때문에, 즉석에서 퍼포먼스를 발휘합니다.
스프레드 오퍼레이터를 사용한 단일 라이너.
const updatedData = originalData.map(x => (x.id === id ? { ...x, updatedField: 1 } : x));
또 다른 접근법은 스플라이스를 사용하는 것입니다.
splice()
method는 기존 요소를 제거 또는 교체하거나 새로운 요소를 추가함으로써 배열의 내용을 변경합니다.
N.B: 사후 대응적인 프레임워크를 사용하고 있는 경우, 갱신한 어레이가 「표시」, 즉 「인식」됩니다.
답변:
var item = {...}
var items = [{id:2}, {id:2}, {id:2}];
let foundIndex = items.findIndex(element => element.id === item.id)
items.splice(foundIndex, 1, item)
또한 항목의 값만 변경하고 싶은 경우 찾기 기능을 사용할 수 있습니다.
// Retrieve item and assign ref to updatedItem
let updatedItem = items.find((element) => { return element.id === item.id })
// Modify object property
updatedItem.aProp = ds.aProp
변경된 개체 및 배열 지정:
const item = {...}
let items = [{id:2}, {id:3}, {id:4}];
어레이를 반복하여 어레이를 새 개체로 업데이트합니다.
items = items.map(x => (x.id === item.id) ? item : x)
필터를 사용할 수 있습니다.
const list = [{id:0}, {id:1}, {id:2}];
let listCopy = [...list];
let filteredDataSource = listCopy.filter((item) => {
if (item.id === 1) {
item.id = 12345;
}
return item;
});
console.log(filteredDataSource);
어레이 [개체 {id: 0 }, 개체 {id: 12345 }, 개체 {id: 2 }]
기존 답변의 대부분은 훌륭하지만, 여기서는 고려해야 할 기존의 for loop을 사용한 답변을 포함시키고 싶습니다.OP는 ES5/ES6 호환 응답을 요구하며 기존의 for loop이 적용됩니다.
이 시나리오에서 어레이 함수를 사용할 때의 문제는 오브젝트를 변환하지 않는다는 것입니다.그러나 이 경우 변환은 필수입니다.기존 for 루프를 사용하면 성능이 크게 향상됩니다.
const findThis = 2;
const items = [{id:1, ...}, {id:2, ...}, {id:3, ...}];
for (let i = 0, l = items.length; i < l; ++i) {
if (items[i].id === findThis) {
items[i].iAmChanged = true;
break;
}
}
저는 어레이 기능을 매우 좋아합니다만, 툴박스에 어레이 기능만을 사용하지 말아 주세요.어레이를 변환하는 것이 목적이라면 어레이는 최적이 아닙니다.
나를 위해 일했다
let returnPayments = [ ...this.payments ];
returnPayments[this.payments.findIndex(x => x.id == this.payment.id)] = this.payment;
답변에는 아직 이 방법이 없습니다. 그래서 여기 간단한 라이너 하나가 있습니다.
let item = {id: 1, new: true};
let items = [{id: 1}, {id: 2}];
let replaced = [item, ...items.filter(i => i.id !== item.id)]
교체하려는 항목의 원래 배열에 항목을 추가하면 됩니다.
이렇게도 할 수 있어요.
var item = {...}
var items = [{id:2}, {id:2}, {id:2}];
var foundItem = items.filter((x) => x.id == item.id).pop();
foundItem = item;
또는
items.filter((x) => x.id == item.id).pop()=item;
언급URL : https://stackoverflow.com/questions/35206125/how-can-i-find-and-update-values-in-an-array-of-objects
'programing' 카테고리의 다른 글
Python의 mkdir -p 기능 (0) | 2022.10.14 |
---|---|
ng-include의 올바른 구문은 무엇입니까? (0) | 2022.10.14 |
Nuxt.js를 사용하여 vuex 상태로 로컬 스토리지 데이터를 가져오는 방법 (0) | 2022.10.14 |
MariaDB는 열을 고유하게 만들지 않습니다. (0) | 2022.10.14 |
바이트를 이진 문자열 표현으로 변환하는 방법 (0) | 2022.10.14 |