有没有一种不用那么复杂的JavaScript编写方法？

我正在创建一个DOM元素数组（HTML），而不必查看DOM，如下所示：

const frames = [
    ...document.createRange()
        .createContextualFragment(
            new String(
                new Array(options.length)
                    .fill()
                    .map((v, i) => `<div class="page"><iframe src="./renders/page-${i + 1}"></iframe></div>`)
                )
            )
        .querySelectorAll('div')
].map((page, index) => _addPageWrappersAndBaseClasses(page, index))

const frames=[
…document.createRange（）
.createContextualFragment(
新字符串(
新数组（options.length）
.fill（）
.map（（v，i）=>``）
)
)
.querySelectorAll（'div'））
].map（（页面，索引）=>\u addPageWrappersAndBaseClasses（页面，索引））

---

有没有更明智的方法

当然，只是不要把所有的事情都放在一条线上。相反，明智地使用变量和换行符

const divStrings = new Array(options.length)
  .fill()
  .map((v, i) =>
    `<div class="page"><iframe src="./renders/page-${i + 1}"></iframe></div>`
  )

const frag = document.createRange().createContextualFragment(new String(foo))

const divs = [...frag.querySelectorAll('div')]

const frames = divs.map(_addPageWrappersAndBaseClasses)

const divStrings=新数组（options.length）
.fill（）
.map（（v，i）=>
``
)
const frag=document.createRange（）.createContextualFragment（新字符串（foo））
常量divs=[…frag.queryselectoral（'div'）]
const frames=divs.map（_addPageWrappersAndBaseClasses）

除了格式和变量之外，对上面代码的唯一更改是最后对

.map

的匿名回调是无关的。我将其更改为直接传递被调用的函数

---

您可以去掉一两个变量，因此不需要太长，但将所有内容打包到一个表达式中并没有任何好处。

当然，只是不要将所有内容放在一行。相反，明智地使用变量和换行符

const divStrings = new Array(options.length)
  .fill()
  .map((v, i) =>
    `<div class="page"><iframe src="./renders/page-${i + 1}"></iframe></div>`
  )

const frag = document.createRange().createContextualFragment(new String(foo))

const divs = [...frag.querySelectorAll('div')]

const frames = divs.map(_addPageWrappersAndBaseClasses)

const divStrings=新数组（options.length）
.fill（）
.map（（v，i）=>
``
)
const frag=document.createRange（）.createContextualFragment（新字符串（foo））
常量divs=[…frag.queryselectoral（'div'）]
const frames=divs.map（_addPageWrappersAndBaseClasses）

除了格式和变量之外，对上面代码的唯一更改是最后对

.map

的匿名回调是无关的。我将其更改为直接传递被调用的函数

---

您可以去掉一两个变量，因此它不需要太长，但将所有内容打包到一个表达式中并没有任何好处。

是的，使用常规DOM方法将更高效、更简洁

for(let i = 0; i < options.length; i++) {
    const page = document.createElement("div");
    page.className = "page";
    const frame = document.createElement("iframe");
    frame.src = `./renders/page-${i + 1}`;
    page.appendChild(frame);
    _addPageWrappersAndBaseClasses(page, i);
}

for（设i=0；i

---

您还应该尽量避免在JavaScript中使用字符串解析HTML。

是的，使用常规DOM方法将更高效、更简洁

for(let i = 0; i < options.length; i++) {
    const page = document.createElement("div");
    page.className = "page";
    const frame = document.createElement("iframe");
    frame.src = `./renders/page-${i + 1}`;
    page.appendChild(frame);
    _addPageWrappersAndBaseClasses(page, i);
}

for（设i=0；i

---

您还应该尽量避免在JavaScript中解析带有字符串的HTML。

代码实现的健全性不由任何其他人判断，这与本网站无关。我在您的代码中添加了一些换行符，以使其至少在问题上下文中可读。如果这是这个问题的重点，那么您可以回滚。换行符可以。我正在寻找另一种方法，这段代码是合理的，对我来说非常清楚。代码实现的健全性不由任何其他人判断，对于本网站来说是离题的。我已经在您的代码中添加了一些换行符，以使其至少在问题上下文中可读。如果这是这个问题的重点，那么您可以回滚。换行符可以。我正在寻找另一种方法，这段代码是理智的，对我来说非常清楚。酷！这是人们在ES6标准之前写这篇文章的最初方式。我正在寻找一种功能性更强的替代方法，即不使用

进行循环

，但谢谢你，这也很好。如果循环更简洁，你不应该尝试不使用

进行循环，尤其是在这种情况下，因为用字符串解析HTML不是好的做法。酷！这是人们在ES6标准之前写这篇文章的最初方式。我正在寻找一种功能性更强的替代方法，即不使用
进行循环
，但谢谢你，这也很好。如果循环更简洁，你不应该尝试不使用
进行循环，尤其是在这种情况下，因为用字符串解析HTML不是一种好的做法。