programing

개체 배열에서 값을 검색 및 업데이트하려면 어떻게 해야 합니까?

coolbiz 2022. 10. 14. 22:07
반응형

개체 배열에서 값을 검색 및 업데이트하려면 어떻게 해야 합니까?

나는 여러 가지 물건을 가지고 있다.특정 필드에서 찾은 다음 변경하려는 경우

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 콘텐츠를 생성할 때 발생합니다. 그런 다음 목록을 업데이트하여 목록으로 데이터베이스에 다시 보내야 합니다.

은 참고 있기 때문에 것 그러면 코드를 정리하여 이점을 얻을 수 있고list0 ~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

반응형