精通 JavaScript 陣列：完整的創建、操作、篩選與實務應用指南

1 1. 介紹
2 2. 陣列基礎 | 宣告與初始化
3 3. 基本陣列操作 | 新增、移除與取得元素
4 4. 陣列的排序與篩選
5 5. 陣列的合併、分割與轉換
6 6. 陣列迭代與進階技巧
7 7. 實作範例 | 使用陣列打造簡易應用程式
8 8. 總結 | 精通陣列操作
9 常見問答 | Frequently Asked Questions

1. 介紹

什麼是 JavaScript 陣列以及它們為何重要？

JavaScript 陣列是有效管理與操作資料的關鍵元素之一。透過陣列，你可以在單一變數中儲存多個值，並依需求取回或修改它們。
例如，在保存使用者名稱清單、商品清單或計算結果時，陣列非常實用。尤其在 Web 應用程式開發中，處理表單資料或從 API 取得的資料時，陣列常被使用。

陣列的實務應用案例

清單管理：管理購物車項目或待辦清單。
資料篩選：使用者搜尋與排序功能。
動畫控制：管理元素順序或動態變化。

陣列是處理分組資料的基礎結構，也是學習 JavaScript 時不可或缺的主題。

本文將學習的內容

本文系統性說明 JavaScript 陣列，涵蓋以下主題：

如何宣告與初始化陣列
如何新增、移除與取得元素
排序與篩選技巧
合併與拆分陣列的方法
陣列應用範例

內容適合從初學者到中階學習者，並仔細說明從基礎到實務技巧的每個面向。

本文適合的讀者

初學者：第一次接觸陣列的讀者。
中階使用者：想學習進階操作或撰寫更有效率程式碼的讀者。

透過程式碼範例與實務案例，即使是初學者也能自信學習。

學會陣列後你能做到的事

掌握 JavaScript 陣列後，你將具備以下技能：

資料管理與操作：輕鬆新增、移除或排序資料。
API 整合：有效處理與顯示從 Web API 取得的資料。
應用程式開發：使用實務範例打造簡易應用程式。

將所學運用於更進階的 JavaScript 應用開發。

2. 陣列基礎 | 宣告與初始化

2.1 陣列的定義與角色

JavaScript 陣列是特殊的物件，讓你一次管理多筆資料。每個元素都有索引，決定其位置，使得資料的取得與操作變得簡單。

陣列的主要角色

清單管理：管理如商品清單或使用者資訊等分組資料。
資料操作：執行排序或搜尋等高效任務。
動態資料處理：處理與轉換從 API 取得的資料。

陣列特性

元素索引從 0 開始。

可同時儲存不同資料型別的值。

let mixedArray = [1, "hello", true];
console.log(mixedArray[1]); // "hello"

2.2 陣列的宣告與初始化

基本陣列宣告

在 JavaScript 中，陣列可以透過兩種方式宣告：

使用字面量表示法（建議）

let fruits = ["apple", "banana", "grape"];

使用 Array 建構子

let fruits = new Array("apple", "banana", "grape");

建立空陣列

let emptyArray = [];

2.3 宣告多維陣列

多維陣列是包含其他陣列的陣列，於管理階層式資料結構時相當有用。

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // 6

2.4 初始化注意事項

混合資料型別

JavaScript 陣列可儲存不同資料型別的值，若未謹慎處理，可能會導致意外的錯誤。

let mixed = [1, "text", true];
console.log(typeof mixed[0]); // "number"
console.log(typeof mixed[1]); // "string"
console.log(typeof mixed[2]); // "boolean"

2.5 基本陣列操作範例

let animals = ["dog", "cat", "bird"];
console.log(animals[0]); // "dog"

animals.push("rabbit");
console.log(animals); // ["dog", "cat", "bird", "rabbit"]

animals[1] = "lion";
console.log(animals); // ["dog", "lion", "bird", "rabbit"]

摘要

本節說明了以下關於 JavaScript 陣列的概念：

陣列的定義與角色
宣告與初始化的基本語法
多維陣列與長度處理
初始化時的重要注意事項與程式範例

有了這些知識，您將更好地為下一步做好準備：「基本陣列操作」。

3. 基本陣列操作 | 新增、移除與取得元素

3.1 新增元素的方法

在末端新增元素 – `push()`

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

在開頭新增元素 – `unshift()`

let animals = ["cat", "dog"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "cat", "dog"]

3.2 移除元素的方法

