引用对象引发的“怪异”问题

版权声明：原创文章，转载请注明出处~ https://blog.csdn.net/qq_26834399/article/details/84580535

    今天遇到一个怪异问题，许久摸不到头脑。

    代码是这样的，Vue项目中，给data中的dimension赋值，遍历数组更改属性。

this.dimension = dataJson.schema.dimension;
console.log(this.dimension);
for (var m = 0; m < this.dimension.length; m++) {
    if (this.dimension[m].columns) {
        var columns = this.dimension[m].columns;
        for (var n = 0; n < columns.length; n++) {
            columns[n].show = true;
            console.log(columns[n].show);
        }
    } else {
        this.dimension[m].show = true;
        console.log(this.dimension[m].show);
    }
}
console.log(this.dimension);

  然而控制台的输出结果却是这样的：

    看到结果我是一脸懵*的，明明已经改为了true，却在后面输出的时候又变成了false。开始以为我的数据结构层级太深导致的，改为使用$.set来更改属性，依旧不对。直到我把代码改成这样，才恍然大悟。

this.dimension = dataJson.schema.dimension;
console.log(JSON.stringify(this.dimension));
for (var m = 0; m < this.dimension.length; m++) {
    if (this.dimension[m].columns) {
        var columns = this.dimension[m].columns;
        for (var n = 0; n < columns.length; n++) {
            columns[n].show = true;
            console.log(columns[n].show);
        }
    } else {
        this.dimension[m].show = true;
        console.log(this.dimension[m].show);
    }
}
console.log(JSON.stringify(this.dimension));

    输出结果是这样的：

    检查后面的代码，发现有个地方又把show设置成了false。但由于是引用对象，导致控制台输出的结果也发生了变化，就产生了简单的代码的“怪异”问题。

    在坑里折腾了很久，才定位到问题的原因，记录一下，以免再犯。