値に応じてオブジェクトのプロパティを選択して変更する

Question

配列内のオブジェクトのプロパティの値を変更する必要があります。配列は次のようになります。

changeObjectVal = (id) => { 
    // here I need to first find the right object within the array 
    // and after that I should modify its aBoolean property to true 
} 

ので、関数内で私が唯一のid値を知っている：私はこのようになります機能を持っている

let myArrWithObjs = [ 
    { id: 1, selected: false }, 
    { id: 2, selected: false }, 
    { id: 3, selected: false } 
]; 

。 idパラメータの値が2の場合、配列の2番目のオブジェクトを取得する必要があります（そのidも2なので）。その後、そのselectedプロパティの値を変更する必要があります。

私はこのコードを見つけました：

var selectedChartItemObj = myArrWithObjs.filter(function(obj) { 
    return obj.id == id; 
}); 

問題は、これが私の物ではなく、オブジェクト自体のコピーを与え、です。

正しいオブジェクトのプロパティの値をより短時間で変更する方法はありますか？スプレッド演算子を使用すると、配列/オブジェクト全体を変更しないようにすることができますが、まず値を変更する方法を知る必要があります。

Answer 1

あなたがオブジェクトを見つけた後Object.assignを使用することができます。この提案はデフォルトのオブジェクトを使用しますが、必要なオブジェクトがすべて存在する場合は省略することもできます。id

Object.assign(array.find(o => o.id === id) || {}, { selected: true }); 
//   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^        find object 
//            ^^^^^^^^^^^^^^^^^^ update value 

Answer 2

アレイ内のオブジェクトに変異を起こさないようにしてください。

// Get the index 
const idx = myArrayWithObjs.findIndex(o => o.id === id); 
const currObj = myArrayWithObjs[idx] 
// New object with spread 
const nextObj = { 
    ...currObj, 
    selected: true 
}; 
// New array with spread 
const nextArray = [ 
    ...myArrayWithObjs.slice(0, idx), 
    nextObj, 
    ...myArrayWithObjs.slice(idx + 1) 
]; 

Answer 3

あなたが別の変数に割り当てることによって、そのコピーを作成している：あなたは何を変異回避したい場合は、この

// Using Array.prototype.find to get the inner object 
const obj = myArrayWithObjs.find(o => o.id === id); 
// Set the selected value 
obj.selected = true 

に動作します。フィルタリングされた配列の最初の項目にプロパティを設定するだけで正常に動作します。

同じIDを持つアイテムが多数ある場合は、各アイテムに対して.eachループを使用してtrueに設定できます。

let myArrWithObjs = [ 
 
    { id: 1, selected: false }, 
 
    { id: 2, selected: false }, 
 
    { id: 3, selected: false } 
 
]; 
 

 
changeObjectVal = (id) => { 
 
    myArrWithObjs.filter(function(obj) { 
 
    return obj.id == id; 
 
})[0].selected=true; 
 
} 
 
changeObjectVal(3); 
 
console.log(myArrWithObjs);

Answer 4

私はあなたchangeObjectVal機能のこの単純な実装を提案：

changeObjectVal = (id) => { 
    // here I need to first find the right object within the array 
    // and after that I should modify its aBoolean property to true 
    for(obj of myArrWithObjs) { 
     if(id === obj.id) { 
      obj.selected = true; 
      break; 
     } 
    } 
} 

Answer 5

あなたは反復するArray#forEachを使用して、オブジェクトを変更することができます。

const myArrWithObjs = [ 
 
    { id: 1, selected: false }, 
 
    { id: 2, selected: false }, 
 
    { id: 3, selected: false } 
 
]; 
 

 
myArrWithObjs.forEach((o) => o.id === 2 && (o.selected = true)); 
 

 
console.log(myArrWithObjs);