深層拷貝對象的問題

現有文件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)了。