js对象深浅拷贝

深浅拷贝

引子： JS数据类型分别基本数据类型（String，Number，Undefine，null，Bolean，Symbol）和引用数据类型（数组，对象，函数）

概念：浅拷贝只复制皮毛，如果一个对象里面有引用类型，这个时候使用浅拷贝复制的对象，实际上和原来对象共用一个内存地址，也就是说你改他的引用类型的值，会造成同步修改。而深拷贝会产生新的内存地址。

浅拷贝方式：

• 直接赋值
• Object.assign()
• 解构赋值

实现代码如下：

	let xiaoMin = {
      name: '小明'
    }
    let clone1 = xiaoMin
    let clone2 = Object.assign({xiaoMin})
    let clone3 = { ... xiaoMin}
    console.log(clone1) // { name: '小明'}
    console.log(clone2) // { name: '小明'}
    console.log(clone3) // { name: '小明'}

什么时候需要用到深拷贝？

	let xiaoMin = {
      name: '小明',
      belong: {
        country: '中国',
        address: '揭阳'
      },
      hobbies: ['打篮球', '打游戏']
    }
    let xiaoMin1 = xiaoMin  // 用浅拷贝方式复制了一份
    xiaoMin.belong.address = '广州'
    xiaoMin.hobbies.push('踢足球')
    console.log(xiaoMin) // { name: '小明'}
    console.log(xiaoMin1) // { name: '小明'}

打印的结果如下，可以看到他们同步修改了

这时候就需要用到深拷贝方式了。

• JSON.parse(JSON.stringify(obj)
• 递归函数

实现代码如下：

	let xiaoMin = {
      name: '小明',
      belong: {
        country: '中国',
        address: '揭阳'
      },
      hobbies: ['打篮球', '打游戏']
    }
    let xiaoMin1 = JSON.parse(JSON.stringify(xiaoMin)) // let xiaoMin1 = copy(xiaoMin)
    xiaoMin.belong.address = '广州'
    xiaoMin.hobbies.push('踢足球')
    console.log(xiaoMin) // { name: '小明'}
    console.log(xiaoMin1) // { name: '小明'}
	// 递归函数
	function copy(obj) {
    	 let ret = Object.prototype.toString.call(obj) === '[object Array]' ? [] : {} // 判断传进来的值是数组还是对象
    	for (let [index, item] of Object.entries(obj)) { // Object.entries()打印数组（索引，值）或者对象（键，值）
     	 ret[index] = typeof item === 'object' ? copy(item) : item
    	}
    	return ret
     }

可以看到两者并没有影响。

深拷贝的第一种方式大部分情况都能够使用，但遇到undefine，function类型的值时，不能够进行复制。这时候就要考虑用到递归函数。