web-dev-qa-db-ja.com

Javascript ES6 / ES5は配列内を検索して変更します

オブジェクトの配列があります。私はいくつかの分野で見つけて、それを変更したい：

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

var foundItem = items.find(x => x.id == item.id);
foundItem = item;

元のオブジェクトを変更してほしい。どうやって？ （それがlodashにあるかどうか気にしません）

javascriptarraysecmascript-6lodash
65
user3712353

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が重複している場合（例のように）、forEachを使用する方が適切です。

items.forEach((element, index) => {
    if(element.id === item.id) {
        items[index] = item;
    }
});
137
CodingIntrigue

私の最善のアプローチは：

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))

26
Soldeplata Saketos

他のアプローチは splice を使用することです。

splice()メソッドは、既存の要素を削除または置換したり、新しい要素を追加したりして、配列の内容を変更します in place 。

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)

また、アイテムの値のみを変更する場合は、 find functionを使用できます。

// Retrieve item and assign ref to updatedItem
let updatedItem = items.find((element) => { return element.id === item.id })

// Modify object property
updatedItem.aProp = ds.aProp
9
Toodoo

Filter を使用できます。

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}]

3
katwal-Dipak