如何将逗号分隔的动态数组值展示在表格指定列中

直接用数组原生join(',')方法做拼接即可，该方法会自动遍历数组所有元素，按指定分隔符拼接为字符串，天然适配数组动态增删改的场景，不需要手动写循环处理，还能自动规避手动拼接容易出现的首尾多余逗号问题。

原生JS实现代码 #

<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th>number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="numberCell"></td>
    </tr>
  </tbody>
</table>

<script>
let array = [10, 20, 30]
const numberCell = document.querySelector('#numberCell')

// 抽离渲染逻辑，数组每次更新后调用该函数即可刷新视图
function renderTable() {
  numberCell.textContent = array.join(',')
}

// 首次渲染
renderTable()

// 动态场景测试：3秒后新增数组元素，视图会自动更新为10,20,30,40
setTimeout(() => {
  array.push(40)
  renderTable()
}, 3000)
</script>

常用前端框架极简写法 #

如果是用前端框架做开发，不需要手动操作DOM，直接在模板里调用join即可，响应式数据变更会自动同步视图：

• Vue3 示例

<template>
  <table border="1" cellpadding="8">
    <thead>
      <tr><th>number</th></tr>
    </thead>
    <tbody>
      <tr><td>{{ array.join(',') }}</td></tr>
    </tbody>
  </table>
</template>

<script setup>
import { ref } from 'vue'
// 动态修改array的值即可自动更新表格内容
const array = ref([10,20,30])
</script>

• React 示例

import { useState } from 'react'

export default function NumberTable() {
  const [array, setArray] = useState([10,20,30])
  return (
    <table border="1" cellPadding={8}>
      <thead>
        <tr><th>number</th></tr>
      </thead>
      <tbody>
        <tr><td>{array.join(',')}</td></tr>
      </tbody>
    </table>
  )
}

踩坑提示：不要自己写循环累加字符串拼逗号，这种写法很容易在数组为空、数组只有单个元素的场景下出现多余逗号，join是原生实现的标准方法，已经覆盖了所有边界情况。

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