JavaScript中如何将数组作为子项插入另一数组并保留嵌套结构

推荐实现方式 #

不用单独声明N个RB_array_*变量，直接通过配置映射的方式批量处理，后续维护更方便，代码如下：

• 第一步：定义复选框与对应配置的映射关系

// key为复选框DOM的ID，value为勾选后需要插入的配置数组
const checkboxConfig = {
  mycheckboxButton1: ["setting A_1", "setting B_1"],
  mycheckboxButton2: ["setting A_2", "setting B_2"],
  mycheckboxButton3: ["setting A_3", "setting B_3"],
  // 新增复选框仅需在此处添加对应配置即可
}

• 第二步：生成符合要求的final_array
  如果只需要保留已勾选复选框的配置，顺序和配置列表保持一致：

const final_array = []
for (const checkboxId in checkboxConfig) {
  const targetCheckbox = document.getElementById(checkboxId)
  if (targetCheckbox?.checked) {
    final_array.push(checkboxConfig[checkboxId])
  }
}

如果需要和复选框顺序完全对齐，未勾选的位置保留空数组：

const final_array = Object.entries(checkboxConfig).map(([checkboxId, config]) => {
  const targetCheckbox = document.getElementById(checkboxId)
  return targetCheckbox?.checked ? config : []
})

兼容原有写法的方案 #

如果你不想调整原有逐个声明变量的逻辑，也可以直接对变量数组做过滤：

// 按顺序把所有RB数组变量放到临时数组中
const tempArray = [RB_array_1, RB_array_2, RB_array_3, RB_array_x]
// 过滤掉空数组（未勾选的RB数组为空）就得到目标结构
const final_array = tempArray.filter(item => item.length > 0)
// 如果要保留空数组占位的话，直接赋值即可：const final_array = tempArray

注意事项：你提供的示例代码中存在变量名拼写错误，声明的变量是mycheckboxButton1，判断时写的是mycheckboxButton，实际开发中注意规避这类低级错误。

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