JavaScript オブジェクトを走査するサンプル

JavaScriptのオブジェクトを走査するサンプルです。

目次	for文で取得(for...in文)
	オブジェクトがあるかの確認(if)
	オブジェクトに指定のプロパティがあるかの確認(if-in)
	配列の中のオブジェクトを確認

for文で取得(for...in文)

for (変数 in object) {... }

<script>
  const color1 = { c1: "赤", c2: "黄", c3: "青" };

  for (const c1 in color1) {
    console.log("キー:" + c1); //c1 c2 c3
    console.log("値:" + color1[c1]); //赤 黄 青
  }
</script>

5行目はキー、6行目は値を取得しています。

オブジェクトがあるかの確認(if)

if (typeof オブジェクト === "undefined")

オブジェクトの確認は、typeofとundefinedを使用します。

<script>
  const obj1 = {
    color1: "red",
  };

  if (typeof obj1 === "undefined") {
    console.log("true");
  }else{
    console.log("false"); //false (存在する)
  }

  if (typeof obj2 === "undefined") {
    console.log("true"); //true (存在しない)
  } else {
    console.log("false");
  }
</script>

undefined(未定義)の場合は、存在しないになります。

オブジェクトにプロパティがあるかの確認(if-in)

if (プロパティ名 in オブジェクト)

オブジェクトのプロパティの確認は、if文とinを使用します。

<script>
  const obj1 = {
    color1: "red",
  };

  if ("color1" in obj1) {
    console.log("true"); //true (存在する)
  } else {
    console.log("false");
  }

  if ("color2" in obj1) {
    console.log("true");
  } else {
    console.log("false"); //false (存在しない)
  }
</script>

プロパティが存在する場合は、trueになります。

配列の中のオブジェクトを確認

配列にオブジェクトをセットするサンプルです。

<script>
  const color1 = [
    { c1: "赤", c2: "黄" },
    { c3: "青", c4: "緑" },
  ];

  console.log(color1.length); //2 配列の要素数は2

  for (const c1 in color1) {
    console.log("キー:" + c1); //0 1
    console.log(color1[c1]); //{c1: "赤", c2: "黄"} {c3: "青", c4: "緑"}
  }

  color1.forEach((col) => {
    Object.keys(col).forEach((key) => {
      console.log(key); //c1 c2 c3 c4
      console.log(col[key]); //赤 黄 青 緑
    });
  });
</script>

2,5行目の[ ]は配列で3,4行目の{}はオブジェクトです。