オブジェクトと配列の整理

◆◆オブジェクト◆◆

◆オブジェクトとは

「名前」と「値」がセットになったデータ(プロパティ)を複数保持するデータ構造の
ことです。

JavaScript

{
    プロパティ名1 : 値1,  // カンマを忘れない！
    プロパティ名2 : 値2,
    プロパティ名3 : 値3,
}

◆データに名前をつける

データに名前をつけるには、定数にオブジェクトを代入します。
データの値は関数も可能。

JavaScript

const user = {
  name: "田中",
  id: "ABC123",
    getName: function (id) {
    if (id === this.id) {
      return this.name
    }
    return "IDが見つかりません"
  },
}

console.log(user)
// {name: '田中', id: 'ABC123', getName: ƒ}

◆定数内のデータを取り出す、関数を呼び出す

データを取り出す書き方は、ピリオドで定数とプロパティ名を繋げるドット記法と、
ブラケットを使用するブラケット記法があります。

関数を呼び出す場合は引数のカッコを忘れずに。
ブラケット記法の場合はブラケットの外に引数のカッコを書きます。

JavaScript

console.log(user.name)    // ドット記法
// 田中
console.log(user["name"])    // ブラケット記法
// 田中
console.log(user.id)    // ドット記法
// ABC123
console.log(user.getName("ABC123"))    // ドット記法
// 田中
console.log(user.getName("ABC111"))    // ドット記法
// IDが見つかりません
console.log(user['getName']("ABC111"))    // ブラケット記法
// IDが見つかりません

◆オブジェクトの内部にオブジェクト

オブジェクト内にオブジェクト・・・となっても取り出し方は変わりません。

JavaScript

const users = {
  user1: { name: "田中", id: "ABC123" },
  user2: { name: "加藤", id: "DEF456" },
  user3: { name: "鈴木", id: "GHI789" },
}

console.log(users)
// {user1: {…}, user2: {…}, user3: {…}}
console.log(users.user1.name)
// 田中
console.log(users["user2"]["id"])
// DEF456

◆◆配列◆◆

◆配列とは

オブジェクトと同じように複数の値を保持しておけるデータ構造のこと。
オブジェクトと異なる点はプロパティを持たず、インデックス番号が自動でつくこと
です。

JavaScript

[値1, 値2, 値3]

◆データに名前をつける

オブジェクトと同じように定数に配列を代入すると、データに名前をつけることが
できます。

JavaScript

const users = ["山田", "佐藤", "青木"]

console.log(users)
// ['山田', '佐藤', '青木']

◆定数内のデータを取り出す

データを取り出す書き方はインデックス番号を使用します。
インデックス番号は0から始まる番号なので注意。

JavaScript

console.log(users[0])
// 山田
console.log(users[1])
// 佐藤
console.log(users[2])
// 青木

◆配列の内部に配列

配列内に配列(多次元配列)・・・となっても、インデックス番号を一つずつ繋げて
いくだけ。

JavaScript

const users = [
  ["山田", 26, "青森"],
  ["佐藤", 31, "茨城"],
  ["青木", 35, "広島"],
]

console.log(users)
// [Array(3), Array(3), Array(3)]
console.log(users[0])
// ['山田', 26, '青森']
console.log(users[0][1])
// 26
console.log(users[1][2])
// 茨城
console.log(users[2][0])
// 青木

◆◆オブジェクトと配列の組み合わせ◆◆

オブジェクト内にオブジェクト、配列内に配列があれば、オブジェクトと配列の
組み合わせももちろんあります。

JavaScript

const game = {
  startBtn: document.getElementById("id1"),
  slot: [
    {
      numViewer: [
        { num: 9, element: document.getElementById("id2") },
        { num: 0, element: document.getElementById("id3") },
        { num: 1, element: document.getElementById("id4") },
      ],
      stopBtn: document.getElementById("id5"),
      timerId: null,
    },
    {
      numViewer: [
        { num: 9, element: document.getElementById("id6") },
        { num: 0, element: document.getElementById("id7") },
        { num: 1, element: document.getElementById("id8") },
      ],
      stopBtn: document.getElementById("id9"),
      timerId: null,
    },
    {
      numViewer: [
        { num: 9, element: document.getElementById("id10") },
        { num: 0, element: document.getElementById("id11") },
        { num: 1, element: document.getElementById("id12") },
      ],
      stopBtn: document.getElementById("id13"),
      timerId: null,
    },
  ],
};

(スロットマシンを作成した際のコードの抜粋ですが、初学者の私には非常に複雑だと
感じました・・・
もちろんスクールの学習メンターの方に修正されたものです。
しかしながらこの後のコードが非常に簡潔に書くことができたので、オブジェクトと
配列の組み合わせからは逃れられないのです。)

◆データの取り出し

データは上層から順番に追っていく必要があります。
順番を飛ばしてしまうと希望のデータまで辿り着きません。

JavaScript

console.log(game)
// {startBtn: input#id1, slot: Array(3)}
console.log(game[0])
// undefined  <- 順番が違うと取り出せない
console.log(game.startBtn)
// input#id1
console.log(game.slot)
// [{…}, {…}, {…}]
console.log(game.slot[0]);
// {numViewer: Array(3), stopBtn: input#id5, timerId: null}
console.log(game.slot[0].numViewer);
// [{…}, {…}, {…}]
console.log(game.slot[0].numViewer[0]);
// {num: 9, element: p#id2}
console.log(game.slot[0].numViewer[0].element);
// <p id="id2">9</p>

落ち着いて一つずつ紐解いていくと理解しやすいので、慣れないうちはコンソールで
確認しながら書いていくことが一番の近道です。