为 3D 数组赋值，但它填充了太多的值答案

【问题标题】：Assign value to 3D array, but it fills too much values为 3D 数组赋值，但它填充了太多的值
【发布时间】：2020-09-20 13:55:48
【问题描述】：

编辑：

这是一个 Vue 组件，带有一个绘制网格的画布，画布附加了 EventListener，this.grid 存储了用户点击的位置（在画布内）。初始化this.grid

init(){
            
            console.log("init this.grid")
            //here grid is get from data() and inicialized
            this.grid = []
            var row = [];
            var row2 = []
            for(var i=0;i<this.SIZE;i++){
                row.push(0);
            }
            for( i=0;i<this.HEIGHT;i++){
                row2.push(row);
            }
            for( i=0;i<this.SIZE;i++){
                this.grid.push(row2);
            }
            console.log("this.grid 0s")
            console.log(this.grid);
            
            var canvas = document.getElementById("canvasDraw");
            this.rect = canvas.getBoundingClientRect();
            this.ctx = canvas.getContext("2d");
            this.ctx.fillStyle = "white";
            this.ctx.fill();

            for (i=0; i <= this.SIZE*this.big; i += this.big) {
            this.ctx.moveTo(0,i);
            this.ctx.lineTo(this.SIZE*this.big,i);
            this.ctx.stroke();
            }
            for (i=0; i <= this.SIZE*this.big; i += this.big) {
            //ctx.lineWidth(3);
                this.ctx.moveTo(i,0);
                this.ctx.lineTo(i,this.SIZE*this.big);
                this.ctx.stroke();
            }
            canvas.addEventListener('click',this.write,false);
        },

这是write()函数，写入this.grid

write(evt){
            var x = Math.floor((evt.clientX - this.rect.left)/this.big);
            var y =  Math.floor((evt.clientY- this.rect.top)/this.big);


            console.log("write(evt) call, check if");
            console.log(this.grid[x][this.h][y] == 0);
            console.log("Old value: "+this.grid[x][this.h][y]);

            if(this.grid[x][this.h][y] == 0){
                 this.grid[x][this.h][y] = 1
            }else{
                 this.grid[x][this.h][y] = 0;
            }
            console.log("New value: "+this.grid[x][this.h][y]);
            console.log(this.grid)
            
            this.posUpdated += "posicion xhy: "+x+" "+this.h+" "+y+"<br/>";
            this.ctx.beginPath();
            this.ctx.rect((x*this.big), (y*this.big), this.big, this.big);            
            this.ctx.fillStyle = (this.grid[x][this.h][y] == 1)? "white": "black" ;
            this.ctx.fill();
            //console.log(this.grid)
            //alert((evt.clientX%this.big) + ',' + evt.clientY%this.big);
        }

this.grid 是一个 3d 数组，用零初始化。然后我想将1分配给位置（2,0,2）（x，h，y），但是这段代码在this.grid上分配了1，看起来像

但是有些方法，现在 x==2 的所有位置都分配给 1。为什么？我只希望 (2,0,2) 为 1，而不是所有位置 (2,h,y)。它应该很简单，但是.. 谢谢！。

日志

【问题讨论】：

您的控制台输出与您发布的代码不匹配。请确保它们是一致的。
现在您已经发布了初始化代码，我可以看到您实际上多次分配了数组的同一个实例，例如 row2.push(row); 正在将多个引用推送到同一个数组。第一个答案看起来可以解决问题，但仅供参考，这就是您看到复制相同值的原因。您多次看到 same 数组。

标签： javascript arrays vue.js

【解决方案1】：

我认为问题在于您创建 3d 数组时。您可能使用了 fill 来引用同一个数组，因此结果就是您所显示的。

这是一个工作示例：

const size = 5
const fill = 0
const arr = new Array(size).fill(0).map(() => new Array(size).fill(0).map(() => new Array(size).fill(fill)))

arr[0][0][0] = 1

console.info(arr)

【讨论】：