认识js中浅拷贝和深拷贝的区别

js中浅拷贝和深拷贝的理解

js中拷贝是一种现象，要想明白拷贝必须要先知道赋值。

1. 赋值：是把一个“基本数据”或者“对象数据”交给一个变量的过程;

//a. 基本数据赋值;两个值互不影响-->值
        let a = 10
        let b = a
       a = 20
        console.log(b);
//b. 引用类型：两个值互相影响 -->址>         
       let a = {
            age: 1
        }
        let b = a
        a.age = 2
        console.log(b);

由此引出拷贝，只存在于引用类型（对象数据）

2. 拷贝：就是开辟新空间，把原始对象source的每个键交给另外一个对象target
   浅拷贝: 只赋值数据的第一层
   特点: 如果第一层是基本数据类型，互不影响，如果第一层是应用类型，互相影响。
   实现 浅拷贝代码如下：

let a = {
           age: 1,
           book: {
               price: 100,
               name: '兔子'
           }
       }

       // 1. 第一种写法-> Object.assign((),source)
        let b = Object.assign({}, a)
        a.age = 2
        a.book.price = 200
        console.log(a, b);

       // 2. 第二种写法->spread ...obj || ...array
       // let b = {
       //     ...a
       // }
       // a.age = 2
       // a.book.price = 200
       // console.log(a, b);


       // 3. 第三种-> slice
       // const temp = [1,2,3].slice(0)
       // let arr = [1, 2, [10, 20]]
       // let b = arr.slice(0)
       // arr[0] = 3
       // arr[2][0] = 100
      // console.log(arr, b);

深拷贝 ：动态分配内存空间，把浅拷贝进行层层递归。
特点： 如果是基本数据类型，互不影响，如果是引用类型，互不影响。
实现深拷贝代码如下：

	let a = {
		age: 1,
		book: {
			price: 100,
			name: '兔子'
		}
	}
// 使用; JSON.parse()  JSON.stringify() -->可以深拷贝数组和对象
	let b = JSON.parse(JSON.stringify(a))
	a.age = 2
	a.book.price = 200
	console.log(a,b);

3. 小结：
   赋值 --> 拷贝:
   基本数据类型：拷贝的值互不影响。
   引用数据类型： 拷贝的值互相影响。

• 由此得出拷贝是一种现象，只存在于引用数据类型赋值的过程中，
  根据互相影响的多深，得出来浅拷贝和深拷贝。
  浅拷贝的特点：
  引用类型赋值互相影响，但是只影响第一层的数据；
  如果第一层是基本数据类型互不影响；
  如果第一层是引用数据类型互相影响。
  浅拷贝的使用：
  obj.assign( {}, 要拷贝的对象或数组 )
  …array || …obj 展开运算符
  array || obj.slice(0)
  深拷贝的特点：
  把浅拷贝进行递归操作 --> 动态分配内存空间，把浅拷贝进行层层递归；
  如果是基本数据类型，互不影响；
  如果是引用数据类型，互不影响。
  深拷贝的使用
  JSON.parse(JSON.stringify(a))，专业术语；序列化和反序列化