如何使用JavaScript的Set实现数组去重并将每项渲染为li标签

你当前的代码无法实现预期效果，核心问题是你只创建了单个<li>标签，直接把去重后的整个数组塞进了这一个标签内，最终只会渲染出1个li，内容是所有数组项拼接成的逗号分隔字符串，不会为每个元素生成独立列表项。

根据你的代码写法判断你大概率在使用JSX语法（React类框架），以下分别给出两种场景的实现：

JSX 写法 #

用Array.prototype.map遍历去重后的数组，为每个元素返回独立的<li>节点即可：

const xx = [" 4", "9", "16"," 4", "9", "16"," 4", "9", "16"]
// 先完成去重
const uniqueList = [...new Set(xx)]

return (
  <ul>
    {uniqueList.map((item, idx) => (
      // 原数组中" 4"带前导空格，不需要的话可以去掉.trim()
      <li key={idx}>{item.trim()}</li>
    ))}
  </ul>
)

注：React场景下列表渲染需要给每个li添加唯一的key属性，这里用索引作为key仅适用于列表静态、无排序增删的场景，如果列表有动态操作建议用业务唯一值作为key。

原生JavaScript写法 #

如果是无框架的原生开发场景，通过DOM操作逐个创建li节点插入即可：

<ul id="container"></ul>
<script>
const xx = [" 4", "9", "16"," 4", "9", "16"," 4", "9", "16"]
const uniqueList = [...new Set(xx)]
const ulEle = document.getElementById('container')

uniqueList.forEach(item => {
  const liEle = document.createElement('li')
  liEle.textContent = item.trim()
  ulEle.appendChild(liEle)
})
</script>

• new Set(xx)会生成自动去重的Set实例，通过展开运算符...可以将其转回纯数组
• 要为每个数组项生成独立DOM/JSX节点，必须遍历去重后的数组，逐个生成对应li，不能直接把整个数组放入单个li标签中

内容的提问来源于stack exchange，提问作者UI SMART SOUMEN