Javascript 改进比较数组数据的JS循环

我正在做一个项目，一直有一些资源限制的问题

我正在获取这个JSon，它包含一个超过2.0MB字符串的属性，目的是处理这个字符串，以便在表中显示它。 然而，主要是因为它的大小，浏览器无法处理它，我必须减少bytesIndexTo变量以使循环工作

// Fill an array with the available hexadecimal values for the left side of the table
let bytesIndexControl =  Array.from(Array(bytesIndexTo).keys()).map(i => 30 + i * 32);

var a = 1;
var hex = 1;

for (let i = bytesIndexFrom; i <= bytesIndexTo; i++) {

    // console.log(i + " - " + binary[i] + binary[a]);

    if (i === 0 )
        tableData = "<tr><th>0</th>";

    // Show hex value at the left side of the table
    if ( bytesIndexControl.includes(i - 2) ) {
        tableData += "<th>" + hex.toString(16)   + "</th>";
        hex++;
    }

    tableData += "<td>" + binary[i].toUpperCase() + binary[a].toUpperCase() + "</td>";

    if ( bytesIndexControl.includes(i) ) tableData += "</tr>";

    i++;
    a = a + 2;

}

也许在本地运行代码可以工作Node.js？ 或者有没有办法改善这个循环

目标是将此循环输出注入DOM树

---

谢谢，

试着一次循环一件：

let bytesIndexTo = 1000; // This is just an arbitrary number
for (let i = 0; i < binary.length; i++) {
  for (let j = i; j <= i + bytesIndexTo && j < binary.length; j++) {
    ... // Run your code

    i = j;
  }
}

我没有足够大的字符串来测试这是否有效，但这应该可以做到

编辑：

不如尝试添加一种只进行迭代的分页方式

通过最大字节长度乘以当前页码

例如：

---

现在，您可以添加按钮来添加或减去当前页码。

性能问题在于字符串在javascript中是不可变的

每个+=操作都会创建字符串的副本并将字符串添加到该副本中

请注意，x+=y与x=x+y相同

let string='1MB string'//现在内存已被1MB填充 string=string+'.//与+=，相同，旧字符串保留，新创建，现在内存已满2MB 对于let i=0；i<100；我++ 字符串+='。' //字符串长度现在是1MB+101个字符，内存中填充了以前版本的大于100MB的字符串，这些字符串将在以后被垃圾收集。 改为：

常量数组=[] //或 常量数组=新数组长度//如果可以确定长度 对于let i=0；i<100；我++ 数组。按“字符串” const result=array.join//并且没有内存问题

---

UPD基准测试显示join速度较慢，所以这不是很确定。也许使用2MB字符串连接会更好

感谢所有回复，我发现这是最好的解决方案

var a = 1;
var hex = 1;

const array = [];
let index = 0;
let index2 = 0;

let indexX = 0;

for (let i = bytesIndexFrom; i <= bytesIndexTo; i++) {

            if (i === 0 ) 
                array.push("<tr>");

            // If index are different it's a different line
            if (index === index2 )  {
                array.push("<th>" + hex.toString(16) + "</th>");
                hex++;
                index2++;

                indexX = 0;
            }
            else
                indexX++;

            array.push("<td title='" + index2 + " - " + indexXarray[indexX] + "'>" + binary[i].toUpperCase() + binary[a].toUpperCase() + "</td>");

            if (i === bytesIndexControl[index] )  {
                array.push("</tr>");
                index++;
            }

            i++;
            a = a + 2;

}

---

我没有使用arr.includesobj来搜索数组中的值，而是添加了一些索引以确认数据是否存在并与值匹配，代码更详细，但性能更好。

什么是十六进制和a？为我们提供如何执行此操作的最佳建议，我们需要查看生成的HTML的最终结果以及输入数据的外观。您显示的代码引用了未定义的变量，如bytesIndexControl和a以及binary和hex，因此我们不知道它们是什么，也不知道您试图如何处理它们。请在你的问题中用明确定义的输入和输出来说明整个问题，只有这样，人们才能最好地帮助你。谢谢，我相信这个问题现在更准确了。试着解释一下你在做什么或你想做什么。代码是一个很好的答案，但解释代码是必不可少的。感谢您的解释，但是我希望内容是HTML格式的，以便将其注入DOM树中。另外一个主要的资源问题是这两个函数：ByteIndexControl.includesi-2 if ByteIndexControl.includesi我有两个查找选项来执行检查，谢谢

let maxBytes = 1000;
let currentPage = 3;
let maxPage = Math.ceil(binary.length / maxBytes);

if (currentPage > maxPage) {
  currentPage = maxPage;
} else if (currentPage <= 0) {
  currentPage = 1;
}

for (let i = currentPage * maxBytes; i < (currentPage + 1) * maxBytes && i < binary.length; i++) {
    ... // Run your code
}

var a = 1;
var hex = 1;

const array = [];
let index = 0;
let index2 = 0;

let indexX = 0;

for (let i = bytesIndexFrom; i <= bytesIndexTo; i++) {

            if (i === 0 ) 
                array.push("<tr>");

            // If index are different it's a different line
            if (index === index2 )  {
                array.push("<th>" + hex.toString(16) + "</th>");
                hex++;
                index2++;

                indexX = 0;
            }
            else
                indexX++;

            array.push("<td title='" + index2 + " - " + indexXarray[indexX] + "'>" + binary[i].toUpperCase() + binary[a].toUpperCase() + "</td>");

            if (i === bytesIndexControl[index] )  {
                array.push("</tr>");
                index++;
            }

            i++;
            a = a + 2;

}