JavaScript 列印陣列元素
- 在 JavaScript 中列印陣列元素的不同方法
-
在 JavaScript 中使用
for迴圈列印陣列元素 -
在 JavaScript 中使用
while迴圈列印陣列元素 -
在 JavaScript 中使用
forEach方法列印陣列元素 -
在 JavaScript 中使用
console.log()函式列印陣列元素 -
在 JavaScript 中使用
map()和join()方法列印陣列元素 -
在 JavaScript 中使用
toString()函式列印陣列元素 -
在 JavaScript 中使用
join()函式列印陣列元素 -
在 JavaScript 中使用
pop()函式列印陣列元素 -
在 JavaScript 中使用
shift()方法列印陣列元素 -
在 JavaScript 中使用
concat()方法列印陣列元素 -
在 JavaScript 中使用
slice()方法列印陣列元素
本教程演示瞭如何列印 JavaScript 陣列元素。它還取決於你的專案需求，無論你是要列印整個陣列還是特定數量的元素。
或者你想以字串格式或其他格式列印陣列元素。讓我們探索列印 JavaScript 陣列的不同方法。
在 JavaScript 中列印陣列元素的不同方法
for 和 while 迴圈遍歷陣列元素，一次一個，每個元素都列印在單獨的行上，而我們可以使用 forEach() 方法獲得相同的輸出。
forEach() 函式對每個陣列元素執行一次特定方法。
我們可以通過將陣列的名稱傳遞給 console.log() 函式來列印所有陣列元素。我們也可以使用 map() 和 join() 方法先操作然後列印陣列的元素。
例如，我們想對輸出中的每個陣列元素進行編號。
map() 函式通過為每個元素呼叫一次函式來建立一個新陣列，但不會更改原始陣列。請記住，它不會為空元素執行該函式。
join() 函式就像一個分隔符，用指定的分隔符分隔陣列的元素。
pop() 返回最後一個元素，而 shift() 返回陣列的第一個元素，但是當你希望從字串中刪除這些元素時最好使用兩者，因為兩者都可以更改原始陣列。
toString() 函式將陣列轉換為字串格式。slice() 函式將陣列的選定元素作為新陣列提供給我們，但不會更改原始陣列。
它也可以根據特定的 start 和 end 索引工作（end 索引在這裡是唯一的）。
在 JavaScript 中使用 for 迴圈列印陣列元素
讓我們從使用一個簡單的 for 迴圈來列印一個完整的 JavaScript 陣列開始。
var names = ['mehvish', 'tahir', 'aftab', 'martell'];
// for loop
for (var i = 0; i < names.length; i++) {
console.log(names[i]);
}
輸出：
"mehvish"
"tahir"
"aftab"
"martell"
在 JavaScript 中使用 while 迴圈列印陣列元素
下面讓我們看看 while 迴圈是如何產生輸出的。
var names = ['mehvish', 'tahir', 'aftab', 'martell'];
var i = 0;
// while loop
while (i < names.length) {
console.log(names[i]);
i++;
}
輸出：
"mehvish"
"tahir"
"aftab"
"martell"
在 JavaScript 中使用 forEach 方法列印陣列元素
你有沒有想過用 forEach 方法來列印一個完整的 JavaScript 陣列（每行一個元素）？請參閱下面的程式碼片段。
var names = ['mehvish', 'tahir', 'aftab', 'martell'];
names.forEach(element => console.log(element));
輸出：
"mehvish"
"tahir"
"aftab"
"martell"
在 JavaScript 中使用 console.log() 函式列印陣列元素
我們已經探索了列印完整陣列但每行一個元素的方法。你可以在一行上列印所有陣列元素，如下所示。
var names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names);
輸出：
["mehvish", "tahir", "aftab", "martell"]
在 JavaScript 中使用 map() 和 join() 方法列印陣列元素
我們也可以使用以下方式在一行中顯示所有元素。
var names = ['mehvish', 'tahir', 'aftab', 'martell'];
var element = names.map((e, i) => (i + 1 + '.' + e)).join(' ');
console.log(element);
輸出：
"1.mehvish 2.tahir 3.aftab 4.martell"
在 JavaScript 中使用 toString() 函式列印陣列元素
你有沒有想過我們有一個名為 toString() 的函式可以將陣列轉換為字串。請參閱以下程式碼示例。
var names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names.toString());
輸出：
"mehvish,tahir,aftab,martell"
在 JavaScript 中使用 join() 函式列印陣列元素
上面我們看到陣列被轉換成字串，但是每個元素用逗號分隔。如果我們希望將所有元素分隔到一個空間中怎麼辦？為此，使用了 join() 函式。
var names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names.join(' '));
輸出：
"mehvish tahir aftab martell"
在 JavaScript 中使用 pop() 函式列印陣列元素
你想只列印陣列的最後一個元素嗎？我們可以通過使用 pop() 函式來做到這一點。
var names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names.pop());
輸出：
"martell"
在 JavaScript 中使用 shift() 方法列印陣列元素
在下面的程式碼中，shift() 方法列印陣列的第一個元素。
var names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names.shift());
輸出：
"mehvish"
在 JavaScript 中使用 concat() 方法列印陣列元素
我們有兩個獨立的 JavaScript 陣列，並在一行中列印。我們想要第二個陣列的元素在第一個陣列的元素之後。
我們將使用 Concat() 方法將 fruitsArrayTwo 與 fruitsArrayOne 連線起來。
var fruitsArrayOne = ['apple', 'banana', 'grapes'];
var fruitsArrayTwo = ['mango', 'water-melon'];
console.log(fruitsArrayOne.concat(fruitsArrayTwo));
輸出：
["apple", "banana", "grapes", "mango", "water-melon"]
在 JavaScript 中使用 slice() 方法列印陣列元素
我們還可以使用 slice() 方法列印特定的元素陣列。我們還可以使用 splice() 方法來新增和刪除陣列的元素。有關詳細資訊，請檢視 this 頁面。
var names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names.slice(0, 2)); // end index is not inclusive here
輸出：
["mehvish", "tahir"]
