JavaScript での配列とオブジェクトの探索

6 日目: JavaScript での配列とオブジェクトの探索

日付: 2024 年 12 月 13 日

JavaScript の旅の 6 日目へようこそ!今日は、JavaScript の 2 つの重要なデータ構造、配列 と オブジェクト について詳しく説明します。これらの構造は、現代の Web 開発におけるデータ操作のバックボーンを形成します。配列とオブジェクトをマスターすることで、データを効率的に保存、アクセス、変換するための強力な方法が得られます。

---

1.配列とは何ですか?

配列は、連続したメモリ位置に格納されている項目 (要素と呼ばれる) のコレクションです。 JavaScript では、配列は多用途であり、混合データ型を保持できます。

配列の作成

// Empty array
let emptyArray = [];

// Array with initial elements
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// Mixed data types
let mixedArray = [42, "Hello", true];
console.log(mixedArray); // Output: [42, "Hello", true]

---

2.配列の操作

要素の追加と削除

• push: 要素を最後に追加します。
• pop: 最後の要素を削除します。
• unshift: 要素を先頭に追加します。
• shift: 最初の要素を削除します。

例:

let numbers = [1, 2, 3];
numbers.push(4); // Adds 4 to the end
console.log(numbers); // Output: [1, 2, 3, 4]

numbers.pop(); // Removes the last element
console.log(numbers); // Output: [1, 2, 3]

numbers.unshift(0); // Adds 0 to the beginning
console.log(numbers); // Output: [0, 1, 2, 3]

numbers.shift(); // Removes the first element
console.log(numbers); // Output: [1, 2, 3]

---

3.一般的な配列メソッド

map: 配列内の各要素を変換します。

let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

filter: 条件に基づいて要素をフィルターします。

let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults); // Output: [18, 22]

reduce: 配列を単一の値に削減します。

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

---

4.オブジェクトとは何ですか?

オブジェクトはプロパティのコレクションであり、各プロパティはキーと値のペアです。オブジェクトは、属性を持つ現実世界のエンティティを表現するのに最適です。

オブジェクトの作成

let person = {
  name: "Arjun",
  age: 22,
  isStudent: true,
};
console.log(person.name); // Output: Arjun
console.log(person["age"]); // Output: 22

---

5.オブジェクトの操作

プロパティの追加と更新

let car = {
  brand: "Tesla",
};
car.model = "Model 3"; // Adding a new property
car.brand = "Ford";    // Updating a property
console.log(car); // Output: { brand: "Ford", model: "Model 3" }

プロパティの削除

delete car.model;
console.log(car); // Output: { brand: "Ford" }

---

6.共通のオブジェクト メソッド

オブジェクトの反復

• Object.keys: キーの配列を返します。
• Object.values: 値の配列を返します。
• Object.entries: キーと値のペアの配列を返します。

例:

// Empty array
let emptyArray = [];

// Array with initial elements
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// Mixed data types
let mixedArray = [42, "Hello", true];
console.log(mixedArray); // Output: [42, "Hello", true]

---

7.配列とオブジェクト

機能 配列 オブジェクト

Feature	Arrays	Objects
Storage	Ordered collection of items.	Unordered collection of key-value pairs.
Access	Index-based (arr[0]).	Key-based (obj.key).
Best Use Case	List of related items.	Grouping attributes of an entity.

ストレージ 順序付けられたアイテムのコレクション。 キーと値のペアの順序なしのコレクション。

---

アクセス

インデックスベース (arr[0])。 キーベース (obj.key)。 ベストユースケース 関連アイテムのリスト。 エンティティのグループ化属性。

8.実際の例

let numbers = [1, 2, 3];
numbers.push(4); // Adds 4 to the end
console.log(numbers); // Output: [1, 2, 3, 4]

numbers.pop(); // Removes the last element
console.log(numbers); // Output: [1, 2, 3]

numbers.unshift(0); // Adds 0 to the beginning
console.log(numbers); // Output: [0, 1, 2, 3]

numbers.shift(); // Removes the first element
console.log(numbers); // Output: [1, 2, 3]

例 1: 配列を使用した ToDo リスト

let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

例 2: オブジェクトを使用して人物を表現する

let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults); // Output: [18, 22]

---

例 3: 配列とオブジェクトの結合

• 9.重要なポイント
• 配列
: 順序付けされたコレクションに使用します。マップ、フィルター、リデュースなどのメソッドを活用して強力な変換を行います。
• オブジェクト
: キーと値のペアを持つ構造化データに使用します。 Object.keys や Object.values などのマスター メソッド。

---

Combined Power: 配列とオブジェクトをブレンドして、複雑なデータをモデル化し、操作します。

6日目の練習
お気に入りの映画の配列を作成し、項目を動的に追加/削除します。

---

タイトル、著者、年などのプロパティを持つ本を表すオブジェクトを作成します。書籍の詳細をログに記録するメソッドを追加します。

数値の配列に対してマップとフィルターを使用して、偶数の二乗を取得します。

次のステップ

7 日目では、Web アプリケーションに対話性をもたらす イベントと DOM に焦点を当てます。また明日！

以上がJavaScript での配列とオブジェクトの探索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。