JavaScriptでidによる単一プロパティの変更

オブジェクト全体ではなく、特定のプロパティだけを変更する必要がある場合があります。その方法を見てみましょう。

変数 arr にオブジェクトの配列があるとします：

let arr = [
	{
		id: 'GYi9GauC4gBF1e2SixDvu',
		prop1: 'value11',
		prop2: 'value12',
		prop3: 'value13',
	},
	{
		id: 'IWSpfBPSV3SXgRF87uO74',
		prop1: 'value21',
		prop2: 'value22',
		prop3: 'value23',
	},
	{
		id: 'JAmjRlfQT8rLTm5tG2m1L',
		prop1: 'value31',
		prop2: 'value32',
		prop3: 'value33',
	},
];

次の変数には、要素の id、変更するプロパティ名、およびプロパティの新しい値が格納されているとします：

let id = 'IWSpfBPSV3SXgRF87uO74';
let prop = 'prop1';
let value = '!!!';

この問題を解決するには、分割代入と計算されたプロパティ名を活用すると便利です：

let res = arr.map(elem => {
	if (elem.id === id) {
		return {...elem, [prop]: value};
	} else {
		return elem;
	}
});

次の変数が与えられています：

let id = 'JAmjRlfQT8rLTm5tG2m1L';
let prop = 'prop2';

クリック時に、指定された id を持つ配列の要素を取得し、その中から指定された名前のプロパティを取得して、そのプロパティ値の末尾に記号 '!' を追加するボタンを作成してください。

プロパティ名を持つ2つの変数が与えられているとします：

let id = 'JAmjRlfQT8rLTm5tG2m1L';
let prop1 = 'prop2';
let prop2 = 'prop3';

前のタスクを変更して、クリック時に指定された2つのプロパティに対して同時に変更が行われるようにしてください。

理論で紹介された解決策を、Object.assign を使用したオブジェクトのコピー方法に書き換えてください。