Array.from() 未将 nodeList 转换为数组

Question

我使用 createElement() 创建了列表元素的 nodeList。 然后我使用 Array.from() 将有问题的 nodeList 转换为我可以迭代的数组。 我想根据索引的值应用不同的宽度。 如果索引是 300px 的偶数宽度，则为 500px 的宽度。 但是，控制台返回“Cannot read property 'style' of undefined at bottleOnTheWall”。

我还使用 [...] 将我的 nodeList 转换为数组，但也没有成功。 我的猜测是，它首先不是 nodeList，这意味着它不能转换为数组。 至少不使用这些方法中的任何一种。

我想知道是否有人可以指出我出错的地方并修复我的代码。 我一直在花更多的时间来尝试这样做。

 const bottles = document.getElementById("bottles"); count = 99; var myArray = []; var j = 0; function bottlesOnTheWall() { while (count > 0) { if(count > 2) { myArray.push(`${count} bottles of beer on the wall, ${count} bottles of beers. Take one down and pass it around, ${count - 1} bottles of beer on the wall`) } else if (count === 2) { myArray.push(`${count} bottles of beer on the wall, ${count} bottles of beers. Take one down and pass it around, ${count - 1}bottle of beer on the wall`) } else if (count === 1) { myArray.push(`${count} bottle of beer on the wall, ${count} bottles of beers. No more bottle of beer on the wall`) } else { myArray.push(`No more bottles of beer on the wall. No more bottles of beer. Go to the shop and buy some ${count} more.`) } count-- } while (j < myArray.length) { var liElement = document.createElement("li"); var text = document.createTextNode(myArray[j]); liElement.appendChild(text); bottles.appendChild(liElement); var bottlesArray = Array.from(bottles); if(j % 2) { bottlesArray[j].style.width = "300px"; } else { bottlesArray[j].style.width = "500px"; } j++; } } bottlesOnTheWall();

 #bottles { line-height: 2; letter-spacing: 3px; } /* ul { list-style-image: url('beer.png'); } */ body { background: #FFF8DC; } li { max-width: 500px; margin: auto; margin-bottom: 10px; } ul li { background: #FFEBCD; }

 <.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>bottles on the wall</title> <link rel="stylesheet" href="index.css"> </head> <body> <ul id="bottles" ></ul> <script src="index.js" type="text/javascript"></script> </body> </html>

Answer 1

Array.from需要一个带有已实现Symbol.iterator的变量。 单个元素没有它，而是元素列表，这里不给出。

然后你还有一些问题：

• 全局变量，但仅在单个 function 中使用。 只需移动 function 内的所有变量即可。

• 为count取一个参数。

• 采取一个循环而不首先在数组中收集所有文本，然后再次迭代以创建元素。 唯一的目的是使用 model 层将数据收集与表示层分开。

• 最后取一个条件（三元）运算符?: for width 。

 function bottlesOnTheWall(count) { const bottles = document.getElementById("bottles"); while (count > 0) { let text; if (count > 2) text = `${count} bottles of beer on the wall, ${count} bottles of beers. Take one down and pass it around, ${count - 1} bottles of beer on the wall`; else if (count === 2) text = `${count} bottles of beer on the wall, ${count} bottles of beers. Take one down and pass it around, ${count - 1} bottle of beer on the wall`; else if (count === 1) text = `${count} bottle of beer on the wall, ${count} bottles of beers. No more bottle of beer on the wall`; else text = `No more bottles of beer on the wall. No more bottles of beer. Go to the shop and buy some ${count} more.`; count--; const liElement = document.createElement("li"); liElement.appendChild(document.createTextNode(text)); bottles.appendChild(liElement); liElement.style.width = count % 2? "300px": "500px"; } } bottlesOnTheWall(99);

 #bottles { line-height: 2; letter-spacing: 3px; } body { background: #FFF8DC; } li { max-width: 500px; margin: auto; margin-bottom: 10px; } ul li { background: #FFEBCD; }

 <ul id="bottles"></ul>

Answer 2

您可以进一步推动 DRY 原则，并通过这样做来缩短脚本。 <li>的交替宽度可以通过使用简单的 CSS 选择器来强制执行： li:nth-child(even) { max-width:300px } 。

function bob(n)生成指定啤酒瓶数的字符串，并在bottlesOnTheWall() function 中定义。 然后它可以在任何地方使用，并将提供一个具有任意数量n的正确变形的字符串。

 function bottlesOnTheWall(count) { let n=count; const LIs=[], bob=n=>(n>1?n:(n==0?'no more':1))+' bottle'+(n==1?'':'s')+' of beer'; do { LIs.push('<li>'+bob(n)[0].toUpperCase()+bob(n).substring(1)+' on the wall, ' +bob(n)+'. ' +(n?`Take one down and pass it around, ${bob(n-1)} on the wall`:`No more bottles of beer. Go to the shop and buy some ${count} more.`) +'</li>' ); } while(n--) document.getElementById("bottles").innerHTML=LIs.join('\n') } bottlesOnTheWall(9);

 #bottles { line-height: 2; letter-spacing: 3px; } body { background: #FFF8DC; } li { max-width:500px; margin: auto; margin-bottom: 10px; } li:nth-child(even) { max-width:300px } ul li { background: #FFEBCD; }

 <ul id="bottles"></ul>