Java Scriptの基礎その17　オブジェクトと配列の操作

イントロダクション

JavaScriptは、Web開発において非常に重要なプログラミング言語です。この記事では、オブジェクト、配列の操作、およびループの使い方についての具体的な例を通じて、JavaScriptの基本的な構文と機能を説明します。以下のコードを段階的に解説し、各要素が何を示しているかを丁寧に説明していきます。

オブジェクトと配列の定義

武器システムの定義

const weaponSystem = {
  primaryWeapon: [
    "アサルトライフル",
    "サブマシンガン",
    "ショットガン",
    "バズーカ",
  ],
  subWeapon: ["ピストル", "ナイフ", "メディキット"],
};

このコードは、weaponSystemというオブジェクトを定義しています。このオブジェクトには、primaryWeaponとsubWeaponという2つのプロパティがあります。各プロパティは配列であり、主要武器と副武器のリストを格納しています。

全ての武器を結合

const allWeapons = [...weaponSystem.primaryWeapon, ...weaponSystem.subWeapon];

この部分では、スプレッド構文（...）を使って、primaryWeaponとsubWeaponの配列を結合し、新しい配列allWeaponsを作成しています。

配列の操作

全ての武器を出力

for (const item of allWeapons) console.log(allWeapons);

このループでは、allWeapons配列の各要素を反復処理し、全ての武器のリストをコンソールに出力します。ただし、このコードは全ての武器を個別に出力するのではなく、全体の配列を繰り返し出力します。

インデックスと要素の出力

for (const [index, elements] of allWeapons.entries()) {
  console.log(index, elements);
}

ここでは、allWeapons配列の各要素にインデックスを付けて出力しています。entries()メソッドを使うことで、配列のインデックスとその要素をペアで取得できます。

営業時間の定義

曜日と営業時間

const weekDays = ["月", "火", "水", "木", "金", "土", "日"];
const openingHours = {
  [weekDays[0]]: {
    open: 7,
    close: 17,
  },
  [weekDays[1]]: {
    open: 8,
    close: 18,
  },
  [weekDays[2]]: {
    open: 9,
    close: 19,
  },
  [weekDays[3]]: {
    open: 10,
    close: 20,
  },
  [weekDays[4]]: {
    open: 0,
    close: 0,
  },
};

この部分では、weekDays配列に曜日を格納し、openingHoursオブジェクトに各曜日の営業時間を定義しています。各曜日はオブジェクトのキーとして使用され、その値は開店時間と閉店時間を持つオブジェクトです。

オブジェクトのプロパティ操作

プロパティキーの取得

const properties = Object.keys(openingHours);
console.log(properties);

このコードは、openingHoursオブジェクトの全てのキー（曜日）を配列として取得し、コンソールに出力します。

営業日数の出力

let openStr = `本店は${properties.length}日開いてます。`;
for (const day of properties) {
  openStr += `${day}`;
}
console.log(openStr);

ここでは、営業日数と各営業曜日を文字列として結合し、コンソールに出力します。

プロパティ値の取得

const values = Object.values(openingHours);
console.log(values);

このコードは、openingHoursオブジェクトの全ての値を配列として取得し、コンソールに出力します。

オブジェクト全体の取得

const entries = Object.entries(openingHours);
console.log(entries);

この部分では、openingHoursオブジェクトの全てのキーと値のペアを配列として取得し、コンソールに出力します。

各曜日の営業時間を出力

for (const [key, { open, close }] of entries) {
  console.log(`${key}曜日には${open}時に開いて${close}時に閉店します。`);
}

このループでは、entries配列の各要素を反復処理し、各曜日の開店時間と閉店時間をコンソールに出力します。

まとめ

この記事では、JavaScriptを使ったオブジェクトと配列の操作方法について説明しました。具体的な例を通じて、オブジェクトのプロパティや配列の結合、ループの使い方を理解していただけたと思います。これらの基本的な技術は、日常的なプログラミングタスクを効率的にこなすための基礎となります。これからも練習を重ね、より複雑なスクリプトを書けるようになりましょう。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！