如何用JS遍历数组将值分配到三个不同类名p标签并清空数组

不需要把所有内容拼接后塞进单个容器，3个<p>标签的类名有固定规则，和数组索引一一对应（数组第1项对应.v1、第2项对应.v2、第3项对应.v3），直接按索引匹配赋值即可，天然支持数组长度为0-3的场景，长度不足时未匹配到值的标签会保留原有占位符-，不会抛出错误。

完整实现代码 #

<!-- HTML结构保持原有即可 -->
<div class="selections">
  <p class="v1">-</p>
  <p class="v2">-</p>
  <p class="v3">-</p>
</div>

<script>
const dataResults = ['Apple', 'Orange', 'Pear']
// 按索引对应关系给不同p标签赋值
if (dataResults[0] !== undefined) document.querySelector('.v1').textContent = dataResults[0]
if (dataResults[1] !== undefined) document.querySelector('.v2').textContent = dataResults[1]
if (dataResults[2] !== undefined) document.querySelector('.v3').textContent = dataResults[2]

// 赋值完成后清空数组
dataResults.length = 0
</script>

补充说明 #

• 赋值纯文本内容优先用textContent，性能更好也能避免XSS注入风险，如果确实需要写入HTML结构，把代码里的textContent替换成innerHTML即可。
• 用dataResults.length = 0清空数组是适配const声明的最优写法，不会改变原数组的内存引用地址，所有引用该数组的位置都会同步拿到空数组，不会触发语法报错。
• 如果需要保留循环写法，可以按类名规则动态拼接选择器，参考代码如下：

const dataResults = ['Apple', 'Orange', 'Pear']
// 加边界判断，避免数组长度超过3时找不到对应标签
const maxLength = Math.min(dataResults.length, 3)
for (let i = 0; i < maxLength; i++) {
  // 索引从0开始，对应类名v1/v2/v3，所以序号取i+1
  const targetP = document.querySelector(`.v${i+1}`)
  if (targetP) targetP.textContent = dataResults[i]
}
// 清空数组
dataResults.length = 0

注意：循环写法必须加长度边界判断，否则当数组长度超过3时，会尝试查找不存在的.v4及更高序号的标签，产生无效查询。

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