JavaScript 打印数组元素

打印 JavaScript 数组元素时，可以选择逐行输出、显示整个数组，或构造格式化字符串。需要逐行输出时，可使用带索引的循环或 forEach；需要查看整个数组时，可使用 console.log()；需要编号或自定义分隔符时，可结合 map() 和 join()。要选取部分元素，可使用 slice()；要合并数组，可使用 concat()。pop() 和 shift() 也会返回元素，但同时会将其从原数组中移除。

使用循环和 forEach 每行打印一个元素

带索引的 for 循环可以直接访问每个值及其位置。while 循环也能完成同样的操作，但需要在循环前初始化索引，并在每轮迭代中递增索引。若要对每个值执行简单操作，可以将回调函数传给 forEach；回调会接收当前元素，也可以接收它的索引。下面这些方法都会在每次调用 console.log() 时输出一个值：

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
names.forEach((name) => console.log(name));

mehvish
tahir
aftab
martell

如果后续逻辑需要索引，或需要控制迭代过程，可使用带索引的循环。如果只是要处理数组中的每个元素，forEach 写起来更简洁。它返回 undefined，不会创建转换后的数组。

使用 console.log() 打印整个数组

将数组本身传给 console.log()，即可在一次调用中查看其中的所有元素。这在调试时很有用，但显示形式取决于运行时的控制台；浏览器和 Node.js 对数组的格式化方式可能不同。如果程序的其他部分需要格式稳定的字符串，可以改用 join() 转换数组元素。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names);

[ 'mehvish', 'tahir', 'aftab', 'martell' ]

console.log() 是 console 上的方法，而 forEach、map 和下文介绍的转换方法都是数组方法。控制台的显示内容不是适合写入文件或通过网络传输的序列化格式。

将元素格式化或编号为字符串

先用 map() 创建一个由标签组成的新数组，再用 join() 将这些标签合并为一个字符串。回调会接收元素及其从零开始的索引，因此将索引加一即可生成便于阅读的编号。map() 不会修改原数组，而 join() 会返回字符串。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
const numberedNames = names.map((name, index) => `${index + 1}. ${name}`);
console.log(numberedNames.join(' | '));

1. mehvish | 2. tahir | 3. aftab | 4. martell

如果只需要以逗号分隔的文本，toString() 方法可以将数组转换为字符串，元素之间会以逗号分隔，但不能自定义分隔符。join() 方法则允许选择分隔符，例如空格或竖线。这两个链接指向的参考页面均为英文。toString() 和 join() 都只会生成字符串，不会自行打印；将结果传给 console.log() 才会显示出来。

使用 slice() 打印选定元素

调用 slice(start, end) 可以浅拷贝数组的一部分，然后打印返回的数组。起始索引包含在结果中，结束索引不包含在结果中，因此 slice(0, 2) 会选取前两个元素。slice() 不会从原数组中移除元素。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names.slice(0, 2));

[ 'mehvish', 'tahir' ]

选出的元素会保持原有顺序。字符串方法也有一个使用相似索引参数的 slice()；可参阅字符串 slice() 参考页面。该参考页面为英文；这里调用的接收对象则是数组。

使用 concat() 合并数组

使用 concat() 可以创建一个新数组，其中先放接收数组的元素，再放传入数组的元素。可以直接打印结果来查看，也可以调用 join()，将结果转换为使用指定分隔符的字符串。两个输入数组都不会被修改。

const fruitsArrayOne = ['apple', 'banana', 'grapes'];
const fruitsArrayTwo = ['mango', 'water-melon'];
const combined = fruitsArrayOne.concat(fruitsArrayTwo);
console.log(combined.join(', '));

apple, banana, grapes, mango, water-melon

顺序很重要：调用 .concat() 的数组会排在结果的前面。该方法也可以接收单个值或更多数组作为参数。

打印并移除数组端点元素

使用 pop() 获取并移除最后一个元素，或使用 shift() 获取并移除第一个元素。这两个方法都会修改原数组，并返回被移除的值；可以将返回值传给 console.log()。只有确实想修改数组时才使用它们；如果必须保留原数组，可以改用 slice() 或读取某个索引。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
const lastName = names.pop();
console.log(lastName);
console.log(names.join(', '));

martell
mehvish, tahir, aftab

pop() 和 shift() 是数组方法，不是字符串操作。上面的第一次调用会打印原数组末尾的值，下一行则显示剩余数组。若要查看并移除第一个元素，可将 pop() 替换为 shift()。