JS创建二维数组后动态赋值,可能会出现赋值一个元素,结果同行或全部元素都赋值的情况,可能是在创建二维数组时,元素指向了同一个对象
-
Array(rows).fill().map(x => Array(cols).fill({})
这种方式会将二维数组中所有的元素都指向同一个对象,此时若是赋值,则所有元素都同时改变 -
Array.from({ rows }).map(() => Array.from({ cols }).fill({})
这种方式参考了 【JavaScript基础-二维数组】JavaScript修改二维数组的某个元素时,其上下元素也受到影响_赖念安的博客-CSDN博客_js修改二维数组
在使用过程中,解决的所有元素同时改变的的问题,但依旧存在同一行的元素都指向一个对象的情况
3.Array.from(new Array(this.tableData.rows), () => new Array(this.tableData.cols)).fill()
用fill赋值时也存在同一行数据同时改变的情况,所以我用了一种比较笨的办法
- 先Array.from(new Array(this.tableData.rows), () => new Array(this.tableData.cols))创建一个完全为空的二位数组
- 用for循环遍历进行赋值,尝试了一下,成功了,代码如下
creatArray () { let att = { list: [], config: { labelWidth: 100, labelPosition: "right", size: "small", }, } //获取对象 this.configFormTableData = Array.from(new Array(this.tableData.rows), () => new Array(this.tableData.cols)); for (let i = 0; i < this.tableData.rows; i++) { for (let j = 0; j < this.tableData.cols; j++) { this.$set(this.configFormTableData[i], j, JSON.parse(JSON.stringify(att))) } }