【JavaScript踩坑记录】

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 308 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

数组push踩坑记录

问题介绍

最近在写一个嵌套了表格的对话框，要实现点击一个按钮就弹出一个新对话框，对话框内有一系列配置项，配置保存后为表格新增一行的功能，数据结构比较复杂。
对话框数据结构为：

editTableForm: {
  name: "",
  setupCfg: []
}

其中setupCfg里是表格数据。
点击按钮后的对话框配置项数据结构为：

selectProcedureForm: {
   id: null,
   name: "",
   params: ""
}

这些数据会被整个push到前面的setupCfg里。
selectProcedureForm相关的前端操作涉及到下拉框，代码为：

<el-dialog :title="procedureDialogTitle" :visible.sync="procedureDialogVisible">
        <el-form
          ref="selectProcedureForm"
          :model="selectProcedureForm"
        >
          <el-form-item>
            <el-select
              v-model="selectProcedureForm.id"
              @change="handelProcedureChange(selectProcedureForm.id)">
              <el-option
                v-for="item in procedureList"
                :key="item.id"  
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参数内容">
            <el-input type="textarea" v-model="selectProcedureForm.params"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="procedureDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleProcedureEditSave">确定</el-button>
        </div>
      </el-dialog>

原本的写法是，this.editTableForm.push(selectProcedureForm)，理论上push两条的话，表格结果应该为：

[{id: 1, name: "各地广泛但是", params: '{"count": 24, "range": [1,3,4]}'},
 {id: 2, name: "帆帆帆帆", params: '{"count": "dffggf"}'}]

结果发现第二次新增时，下拉框选择确定后就会把第一次的id改掉，导致最后有两条id一样的数据
错误数据：

[{id: 2, name: "各地广泛但是", params: '{"count": 24, "range": [1,3,4]}'},
 {id: 2, name: "帆帆帆帆", params: '{"count": "dffggf"}'}]

解决办法

push前使用深拷贝：

const a = deepClone(this.selectProcedureForm);
this.editTableForm.setupCfg.push(a)

总结

数组push时实际上是引用对象，而引用意味着之后对象属性的修改数组仍能获取到，
下拉框里双向数据绑定也引用了这个对象，就导致第二次下拉框数据的改变影响到了已经push进数组的数据。