怎么解决修改一个值为对象的属性时出现的奇葩现象？？

Question

第一种情况（保存引用至变量a,在修改变量a的值）：

var obj = [
            {
               name: 
                     {
                       test: 'nihao'
                     }
            }
          ];
          
// 未修改的对象
console.log('原始对象：' , JSON.parse(JSON.stringify(obj)));

// 保存引用
var data = obj[0]['name'];

// 修改
data = 'hello'; // 修改不会作用到对象 obj ！！

console.log('修改name属性后的对象：' , JSON.parse(JSON.stringify(obj)));

上面代码执行结果预览：

第二种情况（不保存引用，直接修改）：

var obj = [
            {
               name: 
                     {
                       test: 'nihao'
                     }
            }
          ];

// 未修改的对象
console.log('原始对象：' , JSON.parse(JSON.stringify(obj)));

// 不保存引用后修改，即直接修改
obj[0]['name'] = 'hello'; // 能够作用到对象 Obj！！

console.log('修改name属性后的对象：' , JSON.parse(JSON.stringify(obj)));

上面代码运行结果预览:

为什么会出现如此奇葩的现象？？我实在不太明白....，求解惑

Answer 1

data直接被赋值为hello了，和obj[0]['name']无关

Answer 2

第一种情况

var data = obj[0]['name']; // step 1
data = 'hello'; // step 2

你把obj[0]['name']看做A, 'hello'看做 B, 第一步data指向A的引用地址，第二步，data指向了B的引用地址。你会发现两步操作只是data的指向变了而已，A 并没有改变，所以 对象obj不会改变。

第二种情况

obj[0]['name'] = 'hello'; // 能够作用到对象 Obj！！

这个通过取值并赋值，直接修改属性，当然直接修改对象Obj

其实这是js基础，推荐篇文章：( JS 进阶 )基本类型 引用类型 简单赋值 对象引用

Answer 3

第一种情况 var data = obj[0]['name']; data是字符串类型。直接复制一个内存地址，所以修改data的值不影响obj；
第一种情况 obj[0]['name'] = 'hello'; 已经改变了obj的内容，obj自然会变化。

Answer 4

var obj = [
            {
               name: 
                     {
                       test: 'nihao'
                     }
            }
          ];
    var data = obj[0]['name'];
    console.log(data);//Object {test: "nihao"}
    data.test="wohao";
    console.log(obj);//obj[0].name.test已经是"wohao"了，data确定是引用
    console.log(obj==data);//false
    data = 'hello'; 
    console.log(data);//hello
    data.test="wohao";
    console.log(data);//hello 说明上一行的赋值是失败的，因为当data是"hello"字符串的时候，它并没有test这个属性，所以不能给data.test赋值，但非严格模式下并不会报错
    console.log(obj);//原obj