JavaScript 陣列操作：concat、join 與 toString
簡介
在日常的前端開發中，**陣列（Array）**是最常使用的資料結構之一。
無論是從 API 取得的資料、表單輸入的多筆選項，或是需要在畫面上一次渲染多筆項目，都離不開對陣列的 合併、字串化 等操作。
本單元聚焦於三個核心方法：concat、join 與 toString。
它們看似簡單，卻各有適用情境與細節。掌握它們不僅能讓程式碼更易讀，也能避免常見的效能與行為陷阱，為後續的資料處理奠定穩固基礎。
核心概念
1. Array.prototype.concat()
concat 用於 合併兩個或多個陣列，或將陣列與一般值（primitive）結合成一個新陣列。
重要：
concat不會改變原始陣列，而是回傳一個全新的陣列。
基本語法
let newArray = oldArray.concat(value1, value2, [...moreArrays]);
範例一：合併兩個陣列
const fruits = ['🍎', '🍊'];
const veggies = ['🥕', '🥦'];
const food = fruits.concat(veggies);
console.log(food); // ['🍎', '🍊', '🥕', '🥦']
fruits與veggies本身保持不變。
範例二：合併多個來源（含原始值）
const numbers = [1, 2];
const result = numbers.concat(3, [4, 5], 6);
console.log(result); // [1, 2, 3, 4, 5, 6]
範例三：使用展開運算子（Spread）達成同樣效果
const a = [10, 20];
const b = [30, 40];
const combined = [...a, ...b]; // 等同於 a.concat(b)
console.log(combined); // [10, 20, 30, 40]
最佳實踐：在需要保持不可變性的情況下，
concat或展開運算子都是安全的選擇。
範例四：合併「類陣列」物件（如 arguments、NodeList）
function logAll() {
const argsArray = Array.prototype.concat.call([], arguments);
console.log(argsArray);
}
logAll('a', 'b', 'c'); // ['a', 'b', 'c']
透過
call，concat可以把 類陣列 轉成真正的陣列。
2. Array.prototype.join()
join 把陣列的每個元素 轉成字串，再以指定的分隔符號（separator）串接起來。
回傳值永遠是 字串，原陣列不會被改變。
基本語法
let str = array.join(separator);
separator（可選）：預設為逗號,。
範例五：最簡單的使用
const colors = ['red', 'green', 'blue'];
console.log(colors.join()); // "red,green,blue"
console.log(colors.join(' | ')); // "red | green | blue"
範例六：處理非字串元素
const mixed = [1, true, null, undefined, {a:1}];
console.log(mixed.join('-')); // "1-true-null-undefined-[object Object]"
join會自動呼叫每個元素的toString()方法。
範例七：產生 URL 查詢字串
const params = ['page=2', 'size=20', 'sort=desc'];
const query = '?' + params.join('&');
console.log(query); // "?page=2&size=20&sort=desc"
這種情境在 前端路由 或 API 呼叫 中非常常見。
3. Array.prototype.toString()
toString 與 join 非常相似，唯一的差別是 分隔符號固定為逗號，且它是 Object.prototype.toString 的一個特化版本。
基本語法
let str = array.toString();
範例八：直接呼叫 toString
const nums = [7, 8, 9];
console.log(nums.toString()); // "7,8,9"
為什麼還要用 toString？
- 在 隱式類型轉換（例如字串相加）時，JavaScript 會自動呼叫
toString。
const arr = [1, 2];
console.log('Result: ' + arr); // "Result: 1,2"
- 若想要自訂陣列的字串化行為，可以 覆寫
toString方法。
範例九：自訂 toString
const point = [10, 20];
point.toString = function () {
return `(${this[0]}, ${this[1]})`;
};
console.log(String(point)); // "(10, 20)"
常見陷阱與最佳實踐
| 陷阱 | 說明 | 解決方式 |
|---|---|---|
誤以為 concat 會改變原陣列 |
concat 回傳新陣列，若直接寫 arr.concat(other); 而不把結果指派回變數，原陣列保持不變。 |
用 arr = arr.concat(other); 或使用展開運算子 arr = [...arr, ...other]; |
join 在大型陣列上效能問題 |
每次呼叫都會遍歷整個陣列，若在迴圈內頻繁執行會造成效能瓶頸。 | 先把需要的子集合取出，再一次性 join，或使用 Array.reduce 產生字串。 |
toString 產生的字串不易自訂 |
只能改變分隔符號，若需要其他格式必須自行實作。 | 直接使用 join(customSeparator)，或寫自己的函式。 |
| 稀疏陣列（Sparse Array） | join 會把缺失的元素視為空字串，可能產生連續的分隔符。 |
使用 Array.filter(Boolean) 先移除 undefined、null 或空值。 |
類陣列的 concat/join |
直接呼叫會失敗，因為它們不是真正的陣列。 | 先 Array.from() 或 Array.prototype.slice.call() 轉成陣列。 |
最佳實踐總結
- 保持不可變性：除非有明確需求，盡量使用
concat或展開運算子產生新陣列。 - 明確指定分隔符：使用
join時，永遠寫出separator，避免不同環境下逗號的預設行為。 - 避免在迴圈內大量
join：先累積資料，最後一次性產生字串。 - 處理稀疏或包含
null/undefined的陣列：使用filter或map先清理。 - 自訂字串化需求時：直接覆寫
toString或寫獨立的格式化函式，別依賴toString的預設行為。
實際應用場景
表單資料合併
多個<input type="checkbox">產生的值可用Array.from(checkboxes).map(cb => cb.value).join(',')組成逗號分隔的字串，送往後端。動態路由參數
需要把多段路由組合成完整路徑時，['users', userId, 'posts'].join('/')可快速產生users/123/posts。多語系文字合併
在 i18n 系統中，可能需要把多段說明文字合併成一段完整訊息，parts.concat(extra).join(' ')即可。CSV 檔案匯出
把資料列row = [id, name, email]透過row.join(',')產生 CSV 文字，再一次寫入檔案。除錯與日誌
在 console.log 前把陣列直接相加console.log('Data: ' + dataArray);，JavaScript 會自動呼叫toString，快速檢視內容。
總結
concat、join、toString 是 陣列操作 中的三把利器。
concat用於 安全合併，不改變原始資料。join為 字串化 提供彈性的分隔符號，是產生 URL、CSV、訊息等格式的首選。toString是 隱式字串化 的底層實作，了解它的行為有助於避免不預期的結果。
掌握它們的 正確使用方式、常見陷阱 以及 實務案例，能讓你在日常開發中寫出更乾淨、效能更佳的程式碼。未來無論是前端 UI、Node.js 後端，或是資料處理腳本，這些方法都會是你不可或缺的基礎工具。祝你寫程式愉快，陣列玩得更盡興！