JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでnull・空のオブジェクトを含む配列に値を割り当てる方法

JavaScriptでは、forEach()メソッドとObject.keys()メソッドを組み合わせることで、nullや空のオブジェクトを含む配列に対して効率的に値を割り当てることができます。本記事では、実際のコード例を交えながら、その具体的な実装方法をわかりやすく解説します。

サンプルコード

以下は、JavaScriptを使用してnull/空のオブジェクトを持つ配列に値を割り当てるコード例です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
</style>
</head>
<body>
<h1>Assign values to an array with null/empty objects</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to assign values to empty object inside arrObj</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   let obj = {
      firstName: "Rohan",
      lastName: "Sharma",
      address: "Delhi",
   };
   let arrObj = [{}, {}, {}];
   BtnEle.addEventListener("click", () => {
      arrObj.forEach((item, index) => {
         item[Object.keys(obj)[index]] = obj[Object.keys(obj)[index]];
      });
      console.log(arrObj);
   });
</script>
</body>
</html>

コードの解説

このコードの仕組みを、重要なポイントごとに整理して説明します。

  • 空のオブジェクトを持つ配列の作成：let arrObj = [{}, {}, {}] のように記述することで、3つの空のオブジェクト要素を持つ配列を用意できます。
  • Object.keys()によるキーの取得：Object.keys(obj) を使うと、元のオブジェクト obj が持つプロパティ名（firstName、lastName、address）を配列形式で取得できます。
  • forEach()による反復処理：forEach((item, index) => ...) により、配列内の各空オブジェクトに対して順番に処理を実行し、インデックス番号をもとに対応するキーと値を特定します。
  • 値の代入：item[Object.keys(obj)[index]] = obj[Object.keys(obj)[index]] の処理によって、各空のオブジェクトに元のオブジェクトから取り出したプロパティ名と値が1組ずつ設定されていきます。

このように、あらかじめ空の状態で用意したオブジェクトの配列でも、既存オブジェクトのデータを流用しながら動的に値を埋めていくことが可能です。APIレスポンスの整形やテンプレートデータの初期化など、実務でもよく使われるテクニックなので覚えておくと便利でしょう。

出力結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptでnull・空のオブジェクトを含む配列に値を割り当てる方法

続いて、「CLICK HERE」ボタンをクリックし、ブラウザの開発者ツールでコンソールを確認してみましょう。

JavaScriptでnull・空のオブジェクトを含む配列に値を割り当てる方法

コンソールには console.log(arrObj) の結果が出力され、それぞれの空だったオブジェクトに「Rohan」「Sharma」「Delhi」という値が正しく割り当てられていることが確認できます。

  1. 【JavaScript入門】複数のオブジェクトを1つにマージして単一のオブジェクト配列を作成する方法

    JavaScriptでは、Object.assign()メソッドとスプレッド構文（...）を組み合わせることで、配列内の複数のオブジェクトを1つのオブジェクトに簡単にマージすることができます。 Object.assign()は、1つ以上のコピー元オブジェクトから、コピー先のオブジェクトへすべてのプロパティをコピーするためのメソッドです。スプレッド構文を使って配列の要素を展開することで、各オブジェクトのキーと値が1つのオブジェクトに統合されます。 コード例 以下のコードは、配列内の複数のオブジェクトを単一のオブジェクトにマージする例です。 <!DOCTYPE html> <ht

  2. JavaScriptでテーブルにNULL値が挿入されるのを防ぐ方法

    テーブルにNULL値が挿入されるのを防ぐには、値を入力する際に条件チェックを行う必要があります。NULLをチェックする条件は以下のように記述します。while( !( yourVariableName1==null || yourVariableName2==null || yourVariableName3==null……N){ // yourStatement1 . . N }このロジックを使用することで、NULL値が挿入されることを確実に防ぐことができます。次に、forループを使ってNULL値なしでテーブルに値を挿入します。以下がそのコードです。サンプルコ