iT邦幫忙

2024 iThome 鐵人賽

DAY 9
0
JavaScript

學習網頁的眉眉角角系列 第 9

Day 9 :JavaScript 的資料結構「陣列與物件」

  • 分享至 

  • xImage
  •  

在之前的文章中,已經學會了變數、函式等基礎語法。今天,要來看一下 JavaScript 中的兩個非常重要的資料結構:陣列(Array)物件(Object)。這兩者是儲存多筆資料的有效方式,並且讓我們能夠更靈活地管理和處理資料。

1. 陣列(Array)

陣列是一種可以存放多個值的資料結構。當我們有一組相關的資料需要儲存時,陣列是一個非常實用的工具。每個陣列中的資料都有其對應的索引(index),從 0 開始。
如何定義陣列
在 JavaScript 中,我們可以使用方括號 [] 來定義一個陣列:

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // 輸出 "Apple"

這個範例意思是,建立了一個 fruits 陣列,並存放了三個水果(Apple、Banana、Cherry)。使用 fruits[0] 可以取得第一個元素。

常見的陣列操作
JavaScript 提供了許多內建方法來操作陣列,以下是一些常用的陣列方法:

  • push():將元素添加到陣列末尾。
fruits.push("Orange");
console.log(fruits); // 輸出 ["Apple", "Banana", "Cherry", "Orange"]
  • pop():移除陣列末尾的元素。
fruits.pop();
console.log(fruits); // 輸出 ["Apple", "Banana", "Cherry"]
  • shift():移除陣列開頭的元素。
fruits.shift();
console.log(fruits); // 輸出 ["Banana", "Cherry"]
  • unshift():將元素添加到陣列的開頭。
fruits.unshift("Mango");
console.log(fruits); // 輸出 ["Mango", "Banana", "Cherry"]

迭代陣列
可以使用 for 迴圈來迭代陣列,或是使用更現代的 forEach 方法:

fruits.forEach(function(fruit) {
    console.log(fruit);
});

這段程式碼會依次輸出每個水果。

2. 物件(Object)

物件是一種儲存**鍵值對(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]);
}

這段程式碼會依次輸出物件的每個鍵與其對應的值。

3. 陣列與物件的結合

陣列和物件可以結合使用,來構建更複雜的資料結構。例如,建立一個包含物件的陣列:

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 中兩種最常用的資料結構:陣列 和 物件。它們分別用於儲存有序與無序的資料,並且可以結合使用來處理更複雜的資料。掌握這兩者之後,將大大提升處理資料的能力,未來將學習如何運用這些資料結構進行更複雜的操作。


上一篇
Day 8 : JavaScript 「函式」重複使用程式碼的關鍵
下一篇
Day 10 : JavaScript 「事件處理」讓網頁與使用者互動
系列文
學習網頁的眉眉角角17
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言