当向json数组追加节点时,再去修改它,发现所有的该节点的数据都被修改了

当向一个json数组追加的节点被修改时,所有对象的的节点都被修改了

众所周知,追加json节点时,我们通常会直接给不存在的节点赋值

比如这样:

let json = [
    {
        id:'1'
    },
    {
        id:'2'
    }
]
let state = {
    'onStart': false,
    'onStop': false,
    'shutdown': false
}

for(leti=0;i<json.length; i++) {
	json.state=state
}

//结果
//json == [
//    {
//        id:'1',
//        state:{
//        	'onStart': false,
//    		'onStop': false,
//    		'shutdown': false
//        }
//    },
//    {
//        id:'2',
//        state:{
//       	'onStart': false,
//   		'onStop': false,
//    		'shutdown': false
//        }
//    }
//] 

这样就得到了一个新的节点.

而这样得到的节点似乎出现了一点问题.我们试着修改其中一个数据:

json[0].state["onStart"]=true

我们希望的结果当然是

//结果
//json == [
//    {
//        id:'1',
//        state:{
//        	'onStart': true,
//    		'onStop': false,
//    		'shutdown': false
//        }
//    },
//    {
//        id:'2',
//        state:{
//       	'onStart': false,
//   		'onStop': false,
//    		'shutdown': false
//        }
//    }
//] 

然而实际的结果却是

//结果
//json == [
//    {
//        id:'1',
//        state:{
//        	'onStart': true,
//    		'onStop': false,
//    		'shutdown': false
//        }
//    },
//    {
//        id:'2',
//        state:{
//       	'onStart': true,
//   		'onStop': false,
//    		'shutdown': false
//        }
//    }
//] 

造成这种情况的原因是:

由于state是引用变量 ,进行引用赋值 , 其实还是原来的数组 , 也就是说 ,我赋给json.state,其实一直都是同一个地址里存的同一个数组 , 所以 ,修改后 ,每个引用都一起改掉了 , 那么怎么解决呢 ?

json.state = JSON.parse(JSON.stringify(state )) ;

原理就是先把数组转换成字符串再转换成对象 ,这样会新分配一块内存新创建一个对象.