7. 配列とオブジェクト
JavaScript において、配列とオブジェクトは非常に重要なデータ構造です。本チャプターでは、配列とオブジェクトについて、基本的な使い方から応用までを学びます。
7.1 配列
配列は、複数の値を一つの変数に格納するためのデータ構造です。
7.1.1 配列の作成
JavaScript で配列を作成するには、[]を使用します。
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
7.1.2 配列の操作
- 要素の追加:
pushメソッドを使います。
- 要素の削除:
popメソッドを使います。
let lastFruit = fruits.pop();
console.log(lastFruit); // Output: 'Durian'
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
7.1.3 配列のループ
配列をループ処理するための方法として、forループやforEachメソッドがあります。
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
fruits.forEach(function (fruit) {
console.log(fruit);
});
7.1.4 配列のメソッド
配列には様々な便利なメソッドが用意されています。
map: 配列の各要素に関数を適用した新しい配列を作成します。
let lengths = fruits.map(function (fruit) {
return fruit.length;
});
console.log(lengths); // Output: [5, 6, 6]
filter: 条件を満たす要素を抽出した新しい配列を作成します。
let longFruits = fruits.filter(function (fruit) {
return fruit.length > 5;
});
console.log(longFruits); // Output: ['Banana', 'Cherry']
7.2 オブジェクト
オブジェクトは、キーと値のペアを保持するデータ構造で、様々なデータの組み合わせを格納できます。
7.2.1 オブジェクトの作成
オブジェクトを作成するには、{}を使用します。
let person = {
name: "John",
age: 30,
job: "Developer",
};
console.log(person); // Output: {name: 'John', age: 30, job: 'Developer'}
7.2.2 オブジェクトの操作
- プロパティの追加と変更:
person.email = "john@example.com";
person.age = 31;
console.log(person); // Output: {name: 'John', age: 31, job: 'Developer', email: 'john@example.com'}
- プロパティの削除:
delete person.job;
console.log(person); // Output: {name: 'John', age: 31, email: 'john@example.com'}
7.2.3 オブジェクトのループ
オブジェクトのプロパティをループ処理するには、for...inループを使用します。
for (let key in person) {
console.log(key + ": " + person[key]);
}
// Output:
// name: John
// age: 31
// email: john@example.com
7.2.4 オブジェクトのメソッド
オブジェクトには関数をプロパティとして持つことができます。
let car = {
brand: "Toyota",
model: "Corolla",
start: function () {
console.log("The car has started.");
},
};
car.start(); // Output: The car has started.
7.3 配列とオブジェクトの組み合わせ
配列の中にオブジェクトを持つことや、オブジェクトの中に配列を持つことが可能です。
7.3.1 配列の中にオブジェクト
let people = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 28 },
{ name: "Charlie", age: 22 },
];
people.forEach(function (person) {
console.log(person.name + " is " + person.age + " years old.");
});
7.3.2 オブジェクトの中に配列
let company = {
name: "Tech Corp",
employees: ["Alice", "Bob", "Charlie"],
};
console.log(company.employees); // Output: ['Alice', 'Bob', 'Charlie']
7.4 まとめ
配列とオブジェクトは JavaScript プログラミングにおける基礎的なデータ構造です。これらの基本操作を理解し、様々な状況で活用できるようになりましょう。まずはループやメソッドを駆使して、多様なデータを効率よく管理、操作する練習をしてみてください。