Question

我知道这是我第一次开始时可能学到的东西，但不记得它是如何完成的，因为我从未使用它。我有一个数组，我正在循环，并没有得到预期的结果。我试图让输出像这样..

一二三四五六七

但它不断出现一二三四一二三四一二三四一二三四一二三四一二三四一二三四

有人能告诉我我做错了什么吗？

＆＃13;

var arr = [
    "One",
    "Two",
    "Three",
    "Four",
    "Five",
    "Six",
    "Seven"
];

for (row = 0; row < arr.length; row++) {
    for (col = 0; col < 4; col++) {
        document.write(arr[col] + "&nbsp;");
    }
    document.write('<br/>');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

您可以将行数乘以行的大小：

var arr = [
  "One",
  "Two",
  "Three",
  "Four",
  "Five",
  "Six",
  "Seven"
];

const rowSize = 4;

for (row = 0; row < arr.length / rowSize; row++) {

  const startingIdx = row * rowSize;
  for (col = startingIdx; col < arr.length && col < startingIdx + rowSize; col++) {
    document.write(arr[col] + "&nbsp;");
  }

  document.write('<br/>');
}

Answer 2

您可以进行一些小修改：

var arr = [
  "One",
  "Two",
  "Three",
  "Four",
  "Five",
  "Six",
  "Seven"
];

for (index = 0; index < arr.length; index++) {
  document.write(arr[index] + "&nbsp;");
  if ((index + 1) % 4 == 0) {
    document.write('<br/>');
  }
}

//for (col = 0; col < 4; col++) {
//
//  for (row = 0; row < arr.length; row++) {
//    document.write(arr[row] + "&nbsp;");
//  }
//
//  document.write("\n");
//}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

for (row = 0, col = 0; row < arr.length; row++, col++) {
  if (col == 4) {
    col = 0;
    document.write('<br/>');
  }
  document.write(arr[row] + "&nbsp;");
}

Answer 4

现在，您正在写入页面的数组元素由当前列（col）决定，该列在外部循环的每次迭代中连续从1到4。

您希望迭代遍历数组的每个元素，并且每次增长大于列数时，插入换行符。

var arr = [
  "One",
  "Two",
  "Three",
  "Four",
  "Five",
  "Six",
  "Seven"
];

for (var index = 0; index < arr.length; index++) {
    document.write(arr[index] + "&nbsp;");

    if ((index + 1) % 4 == 0) {
        document.write("<br/>");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这会打印数组的每个元素，当索引（加1，因为数组从0开始，但我们需要从1开始）是4的倍数（意味着已达到行的结尾），写入换行符标记以开始下一行元素。

Answer 5

您不应该使用两个循环，但在必须放置<br/>时进行测试：您可以使用%运算符对其进行测试。

for (index = 0; index < arr.length; index++) {
    if (index !== 0 && index % 4 === 0) {
        document.write('<br/>');
    }
    document.write(arr[index] + "&nbsp;");
}

Answer 6

在每次迭代中，你开始从col开始（实际上，数组索引）为0：

for (col = 0; col < 4; col++) {

尝试调整原始arr以考虑所需的结构：

const arr = [
  [
    "One",
    "Two",
    "Three",
    "Four",
  ],
  [
    "Five",
    "Six",
    "Seven",
    "Eight",
  ]
];

for (let rowIndex = 0; rowIndex < arr.length; rowIndex++) {
  const row = arr[rowIndex];
  for (let colIndex = 0; colIndex < row.length; colIndex++) {
    document.write(row[colIndex] + "&nbsp;");
  }
  document.write('<br/>');
}

Answer 7

我建议阻止多次document.write次呼叫，因为如果你有更多的数据，它很快就会成为一个痛苦的瓶颈：

var arr = [
  "One",
  "Two",
  "Three",
  "Four",
  "Five",
  "Six",
  "Seven"
];

var table = "";

arr.forEach(function (item, i) {
  table += item + ((i + 1) % 4 !== 0 ? "&nbsp;" : "<br>");
});

document.write(table);
// One&nbsp;Two&nbsp;Three&nbsp;Four<br>Five&nbsp;Six&nbsp;Seven&nbsp;

此外，如果您对Array.prototype.reduce有信心（并为跨浏览器转换代码），那么我建议通过将数组缩减为字符串来减少代码：

var table = arr.reduce(
  (reduced, item, i) => reduced + item + ((i + 1) % 4 !== 0 ? "&nbsp;" : "<br>")
  , ""
);

Answer 8

使用更多声明性语法可能更容易。您可以将数组的内容减少为字符串，如果要在每个n元素上添加break标记，可以使用modulus进行测试以查看reduce循环索引是否与n。

array reduce方法为函数回调提供了前一个值，下一个值和循环索引。

const arr = [
  "One",
  "Two",
  "Three",
  "Four",
  "Five",
  "Six",
  "Seven"
];

const getString = (dataArr, breakOn) => {
  return dataArr.reduce((prev, next, index) => {
    let str = `${prev} ${next}`;
    
    if (index && index % breakOn === 0) {
      str = `${str}<br />`;
    }
    
    return str;
  }, '');
}

const container = document.getElementById('results');
container.innerHTML = getString(arr, 3);

<div id="results"></div>

for循环从数组创建列和行

8 个答案: