到达屏幕末尾时的 Javascript for 循环换行

在开发网页时，我们常常需要用到循环来遍历一个数组或对象中的数据。但是，当我们输出这些数据时，往往会出现一整行内容被挤在一起的情况。这时，我们就需要学会如何在循环到达末尾时自动换行输出内容。

使用 for 循环输出内容

在 Javascript 中，我们可以使用 for 循环来遍历数组或对象中的数据，并输出相应的内容。例如：

var fruits = ["apple", "banana", "orange"];

for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

上面的代码会依次输出数组 fruits 中的每个元素。

循环到达末尾时自动换行

如果我们在输出数组 fruits 中的元素时，不想让它们挤在一起，而是想在每个元素的后面自动添加一个换行符，该怎么做呢？

最简单的方法就是在每个元素的后面添加一个换行符 \n。例如：

var fruits = ["apple", "banana", "orange"];

for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i] + "\n");
}

上面的代码在每个元素的后面都添加了一个换行符 \n，这样输出的内容就会自动换行。

但是，如果我们使用类似 <br> 或者 <p> 这样的 HTML 标签来输出数据时，就不能使用 \n 了。这时，我们就需要使用一些特殊的技巧来实现自动换行。

var fruits = ["apple", "banana", "orange"];
var output = "";

for (var i = 0; i < fruits.length; i++) {
  output += "<span>" + fruits[i] + "</span>";

  // 每输出两个元素，就添加一个换行
  if ((i + 1) % 2 === 0) {
    output += "<br>";
  }
}

console.log(output);

上面的代码通过向一个字符串变量 output 中添加 HTML 内容来输出数组 fruits 中的元素。当循环到达每两个元素时，就添加一个 <br> 标签来实现自动换行的效果。

总结

到达屏幕末尾时的 Javascript for 循环换行，其实就是让我们在输出数据时，让它们自动换行，避免挤在一起看起来不清晰。我们可以使用 \n、HTML 标签以及一些特殊的技巧来实现这种效果。记住，在使用 HTML 标签输出数据时，一定要注意 XSS 安全问题。