哈嘍，寶寶們~

最近項目不是很緊張，姐妹兒就給大家多分享一下有用的東西，今天跟大家說說深拷貝與淺拷貝的區(qū)別?。?！

情景描述

情景描述.png

• tableData 數(shù)據(jù)是列表中顯示的數(shù)據(jù)，options 為添加菜單彈框中上級菜單的數(shù)據(jù)信息；
• 現(xiàn)在要將 tableData 中的數(shù)據(jù)賦值給 options，并且在 options 中添加一條數(shù)據(jù)時不能影響 tableData 的改變；

一、淺拷貝

普通的變量賦值一般都是淺拷貝

// 添加菜單按鈕
    creat() {
      // 打開添加菜單窗體
      this.dialogFormVisible = true
      this.dailogTitle = '添加菜單'
      // this.$nextTick()這就是我上一篇講到的：http://www.itdecent.cn/p/1cc770b13058
      this.$nextTick(() => {
        this.form = {}
        this.$refs.ruleForm.resetFields()
      })

      console.log('賦值之前的options，tableData', this.options, this.tableData) // 沒賦值之前的 tableData

      淺拷貝
      this.options = this.tableData;
      this.options.unshift(this.NoParent) // 要往this.options里向前添加一個數(shù)據(jù)unshift()
      console.log('淺拷貝之后的options',this.options,'淺拷貝之后的tableData',this.tableData)
    },

淺拷貝后的數(shù)組數(shù)據(jù)變化.png

• 通過以上的代碼以及圖片的展示，可以很明顯看出 options 通過賦值后向前添加了一個“無”的數(shù)據(jù)，此時 tableData 中的數(shù)據(jù)也同樣添加了一個“無”的數(shù)據(jù)，tableData 也受到了options 變化的影響?。?！
• 此時對 options 來說就是淺拷貝~~~

那么如何做到不影響原數(shù)據(jù)信息呢，接下來我們來看深拷貝

二、深拷貝

淺拷貝是你，深拷貝就是另外一個你，和你沒有任何關(guān)系，除了一摸一樣外~~~

// 添加菜單按鈕
    creat() {
      // 打開添加菜單窗體
      this.dialogFormVisible = true
      this.dailogTitle = '添加菜單'
      // this.$nextTick()這就是我上一篇講到的：http://www.itdecent.cn/p/1cc770b13058
      this.$nextTick(() => {
        this.form = {}
        this.$refs.ruleForm.resetFields()
      })

      console.log('賦值之前的options，tableData', this.options, this.tableData) // 沒賦值之前的 tableData

      // 深拷貝
      this.options = JSON.parse(JSON.stringify(this.tableData))
      this.options.unshift(this.NoParent)
      console.log('深拷貝之后的options', this.options, '深拷貝之后的tableData', this.tableData)
    },

深拷貝之后的數(shù)組數(shù)據(jù)變化.png

• 通過以上的代碼以及圖片的展示，可以很明顯看出 options 通過賦值后向前添加了一個“無”的數(shù)據(jù)，此時 tableData 中的數(shù)據(jù)并沒有受到options 變化的影響?。?！
• 此時對 options 來說就是深拷貝~~~

---

• 這樣的話，你怎么處理 options 都不會影響到原 tableData 數(shù)據(jù)結(jié)構(gòu)！

好了，小伙伴兒們，今天姐妹兒就給大家分享到這里啦，希望可以幫助到大家?。。?/h6>