Back
PQCHub

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) – 複合資料型別：陣列與物件



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

---


## 1 陣列 (Array) 

### 1.1 為什麼需要 Array？

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

```js
let score1 = 85;
let score2 = 90;
let score3 = 78;

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

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

1.2 建立 Array

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

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

輸出：

[ 85, 90, 78 ]

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

1.4 修改 Array

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

1.5 常用 Array 方法

方法 功能 範例
push() 加到最後 scores.push(88)
pop() 移除最後 scores.pop()
shift() 移除最前面 scores.shift()
unshift() 加到最前面 scores.unshift(100)
length 長度 scores.length

範例：

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

2 物件 (Object)

2.1 為什麼需要 Object？

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

let student = ["Alice", 20, 85];
console.log(student);

👉 問題：我們怎麼知道 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
  1. 中括號記號 (bracket notation) （特別適合屬性名稱存在變數裡時）
console.log(student["score"]); // 85

2.4 修改 Object 的屬性

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

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

2.5 新增或刪除屬性

// 新增屬性
student.major = "Computer Science";
console.log(student);

// 刪除屬性
delete student.age;
console.log(student);

2.6 結合 Array 與 Object

在資料科學裡，我們常會需要處理多筆資料。 這時候，可以把 Object 放進 Array 裡：

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

3 陣列與物件的結合

在真實的資料科學應用裡，我們通常不會只用 Array 或只用 Object。 常見的情境是 Array 裝多筆 Object，或 Object 裡面有 Array。

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",
  scores: [85, 90, 78]
};

console.log(student.name);       // Alice
console.log(student.scores);     // [85, 90, 78]
console.log(student.scores[1]);  // 90

👉 在這裡，scores 是一個陣列，代表 Alice 的多次測驗成績。

3.3 Array 裡的 Object，再包 Array

結合前兩種情境：多個學生，每個學生有多次測驗。

let students = [
  { name: "Alice", scores: [85, 90, 78] },
  { name: "Bob",   scores: [88, 92, 95] },
  { name: "Carol", scores: [70, 75, 80] }
];

console.log(students[0].name);       // Alice
console.log(students[0].scores[2]);  // 78
console.log(students[1].scores[0]);  // 88

👉 這樣就可以表示一個「班級」的成績清單。

3.4 Object 裡的 Object

有時候，一筆資料裡的欄位會更複雜，可以再用一個 Object 來描述。

let student = {
  name: "Alice",
  info: {
    age: 20,
    major: "Computer Science"
  }
};

console.log(student.name);       // Alice
console.log(student.info.age);   // 20
console.log(student.info.major); // Computer Science

3.5 混合練習：學生清單

綜合以上例子，我們可以用一個結構來表示多筆學生資料：

let students = [
  {
    name: "Alice",
    info: { age: 20, major: "CS" },
    scores: [85, 90, 78]
  },
  {
    name: "Bob",
    info: { age: 22, major: "Math" },
    scores: [88, 92, 95]
  }
];

console.log(students[0].info.major);  // CS
console.log(students[1].scores[2]);   // 95

👉 這樣的資料結構，已經非常接近「小型資料表格」的樣子。

}, 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 物件的常見錯誤

**屬性名稱打錯：**
```js
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

5.3 安全地存取巢狀屬性

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

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

6. 小結

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

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