在之前的文章中,已經學會了變數、函式等基礎語法。今天,要來看一下 JavaScript 中的兩個非常重要的資料結構:陣列(Array) 和 物件(Object)。這兩者是儲存多筆資料的有效方式,並且讓我們能夠更靈活地管理和處理資料。
陣列是一種可以存放多個值的資料結構。當我們有一組相關的資料需要儲存時,陣列是一個非常實用的工具。每個陣列中的資料都有其對應的索引(index),從 0 開始。
如何定義陣列
在 JavaScript 中,我們可以使用方括號 [] 來定義一個陣列:
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // 輸出 "Apple"
這個範例意思是,建立了一個 fruits 陣列,並存放了三個水果(Apple、Banana、Cherry)。使用 fruits[0] 可以取得第一個元素。
常見的陣列操作
JavaScript 提供了許多內建方法來操作陣列,以下是一些常用的陣列方法:
fruits.push("Orange");
console.log(fruits); // 輸出 ["Apple", "Banana", "Cherry", "Orange"]
fruits.pop();
console.log(fruits); // 輸出 ["Apple", "Banana", "Cherry"]
fruits.shift();
console.log(fruits); // 輸出 ["Banana", "Cherry"]
fruits.unshift("Mango");
console.log(fruits); // 輸出 ["Mango", "Banana", "Cherry"]
迭代陣列
可以使用 for 迴圈來迭代陣列,或是使用更現代的 forEach 方法:
fruits.forEach(function(fruit) {
console.log(fruit);
});
這段程式碼會依次輸出每個水果。
物件是一種儲存**鍵值對(key-value pairs)**的資料結構,能夠用來描述更複雜的資料。每個鍵(key)都是一個字串,而每個值(value)可以是任何型別,包括其他物件或陣列。
如何定義物件
物件可以使用大括號 {} 來定義:
let person = {
name: "Alice",
age: 25,
city: "Taipei"
};
console.log(person.name); // 輸出 "Alice"
這個範例中,person 物件有三個屬性:name、age 和 city。我們可以透過點語法(dot notation)來存取屬性的值。
常見的物件操作
可以新增、修改或刪除物件的屬性:
person.job = "Engineer"; // 新增屬性
person.age = 30; // 修改屬性
console.log(person);
delete person.city;
console.log(person); // 輸出 { name: "Alice", age: 30, job: "Engineer" }
迭代物件屬性
可以使用 for...in 迴圈來迭代物件的屬性:
for (let key in person) {
console.log(key + ": " + person[key]);
}
這段程式碼會依次輸出物件的每個鍵與其對應的值。
陣列和物件可以結合使用,來構建更複雜的資料結構。例如,建立一個包含物件的陣列:
let people = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 35 }
];
console.log(people[1].name); // 輸出 "Bob"
或者在物件中包含陣列:
let company = {
name: "Tech Corp",
employees: ["Alice", "Bob", "Charlie"]
};
console.log(company.employees[2]); // 輸出 "Charlie"
今天,我學習了 JavaScript 中兩種最常用的資料結構:陣列 和 物件。它們分別用於儲存有序與無序的資料,並且可以結合使用來處理更複雜的資料。掌握這兩者之後,將大大提升處理資料的能力,未來將學習如何運用這些資料結構進行更複雜的操作。