JavaScript 打印数组元素
本教程演示了如何打印 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"]
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。