JavaScript 列印陣列元素

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中列印陣列元素的不同方法
  2. 在 JavaScript 中使用 for 迴圈列印陣列元素
  3. 在 JavaScript 中使用 while 迴圈列印陣列元素
  4. 在 JavaScript 中使用 forEach 方法列印陣列元素
  5. 在 JavaScript 中使用 console.log() 函式列印陣列元素
  6. 在 JavaScript 中使用 map()join() 方法列印陣列元素
  7. 在 JavaScript 中使用 toString() 函式列印陣列元素
  8. 在 JavaScript 中使用 join() 函式列印陣列元素
  9. 在 JavaScript 中使用 pop() 函式列印陣列元素
  10. 在 JavaScript 中使用 shift() 方法列印陣列元素
  11. 在 JavaScript 中使用 concat() 方法列印陣列元素
  12. 在 JavaScript 中使用 slice() 方法列印陣列元素
JavaScript 列印陣列元素

本教程演示瞭如何列印 JavaScript 陣列元素。它還取決於你的專案需求,無論你是要列印整個陣列還是特定數量的元素。

或者你想以字串格式或其他格式列印陣列元素。讓我們探索列印 JavaScript 陣列的不同方法。

在 JavaScript 中列印陣列元素的不同方法

forwhile 迴圈遍歷陣列元素,一次一個,每個元素都列印在單獨的行上,而我們可以使用 forEach() 方法獲得相同的輸出。

forEach() 函式對每個陣列元素執行一次特定方法。

我們可以通過將陣列的名稱傳遞給 console.log() 函式來列印所有陣列元素。我們也可以使用 map()join() 方法先操作然後列印陣列的元素。

例如,我們想對輸出中的每個陣列元素進行編號。

map() 函式通過為每個元素呼叫一次函式來建立一個新陣列,但不會更改原始陣列。請記住,它不會為空元素執行該函式。

join() 函式就像一個分隔符,用指定的分隔符分隔陣列的元素。

pop() 返回最後一個元素,而 shift() 返回陣列的第一個元素,但是當你希望從字串中刪除這些元素時最好使用兩者,因為兩者都可以更改原始陣列。

toString() 函式將陣列轉換為字串格式。slice() 函式將陣列的選定元素作為新陣列提供給我們,但不會更改原始陣列。

它也可以根據特定的 startend 索引工作(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() 方法將 fruitsArrayTwofruitsArrayOne 連線起來。

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"]
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Array