このチュートリアルでは、JavaScript で配列内のオブジェクトの値を変更する方法を示します。
JavaScript を使用して配列内にあるオブジェクトの値を変更/更新する方法は?
配列内にあるオブジェクトの値を変更するには、次の JavaScript 定義済みメソッドを使用します。
方法 1: 「findIndex()」メソッドを使用して配列内にあるオブジェクトの値を変更する
配列内のオブジェクトの値を変更するには、「 findIndex() ' 方法。このメソッドは、特定の条件を満たす配列内の要素のインデックスを見つけます。条件の指定には、コールバック関数を使用します。
構文
findIndex() メソッドを使用してオブジェクトの値を変更するには、次の構文に従います。
配列オブジェクト。 検索インデックス ( オブジェクト => {
//状態
} ) ;
例
さまざまなオブジェクトを含む配列を作成します。
だった arrObj = [ { ID : 5 、 名前 : 「メイヤー」 、 年 : 25 } 、
{ ID : 9 、 名前 : 「ポール」 、 年 : 26 } 、
{ ID : 12 、 名前 : 「スティーブン」 、 年 : 20 } ]
「 12 」、オブジェクトのインデックスを変数「 getIndex 」：
定数 getIndex = arrObj。 検索インデックス ( オブジェクト => {戻る オブジェクト。 ID === 12 ;
} ) ;
プロパティの値を変更します “ 年 」 オブジェクトの:
arrObj [ getIndex ] . 年 = 24 ;
最後に、更新されたオブジェクトの配列をコンソールに出力します。
コンソール。 ログ ( 「更新されたオブジェクトの配列は次のとおりです:」 ) ;コンソール。 ログ ( arrObj ) ;
出力は、「 年 ID が 12 のオブジェクトの ' が ' から正常に変更されました 20 ' に ' 24 」：
方法 2: スプレッド演算子で「map()」メソッドを使用して、配列内にあるオブジェクトの値を変更する
「を活用する 地図（） ” を使用したメソッド スプレッドオペレーター 」 配列内のオブジェクトの値を変更します。 「map()」は、既存の配列の各要素に対して関数を呼び出して新しい配列を作成するために使用されます。スプレッド演算子を使用すると、配列要素を新しい配列または関数呼び出しの引数に分散またはコピーできます。 「map()」メソッドは元の配列を変更/変更しませんが、変更された要素を持つ新しい配列を出力します。
構文
map() メソッドとスプレッド演算子を使用してオブジェクトの値を変更するには、次の構文を使用します。
もしも ( 状態 ) {
戻る { ... オブジェクト 、 鍵 : 新しい値 } ;
}
戻る オブジェクト ;
} ) ;
例
スプレッド演算子を指定して map() メソッドを呼び出し、id が「 9 」：
もしも ( オブジェクト。 ID === 9 ) {
戻る { ... オブジェクト 、 名前 : 「アリス」 } ;
}
戻る オブジェクト ;
} ) ;
オブジェクトの変更された配列をコンソールに出力します。
コンソール。 ログ ( newObjectArr ) ;プロパティ「 名前 」 ID が「 9 」が「」から変更されました。 ポール ' に ' アリス 」：
方法 3: 「find()」メソッドを使用して配列内にあるオブジェクトの値を変更する
配列内のオブジェクトの値を変更するには、「 探す（） ' 方法。特定の条件を満たす配列内の要素を見つけるために使用されます。条件を満たした場合、要素の値を出力します。それ以外の場合、「 未定義 、」は、そのような要素が見つからないことを示します。
構文
配列内の要素を検索するには、find() メソッドに指定された構文を使用します。
//状態
} ) ;
例
find() メソッドを呼び出して、ID が「 5 」そしてオブジェクトを変数に保存します「 検索インデックス 」：
戻る オブジェクト。 ID === 5 ;
} ) ;
変数「findIndex」が「 未定義 」は、オブジェクトが見つかった場合、プロパティの値を変更することを意味します。 名前 」 オブジェクトの:
もしも ( 検索インデックス !== 未定義 ) {findIndex. 名前 = 「ジョン」 ;
}
最後に、オブジェクトをコンソールに出力します。
コンソール。 ログ ( 検索インデックス ) ;出力には、値を変更することにより、指定されたオブジェクトのみが表示されます。
方法 4: 「for-of」ループを使用して配列内にあるオブジェクトの値を変更する
また、「 の 」 配列内のオブジェクトの値を変更するためのループ。オブジェクトの配列を反復処理し、条件をチェックしてオブジェクトの値を変更するために使用されます。オブジェクトの値にアクセスして変更したら、「 壊す 」キーワード。
構文
「for-of」ループの指定された構文に従います。
もしも ( 状態 ) {
//声明
壊す ;
}
}
例
for-of ループを使用して、ID が「 5 」を変更し、「 年 ' に ' 27 」：
もしも ( オブジェクト。 ID === 5 ) {
オブジェクト。 年 = 27 ;
壊す ;
}
}
配列内の更新されたオブジェクトをコンソールに出力します。
コンソール。 ログ ( arrObj ) ;出力
JavaScript の配列内にあるオブジェクトの値の変化に関連する重要な情報をすべて収集しました。
結論
配列内にあるオブジェクトの値を変更するには、「 findIndex() 、」 地図（） ”メソッド” スプレッドオペレーター 」、「 探す（） 」メソッド、または「 の 」 ループ。これらのメソッドは、配列内のオブジェクトの値を正常に変更しました。このチュートリアルでは、JavaScript の配列内にあるオブジェクトの値を変更するためのさまざまなアプローチを示しました。