JavaScript 基礎 (II) – 複合資料型別：陣列與物件

學會陣列與物件，掌握資料分類與儲存。將零散資訊組合成結構化資料，為數據分析打下基礎。

---

1. 陣列 (Array)

1.1 為什麼需要 Array？

在資料科學裡，我們常常需要處理很多資料。 如果用單一變數會很麻煩：

let score1 = 85;
let score2 = 90;
let score3 = 78;
let score4 = 92;
let score5 = 87;

👉 當資料一多，就會變得很難管理。

這時候，我們就用 Array（陣列），它就像一個收納盒，可以依順序放很多資料。

let scores = [85, 90, 78, 92, 87];

---

1.2 建立 Array

在 JavaScript 裡，可以用 [] 來建立 Array：

let scores = [85, 90, 78];
console.log(scores);

輸出：

[ 85, 90, 78 ]

也可以建立其他類型的陣列：

let names = ["Alice", "Bob", "Carol"];
let mixed = [1, "hello", true, 3.14];

---

1.3 存取 Array 的元素

Array 的元素有編號 (index)，從 0 開始：

let scores = [85, 90, 78];
console.log(scores[0]); // 85
console.log(scores[1]); // 90
console.log(scores[2]); // 78

👉 記住：第一個元素的編號是 0，不是 1！

---

1.4 修改 Array

let scores = [85, 90, 78];
scores[1] = 95; // 把第 2 個元素改成 95
console.log(scores); // [ 85, 95, 78 ]

---

1.5 Array 的長度

let scores = [85, 90, 78, 92, 87];
console.log(scores.length); // 5

可以用 length 來存取最後一個元素：

console.log(scores[scores.length - 1]); // 87

---

1.6 常用 Array 方法

方法	功能	範例
push()	加到最後	scores.push(88)
pop()	移除最後	scores.pop()
shift()	移除最前面	scores.shift()
unshift()	加到最前面	scores.unshift(100)
indexOf()	找到元素位置	scores.indexOf(90)
includes()	檢查是否包含	scores.includes(85)

範例：

let scores = [85, 90];
scores.push(78);     // [85, 90, 78]
scores.unshift(100); // [100, 85, 90, 78]
scores.pop();        // [100, 85, 90]
console.log(scores.length); // 3

console.log(scores.indexOf(85)); // 1
console.log(scores.includes(90)); // true

---

1.7 陣列的複製與切片

let original = [1, 2, 3, 4, 5];
let copy = original.slice(); // 複製整個陣列
let part = original.slice(1, 4); // [2, 3, 4]

console.log(copy);    // [1, 2, 3, 4, 5]
console.log(part);    // [2, 3, 4]

---

1.8 常見錯誤與注意事項

小心陣列越界：

let scores = [85, 90, 78];
console.log(scores[5]); // undefined（不會報錯，但得到 undefined）

直接修改 length 的影響：

let arr = [1, 2, 3, 4, 5];
arr.length = 3;
console.log(arr); // [1, 2, 3]（後面的元素被刪除了）

---

2. 物件 (Object)

2.1 為什麼需要 Object？

在資料科學裡，一筆資料往往有多個屬性（例如：姓名、年齡、分數）。 如果只用陣列，會變成這樣：

let student = ["Alice", 20, 85];

👉 問題：我們怎麼知道 20 是年齡，85 是分數？ 這樣寫程式容易讓人混亂。

這時候就需要 Object（物件），它就像一個資料表的一列，每個欄位都有名字。

---

2.2 建立 Object

Object 用 {} 建立，裡面用 「屬性名: 值」 的方式表示：

let student = {
  name: "Alice",
  age: 20,
  score: 85
};
console.log(student);

輸出：

{ name: 'Alice', age: 20, score: 85 }

---

2.3 存取 Object 的屬性

有兩種方法可以存取屬性：

1. 點記號 (dot notation)

console.log(student.name);  // Alice
console.log(student.age);   // 20
console.log(student.score); // 85

2. 中括號記號 (bracket notation)

console.log(student["name"]);  // Alice
console.log(student["score"]); // 85

👉 中括號記號特別適合屬性名稱存在變數裡的時候：

let property = "age";
console.log(student[property]); // 20

---

2.4 修改 Object 的屬性

let student = {
  name: "Alice",
  age: 20,
  score: 85
};

