迹忆客 专注技术分享

本教程演示了如何打印 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"]