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"]