移除最後一個元素 – `pop()`

let colors = ["red", "blue", "green"];
let removed = colors.pop();
console.log(colors); // ["red", "blue"]
console.log(removed); // "green"

移除第一個元素 – `shift()`

let numbers = [1, 2, 3, 4];
let removedNumber = numbers.shift();
console.log(numbers); // [2, 3, 4]
console.log(removedNumber); // 1

從任意位置移除元素 – `splice()`

let sports = ["soccer", "baseball", "basketball", "tennis"];
sports.splice(1, 2);
console.log(sports); // ["soccer", "tennis"]

3.3 取得元素的方法

依索引取得

let drinks = ["water", "tea", "coffee"];
console.log(drinks[0]); // "water"
console.log(drinks[2]); // "coffee"

取得最後一個元素

let cities = ["Tokyo", "Osaka", "Kyoto"];
console.log(cities[cities.length - 1]); // "Kyoto"

取得第一個符合條件的元素 – `find()`

let numbers = [10, 20, 30, 40];
let result = numbers.find(num => num > 25);
console.log(result); // 30

摘要

在本節中，我們說明了以下 JavaScript 陣列操作：

如何新增元素（push() 與 unshift()）
如何移除元素（pop()、shift()、splice()）
如何取得元素（索引存取、find()、includes()）

結合這些基本操作，您就能自由操作陣列。

4. 陣列的排序與篩選

4.1 陣列排序的方法

以升序或降序排序 – `sort()`

let numbers = [40, 10, 30, 20];
numbers.sort((a, b) => a - b);
console.log(numbers); // [10, 20, 30, 40]

反轉順序 – `reverse()`

let letters = ["a", "b", "c", "d"];
letters.reverse();
console.log(letters); // ["d", "c", "b", "a"]

4.2 陣列篩選的方法

抽取符合條件的元素 – `filter()`

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

取得第一個符合條件的元素 – `find()`

let ages = [15, 20, 25, 30];
let firstAdult = ages.find(age => age >= 20);
console.log(firstAdult); // 20

取得第一個符合條件的元素索引 – `findIndex()`

let scores = [50, 70, 85, 40];
let highScoreIndex = scores.findIndex(score => score > 80);
console.log(highScoreIndex); // 2

摘要

本節說明了如何在 JavaScript 中排序與篩選陣列：

排序：使用 sort() 與 reverse() 控制順序。
篩選：使用 filter() 抽取符合條件的元素。
搜尋：使用 find() 與 findIndex() 找出元素。

5. 陣列的合併、分割與轉換

5.1 陣列合併的方法

合併陣列 – `concat()`

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = fruits.concat(vegetables);
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

使用展開語法加入元素

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = [...fruits, ...vegetables];
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

5.2 陣列切割方法

擷取部分 – `slice()`

let colors = ["red", "blue", "green", "yellow", "purple"];
let selectedColors = colors.slice(1, 4);
console.log(selectedColors); // ["blue", "green", "yellow"]

移除或取代元素 – `splice()`

let languages = ["JavaScript", "Python", "Ruby", "Java"];
languages.splice(1, 2);
console.log(languages); // ["JavaScript", "Java"]

5.3 陣列轉換方法

將陣列轉為字串 – `join()`

let items = ["apple", "banana", "grape"];
let result = items.join(", ");
console.log(result); // "apple, banana, grape"

將字串轉為陣列 – `split()`

let str = "apple,banana,grape";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "grape"]

展平多維陣列 – `flat()`

let numbers = [1, [2, 3], [4, [5, 6]]];
let flatNumbers = numbers.flat(2);
console.log(flatNumbers); // [1, 2, 3, 4, 5, 6]

總結

本節說明了各種 JavaScript 陣列方法，用於合併、切割與轉換陣列：

合併陣列：concat() 與展開語法
切割陣列：使用 slice() 進行擷取，splice() 進行移除或取代
轉換陣列：使用 join() 與 split() 進行字串轉換
展平：flat() 用於將巢狀陣列轉為單層

6. 陣列迭代與進階技巧

6.1 陣列迭代方法

`for` 基本迴圈

