JavaScript入門 - 配列とオブジェクト

配列とオブジェクト

配列とオブジェクトは、複数のデータをまとめて管理するための重要なデータ構造です。配列は順序付きのリスト、オブジェクトはキーと値のペアでデータを管理します。

タスク

配列の基本操作

配列の作成、要素の追加、アクセスを試してみましょう。

配列のメソッド

map、filter、reduceなどの配列メソッドを使ってみましょう。

オブジェクトの基本操作

オブジェクトの作成、プロパティの追加、アクセスを試してみましょう。

オブジェクトのメソッド

Object.keys、Object.valuesなどのメソッドを使ってみましょう。

ヒント

配列とオブジェクトの基本的な操作方法を学びましょう。

参考コード

// 配列とオブジェクトの例
const output = document.getElementById("output");

// 配列の例
const fruits = ["りんご", "バナナ", "オレンジ"];
output.innerHTML = "<h3>配列の例</h3>";
output.innerHTML += `<p>配列の長さ: ${fruits.length}</p>`;
output.innerHTML += `<p>最初の要素: ${fruits[0]}</p>`;
output.innerHTML += `<p>最後の要素: ${fruits[fruits.length - 1]}</p>`;

// 配列の操作
fruits.push("ぶどう");
output.innerHTML += `<p>追加後: ${fruits.join(", ")}</p>`;

// 配列のメソッド
const numbers = [1, 2, 3, 4, 5];
output.innerHTML += "<h3>配列のメソッド</h3>";
output.innerHTML += `<p>合計: ${numbers.reduce((a, b) => a + b, 0)}</p>`;
output.innerHTML += `<p>2倍にした配列: ${numbers.map(n => n * 2).join(", ")}</p>`;

// オブジェクトの例
const person = {
    name: "太郎",
    age: 25,
    hobbies: ["読書", "スポーツ"]
};
output.innerHTML += "<h3>オブジェクトの例</h3>";
output.innerHTML += `<p>名前: ${person.name}</p>`;
output.innerHTML += `<p>年齢: ${person.age}</p>`;
output.innerHTML += `<p>趣味: ${person.hobbies.join(", ")}</p>`;

// オブジェクトの操作
person.job = "エンジニア";
output.innerHTML += `<p>職業: ${person.job}</p>`;

// オブジェクトのメソッド
output.innerHTML += "<h3>オブジェクトのメソッド</h3>";
output.innerHTML += `<p>キーの一覧: ${Object.keys(person).join(", ")}</p>`;
output.innerHTML += `<p>値の一覧: ${Object.values(person).join(", ")}</p>`;