用Javascript打印集合元素

Question

我试图通过 innerHTML 打印 set 元素，但是我没有得到期望的结果。虽然我尝试使用 document.write()，可以打印，但我想仅使用 innerHTML。

这是我的源代码：

  <div id="demo"> </div>  
  <script type="text/javascript">
     var i, item;
     var setObj1 = new Set();
     for(i=0;i<5;i++)
     setObj1.add(i);

     for (item of setObj1.values())
     //document.write(item+",");
     document.getElementById('demo').innerHTML="The set value is: "+ item;         
  </script>

输出: 4

期望输出: 0 1 2 3 4

请建议我如何使用innerHTML来打印输出结果。我已经尝试了console log和document.write()，它们都工作正常。

- Ratnesh

---

将值赋给 .innerHTML 将覆盖之前存在的任何内容。尝试使用字符串拼接代替（并且除非您有意插入 HTML 标记，否则请使用 textContent）。 - CertainPerformance

Answer 1

如果你想要一行代码实现，也可以使用扩展运算符将其转换为数组，然后再进行连接：

// Establishing a set 
let mySet = new Set(['a', 'b', 'c']);

// Printing the set, space delimited 
console.log(new Array(...mySet).join(' '));

- jlents

Answer 2

如果你想避免传统的循环，你也可以使用Array#from。

const iterator = new Set([ 1, 1, 2, 3 ])

console.log(
  Array.from(iterator) // prints unique Array [1, 2, 3]
)

也适用于非浏览器目标，如Node，其中Set的输出被缩短了。

- lfender6445

---

Array.from(set)也可以使用。不需要调用values()方法。 - undefined

Answer 3

自 ES5 开始，最简洁的方法是使用展开（...）运算符，它适用于任何可迭代的集合。

console.log([...mySet].join(' '));

- Josep Alsina

Answer 4

您可以将所有值存储在变量中，然后将其设置为元素。请注意，当htmlString仅为文本时，您可以使用textContent或innerText。

<div id="demo"> </div>  
<script type="text/javascript">
   var i, item;
   var setObj1 = new Set();
   for(i=0;i<5;i++)
   setObj1.add(i);
   var val = ''
   for (item of setObj1.values())
    val+=item + ' '; 

   document.getElementById('demo').textContent = "The set values are: "+val;
</script>

- Mamun

Answer 5

使用您的代码，您将只看到最后一个元素。

原因是对于您Set中的每个元素，您都会更改div的内容并插入新字符串。因此，最终只会显示最后一个。

如果您想保留所有这些元素，可以在每次迭代时连接您的div内容：

最初的回答

const setObj1 = new Set();
for (let i = 0; i < 5; i++)
  setObj1.add(i);

for (let item of setObj1.values())
  document.getElementById('demo').innerHTML += "The set value is: " + item + "<br/>";

<div id="demo"></div>

你也可以考虑使用 appendChild，如果你想在你的 div 内添加新的 HTML 元素，而不仅仅是改变 div 的 HTML 内容。"最初的回答"

- quirimmo

Answer 6

你有几个问题：

1. 你需要在每次循环迭代时将内容添加到你的innerHTML末尾，目前你正在覆盖内容。相反，你应该使用+=来添加内容到div中。

2. 你不必要地多次查询DOM（文档对象模型）。实际上，你只需要查询一次。使用document.getElementById是一个昂贵的操作，因此最好尽量少运行它。

3. 如果你不添加或添加HTML，则应该使用.textContent而不是.innerHTML。当处理文本时，养成使用.textContent的好习惯。这可以帮助你避免诸如XSS漏洞之类的问题（在未来的程序中，如果你有用户输入）。

"Original Answer"翻译成"最初的回答"

See working example below (read code comments for further explanation):

const setObj1 = new Set();
for (let i = 0; i < 5; i++)
  setObj1.add(i);

const outputElement = document.getElementById('demo'); // get the element you wish to add to
let toAppend = "The set value is: "; // create a string of the content you wish to add
for (let item of setObj1.values())
  toAppend += item + ' '; // build up the content you wish to add by adding to the string
  
outputElement.textContent += toAppend; // only once the loop is done add your content to the page (the DOM)

<div id="demo"></div>

- Nick Parsons

Answer 7

只显示4次是因为在每次迭代中覆盖了demo div的innerHTML。为了避免这种情况发生，需要在for循环中连接值，并在所有迭代完成后设置innerHTML。

   let endVal = "";
   for (item of setObj1.values()) {
       endVal += item + " ";
   }

   document.getElementById('demo').innerHTML = "The set value is: "+ endVal;

- Nimantha Fernando