let fruits = ["apple", "banana", "grape"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output: apple, banana, grape

`for...of` 簡化迴圈

let colors = ["red", "blue", "green"];
for (let color of colors) {
  console.log(color);
}
// Output: red, blue, green

`forEach()` 方法迭代

let animals = ["cat", "dog", "bird"];
animals.forEach((animal, index) => {
  console.log(`${index}: ${animal}`);
});
// Output: 0: cat, 1: dog, 2: bird

使用 `map()` 建立新陣列

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

6.2 進階技巧

移除重複元素

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

展平陣列 – `flat()`

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

總結

本節說明了陣列迭代方法與進階技巧：

基本迴圈：使用 for 與 for...of 進行高效迭代。
方法式迴圈：使用 forEach() 與 map() 以更簡潔且函式化的方式處理。
進階資料操作：移除重複項目與展平巢狀陣列。

7. 實作範例 | 使用陣列打造簡易應用程式

7.1 建立待辦清單應用程式

功能概覽

此簡易待辦清單應用程式具備以下功能：

新增任務
移除已完成的任務
顯示目前的任務清單

程式碼範例

let tasks = [];

// Function to add a new task
function addTask(task) {
  tasks.push(task);
  console.log(`Added: ${task}`);
  displayTasks();
}

// Function to remove a task
function removeTask(index) {
  if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(`Removed: ${removed[0]}`); displayTasks(); } else { console.log("Invalid index"); } } // Function to display current tasks function displayTasks() { console.log("Current Tasks:"); tasks.forEach((task, index) => {
    console.log(`${index + 1}: ${task}`);
  });
}

// Test execution
addTask("Study JavaScript");
addTask("Create shopping list");
addTask("Check email");

removeTask(1); // Remove the second task

範例輸出

Added: Study JavaScript
Added: Create shopping list
Added: Check email
Current Tasks:
1: Study JavaScript
2: Create shopping list
3: Check email
Removed: Create shopping list
Current Tasks:
1: Study JavaScript
2: Check email

摘要

本節介紹了使用陣列操作的實務應用：

待辦清單應用程式：練習新增、刪除與顯示任務。
搜尋與資料分析：示範如何使用陣列操作實作彈性搜尋與資料彙總。

8. 總結 | 精通陣列操作

JavaScript 陣列是強大的工具，可協助簡化資料管理與操作。本文涵蓋了從基礎操作到進階技巧與實務範例的全部內容。

8.1 本文回顧

1. 基本陣列操作

宣告與初始化：學習如何建立陣列以及處理多維陣列。
新增、刪除與取得元素：練習使用 push()、pop() 等方法進行動態資料操作。

2. 陣列的排序與過濾

排序：說明如何使用 sort() 與 reverse() 變更陣列順序。
過濾：學習使用 filter() 與 find() 取得特定資料。

3. 陣列的合併、分割與轉換

合併：了解如何使用 concat() 以及展開語法 (...) 合併陣列。
分割與轉換：使用 slice()、splice()、join()、split() 進行彈性資料處理。

4. 迴圈與進階技巧

迴圈：使用 for、forEach()、map() 進行高效迭代。
進階技巧：學習移除重複項目與展平巢狀陣列。

5. 實作範例

待辦清單 App：運用陣列操作建構功能完整的應用程式。
搜尋與資料彙總：示範實務上的資料過濾與分析。

8.2 陣列操作的重要性與使用情境

為何陣列操作很重要？

陣列操作是組織、分析與呈現資料的關鍵。常見情境包括：

資料管理與顯示：過濾 API 資料並在表格中呈現結果。
表單與使用者輸入處理：動態更新清單或處理輸入值。
搜尋與排序功能：有效處理大量資料集。
應用程式開發：打造購物車、任務管理等 UI 功能。

8.3 下一步學習方向

1. 更深入使用陣列方法

建議任務：開發一個取得 API 資料並使用陣列操作過濾結果的應用程式。

2. 比較與使用其他資料結構

學習 Objects、Set、Map，以便在不同情境下選擇最適合的結構。

3. 在 JavaScript 框架中應用知識

在 React、Vue.js 等框架中運用陣列技巧，進行實務開發。

8.4 參考連結與資源

MDN Web Docs: Array 物件 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
JavaScript.info: 陣列與方法 https://javascript.info/

8.5 給讀者的最後想法與建議

JavaScript 陣列操作是建立堅實程式設計基礎的關鍵。本篇文章提供了從基礎到進階概念的結構化方法。

建議

透過撰寫程式碼練習：測試每個方法以加深理解。
培養問題解決能力：將實際任務轉換為程式，以提升實務專長。
持續學習：學習新框架與最新技術，提升技能組合。

邁向下一步！

