现有文件aaa.json,内容如下:
{
"data": [{
"id": "0",
"name": "报表demo-此处是表头",
"dataField": "",
"childs": [
{
"id": "1",
"name": "第一个",
"dataField": "date",
"childs": []
},
{
"id": "2",
"name": "第二个",
"dataField": "",
"childs": [
{
"id": "2-1",
"name": "第二层",
"dataField": "name",
"childs": []
}
]
}
]
}]
}
定义对象ccc如下:
data () {
return {
ccc: []
}
},
赋值对象,查看深层拷贝问题如下:
console.log(JSON.stringify(aaa), 'aaa1')
console.log(JSON.stringify(self.ccc), 'ccc1')
// self.ccc = aaa.data // 直接赋值浅拷贝
// self.ccc = aaa.data.slice() // 深拷贝-不可以
self.ccc = JSON.parse(JSON.stringify(aaa.data)) // 深拷贝-可以
// 定义一个变量插入到数组对象中
let obj = {
childs: [],
dataField: 'wname',
id: 'date',
name: '时间',
isFirst: true
}
// self.ccc.push(obj) // 放到第一层slice和JSON 深拷贝-都可以
self.ccc[0].childs.push(obj) // 放到里层slice 深拷贝-不可以
console.log(JSON.stringify(aaa), 'aaa2')
console.log(JSON.stringify(self.ccc), 'ccc2')
对应效果截图:
可以的情况,我们看到时间这个对象只插入到了ccc,没有改变aaa。
不可以的情况,我们看到时间这个对象既插入到了ccc,同时改变了aaa。
总结:
slice好像外层确实深拷贝了,但是往子节点插入数据发现,内层并没有啊,只能用JSON.parse(JSON.stringify)了。