JS深浅拷贝

js深浅拷贝

js中分为基础类型 和引用类型（复杂类型）
基础类型赋值的时候是直接在（栈中存储）
引用类型赋值的时候赋值的是引用类型存在栈中存储的引用

1.深拷贝第一种方法

let obj = {
      name:'张三',
      age:18,
     
    }
   let newObj = JSON.parse(JSON.stringify(obj))
   console.log(obj == newObj) // false

说明：obj对象建立后，通过JSON两次转换 重新在‘堆’中 新建了一块内存,存储 newObj 所以 实现了深拷贝。

let obj = {
      name:'张三',
      age:18,
     	hobby:function(）{
     	console.log('篮球')
     	}
    }
   let newObj = JSON.parse(JSON.stringify(obj))
   console.log(newObj)// {name:'张三',age:18,} 不能拷贝对象中的函数

注意：这种方法只能拷贝对象的属性名和属性值，对象中的方法并不能拷贝。

2.深拷贝第一种方法lodash组件库方式

链接:[link] (https://www.lodashjs.com/)

lodash安装

$ npm i -g npm
$ npm i --save lodash

main.js中引入 挂载到Vue实例原因上面

//深拷贝 
const lodash = require("lodash")

Vue.prototype.$lodash = lodash

需要深拷贝的地方直接使用就可以了

let obj = {
      name:'张三',
      age:18,
      hobby:function(){
        console.log('打篮球')
      }
    }
  let newObj = this.$lodash.cloneDeep(obj)
  console.log(obj == newObj) // false

说明：这种方法即可以拷贝对象上面的属性也可以拷贝对象上面的方法。