字母数字数组排序后，如何实现单个元素对应单个span标签展示？

哦，这问题太常见啦！我一眼就瞅出问题所在——你在map的回调函数里用错变量了！

你写的是：

sortedNumbers.map(val => `<span class="values">${values}</span>`)

这里你引用的是整个数组values，而不是当前循环到的单个元素val。所以每一次map迭代，都会把整个数组转成字符串塞进span里，自然每个span都重复了全部三个元素。

只需要把${values}改成${val}就行，修改后的代码如下：

document.querySelector('.pyramid').innerHTML = sortedNumbers.map(val => `<span class="values">${val}</span>`).join('');

这样map会逐个遍历sortedNumbers里的元素，把每个单独的元素放到对应的span标签中，最终生成的HTML就是你期望的样子：

<span class="values">2a</span><span class="values">2b</span><span class="values">2f</span>

内容的提问来源于stack exchange，提问作者Rummel17