student.age = 21;
student["score"] = 90;

console.log(student);
// { name: 'Alice', age: 21, score: 90 }

---

2.5 新增或刪除屬性

新增屬性：

student.major = "Computer Science";
student["email"] = "[email protected]";
console.log(student);
// { name: 'Alice', age: 21, score: 90, major: 'Computer Science', email: '[email protected]' }

刪除屬性：

delete student.age;
console.log(student);
// { name: 'Alice', score: 90, major: 'Computer Science', email: '[email protected]' }

---

2.6 檢查屬性是否存在

let student = {
  name: "Bob",
  score: 88
};

console.log("name" in student);  // true
console.log("age" in student);   // false
console.log(student.age);        // undefined

---

2.7 巢狀物件

物件裡面可以包含其他物件：

let student = {
  name: "Carol",
  personalInfo: {
    age: 19,
    city: "Taipei",
    phone: "0912-345-678"# JavaScript 基礎 (II) – 複合資料型別：陣列與物件
  },
  academic: {
    major: "Mathematics",
    year: 2,
    gpa: 3.8
  }
};

console.log(student.name);                    // Carol
console.log(student.personalInfo.age);        // 19
console.log(student.academic.major);          // Mathematics

---

2.8 物件的常見錯誤

屬性名稱打錯：

let student = { name: "David", score: 95 };
console.log(student.scroe); // undefined（注意拼字錯誤）

忘記逗號分隔：

// 錯誤的寫法
let student = {
  name: "Eve"
  age: 20  // 缺少逗號會造成語法錯誤
};

正確的寫法：

let student = {
  name: "Eve",
  age: 20
};

---

3. 陣列與物件的結合

在真實的資料科學應用裡，我們通常會結合使用 Array 和 Object。

3.1 Array 裝 Object

這是最常見的情況：每一筆資料是一個物件，然後用陣列存放多筆資料。

let students = [
  { name: "Alice", age: 20, score: 85 },
  { name: "Bob",   age: 22, score: 90 },
  { name: "Carol", age: 19, score: 78 }
];

console.log(students[0]);        // { name: 'Alice', age: 20, score: 85 }
console.log(students[1].name);   // Bob
console.log(students[2].score);  // 78

👉 在這裡，students 就像一個「資料表」，裡面有三筆「學生資料」。

---

3.2 Object 裝 Array

有時候，我們會想把同一類的多個資料放在一起：

let student = {
  name: "Alice",
  testScores: [85, 90, 78, 92],
  subjects: ["Math", "English", "Science", "History"]
};

console.log(student.name);           // Alice
console.log(student.testScores);     // [85, 90, 78, 92]
console.log(student.testScores[1]);  // 90
console.log(student.subjects[0]);    // Math

👉 這裡 testScores 和 subjects 都是陣列，分別存放分數和科目。

---

3.3 複雜的巢狀結構

結合前面的概念，可以建立更複雜的資料結構：

let classroom = {
  className: "A",
  teacher: {
    name: "A老師",
    email: "[email protected]",
    subjects: ["程式設計", "資料結構"]
  },
  students: [
    {
      name: "B學生",
      info: { age: 19, major: "CS" },
      grades: [85, 90, 78]
    },
    {
      name: "C學生",
      info: { age: 20, major: "Math" },
      grades: [88, 92, 95]
    }
  ]
};

// 存取範例
console.log(classroom.teacher.name);           // A老師
console.log(classroom.students[0].name);       // B學生
console.log(classroom.students[1].grades[2]);  // 95

---

4. 除錯技巧

4.1 使用 console.table

對於陣列和物件，使用 console.table 可以更清楚地檢視資料：

let students = [
  { name: "Alice", score: 85 },
  { name: "Bob", score: 90 }
];

console.table(students);

4.2 檢查資料類型

console.log(typeof students);        // object
console.log(Array.isArray(students)); // true
console.log(Array.isArray(students[0])); // false

4.3 安全地存取巢狀屬性

// 不安全的寫法
// console.log(student.info.age); // 如果 info 不存在會出錯

// 較安全的寫法
if (student.info) {
  console.log(student.info.age);
}

---

5. 小結

通過這章的學習，你已經掌握了：

• 陣列的建立、存取和操作
• 物件的建立、屬性管理
• 陣列與物件的結合使用
• 巢狀資料結構的處理

---