探索 JavaScript 中的陣列和對象

第 6 天：探索 JavaScript 中的陣列和物件

日期：2024 年 12 月 13 日

歡迎來到 JavaScript 之旅的第六天！今天，我們深入研究 JavaScript 中的兩個基本資料結構：陣列 和 物件。這些結構構成了現代 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：使用陣列的待辦事項清單

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 等方法。

---

組合能力：混合陣列和物件來建模和操作複雜資料。

第六天練習
建立您最喜歡的電影的陣列並動態新增/刪除項目。

---

建立一個物件來表示一本書，具有標題、作者和年份等屬性。新增記錄書籍詳細資訊的方法。

對數字數組使用映射和過濾器來獲取偶數的平方。

後續步驟

在

第 7 天，我們將專注於事件和 DOM——為您的 Web 應用程式帶來互動性。明天見！

以上是探索 JavaScript 中的陣列和對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！