JavaScript 列印陣列元素

要列印 JavaScript 陣列元素，可以逐行輸出各個值、顯示整個陣列，或組成格式化字串。若要逐行輸出，可使用索引迴圈或 forEach；若要檢視整個陣列，可使用 console.log()；若要加入編號或自訂分隔符號，則可搭配使用 map() 和 join()。要選取特定值時，使用 slice()；要合併陣列時，使用 concat()。端點方法 pop() 和 shift() 也會回傳值，但同時會將該值從原陣列移除。

使用迴圈和 forEach 逐行列印元素

索引 for 迴圈可直接取得每個值及其位置。while 迴圈也能達到相同效果，只要在迴圈前初始化索引，並在每次迴圈執行時遞增即可。若只需對每個值執行簡單操作，可將回呼函式傳給 forEach；函式會收到目前的元素，也可以選擇接收其索引。這些方式都會在每次呼叫 console.log() 時輸出一個值：

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
names.forEach((name) => console.log(name));

mehvish
tahir
aftab
martell

如果後續邏輯需要索引，或需要自行控制迭代方式，請選用索引迴圈。若只是要處理陣列中的每個元素，forEach 寫法較精簡。它會回傳 undefined，不會建立轉換後的陣列。

使用 console.log() 列印整個陣列

將陣列本身傳給 console.log()，即可透過一次呼叫檢視所有元素。這在除錯時很實用，但顯示內容是執行環境的主控台表示方式；瀏覽器和 Node.js 顯示陣列的格式可能不同。如果程式的其他部分需要格式固定的字串，請改用 join() 轉換值。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names);

[ 'mehvish', 'tahir', 'aftab', 'martell' ]

console.log() 是 console 的方法；forEach、map 和下文介紹的轉換方法則是陣列方法。主控台顯示內容不是適合寫入檔案或傳送網路資料的序列化格式。

將元素格式化或編號為字串

使用 map() 建立新的標籤陣列，再用 join() 將標籤組合成一個字串。回呼函式會收到元素及其從零開始的索引，因此將索引加一即可產生方便閱讀的編號。map() 不會修改原陣列，而 join() 會回傳字串。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
const numberedNames = names.map((name, index) => `${index + 1}. ${name}`);
console.log(numberedNames.join(' | '));

1. mehvish | 2. tahir | 3. aftab | 4. martell

若要取得以逗號分隔的純文字，toString() 方法會將陣列轉換為字串，並以逗號分隔元素；它不提供自訂分隔符號的選項。join() 方法則可讓你選擇分隔符號，例如空格或直線符號。下文連結的這兩個參考頁面，以及 slice() 的參考頁面，皆為英文。這些方法只會產生字串，不會自行列印；將結果傳給 console.log() 才會顯示出來。

使用 slice() 列印選取的元素

呼叫 slice(start, end) 可淺層複製陣列的一部分，再列印回傳的陣列。起始索引會包含在結果中，結束索引則不包含，因此 slice(0, 2) 會選取前兩個元素。slice() 不會從原陣列移除值。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names.slice(0, 2));

[ 'mehvish', 'tahir' ]

選取的值會維持原本的順序。若要了解索引參數相似的字串方法，請參閱slice() 參考資料；此處的接收者則是陣列。

使用 concat() 合併陣列

使用 concat() 建立新陣列，內容依序為接收者中的元素，以及傳入陣列中的元素。你可以直接列印結果來檢視，也可以呼叫 join()，將輸出組成使用指定分隔符號的字串。這兩個輸入陣列都不會被修改。

const fruitsArrayOne = ['apple', 'banana', 'grapes'];
const fruitsArrayTwo = ['mango', 'water-melon'];
const combined = fruitsArrayOne.concat(fruitsArrayTwo);
console.log(combined.join(', '));

apple, banana, grapes, mango, water-melon

順序很重要：.concat() 前面的陣列會先出現在結果中。此方法也可以接受個別值或其他陣列作為引數。

列印並移除陣列端點的元素

使用 pop() 取得並移除最後一個元素，或使用 shift() 取得並移除第一個元素。這兩個方法都會修改原陣列，並回傳移除的值；你可以將該值傳給 console.log()。只有在確定要變更原陣列時才使用它們；若必須保留原陣列，請改用 slice() 或讀取索引值。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
const lastName = names.pop();
console.log(lastName);
console.log(names.join(', '));

martell
mehvish, tahir, aftab

pop() 和 shift() 是陣列方法，不是字串操作。上方第一次呼叫會列印原本位於陣列末端的值；下一行則顯示移除該值後剩下的陣列。若要檢視並移除第一個元素，請將 pop() 換成 shift()。