以本篇文章為基礎，進一步構建更複雜的應用程式或學習現代框架。

常見問答 | Frequently Asked Questions

Q1. `map()` 與 `forEach()` 有何差異？

map()：對每個元素套用函式後返回新陣列。
forEach()：對每個元素執行函式，但不返回新陣列。

範例：

let numbers = [1, 2, 3];

// map()
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

// forEach()
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6

Q2. 如何正確排序數字？

預設情況下，sort() 會將值視為字串比較。若要以數值方式排序，必須傳入比較函式。

範例：

let numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]

Q3. 如何從陣列中移除重複項目？

使用 Set 物件即可輕鬆移除重複項目。

範例：

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Q4. 如何檢查陣列中是否存在某個元素？

使用 includes() 方法來判斷陣列是否包含特定值。

範例：

let fruits = ["apple", "banana", "grape"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("melon")); // false

Q5. 如何將多維陣列展平成單層？

使用 flat() 方法將巢狀陣列轉換為單層陣列。

範例：

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

精通 JavaScript 陣列：完整的創建、操作、篩選與實務應用指南

1. 介紹

什麼是 JavaScript 陣列以及它們為何重要？

陣列的實務應用案例

本文將學習的內容

本文適合的讀者

學會陣列後你能做到的事

2. 陣列基礎 | 宣告與初始化

2.1 陣列的定義與角色

陣列的主要角色

陣列特性

2.2 陣列的宣告與初始化

基本陣列宣告

建立空陣列

2.3 宣告多維陣列

2.4 初始化注意事項

混合資料型別

2.5 基本陣列操作範例

摘要

3. 基本陣列操作 | 新增、移除與取得元素

3.1 新增元素的方法

在末端新增元素 – push()

在開頭新增元素 – unshift()

3.2 移除元素的方法

移除最後一個元素 – pop()

移除第一個元素 – shift()

從任意位置移除元素 – splice()

3.3 取得元素的方法

依索引取得

取得最後一個元素

取得第一個符合條件的元素 – find()

摘要

4. 陣列的排序與篩選

4.1 陣列排序的方法

以升序或降序排序 – sort()

反轉順序 – reverse()

4.2 陣列篩選的方法

抽取符合條件的元素 – filter()

取得第一個符合條件的元素 – find()

取得第一個符合條件的元素索引 – findIndex()

摘要

5. 陣列的合併、分割與轉換

5.1 陣列合併的方法

合併陣列 – concat()

使用展開語法加入元素

5.2 陣列切割方法

擷取部分 – slice()

移除或取代元素 – splice()

5.3 陣列轉換方法

將陣列轉為字串 – join()

將字串轉為陣列 – split()

展平多維陣列 – flat()

總結

6. 陣列迭代與進階技巧

6.1 陣列迭代方法

for 基本迴圈

for...of 簡化迴圈

forEach() 方法迭代

使用 map() 建立新陣列

6.2 進階技巧

移除重複元素

展平陣列 – flat()

總結

7. 實作範例 | 使用陣列打造簡易應用程式

7.1 建立待辦清單應用程式

功能概覽

程式碼範例

範例輸出

摘要

8. 總結 | 精通陣列操作

8.1 本文回顧

1. 基本陣列操作

2. 陣列的排序與過濾

3. 陣列的合併、分割與轉換

4. 迴圈與進階技巧

5. 實作範例

8.2 陣列操作的重要性與使用情境

為何陣列操作很重要？

8.3 下一步學習方向

1. 更深入使用陣列方法

在末端新增元素 – `push()`

在開頭新增元素 – `unshift()`

移除最後一個元素 – `pop()`

移除第一個元素 – `shift()`

從任意位置移除元素 – `splice()`

取得第一個符合條件的元素 – `find()`

以升序或降序排序 – `sort()`

反轉順序 – `reverse()`

抽取符合條件的元素 – `filter()`

取得第一個符合條件的元素 – `find()`

取得第一個符合條件的元素索引 – `findIndex()`

合併陣列 – `concat()`

擷取部分 – `slice()`

移除或取代元素 – `splice()`

將陣列轉為字串 – `join()`

將字串轉為陣列 – `split()`

展平多維陣列 – `flat()`

`for` 基本迴圈

`for...of` 簡化迴圈

`forEach()` 方法迭代

使用 `map()` 建立新陣列

展平陣列 – `flat()`

Q1. `map()` 與 `forEach()` 有何差異？