JavaScript数据深浅拷贝的深度解析(一文明白!)

//经过测试的代码
//对基础数据类型进行拷贝,基本数据类型不存在深浅拷贝之分
//基本数据类型有:String,Number,Boolean,null,undefined,Symbol
//引用数据类型:Object,Array, Function
var a=1;
var b=a;
a=3;
console.log(a,b) //3,1

//浅拷贝
var a={};
var b=a;
a.name='王菜菜';
console.log(a,b) //{ name: "王菜菜" },{ name: "王菜菜" }

//Object.assign(a)第一个参数不传递空对象的话就是浅拷贝,传了就是深拷贝,将会在下面讲到
var a={
name:1,
arr:[1,2,3,4]
};
var b=Object.assign(a);
a.name='王菜菜';
a.arr='之前是数组';
console.log(a,b);
//{name: "王菜菜", arr: "之前是数组"} {name: "王菜菜", arr: "之前是数组"}

//通过for in 方法进行深拷贝
var a={
name:'前端',
arr:{age:22}
};
function CopyObj(obj) {
    // 判断是不是数组
   let _obj = Array.isArray(obj) ? [] : {};
   for (let i in obj) {
   _obj[i] = obj[i];
  }
   return obj;
}
var b=CopyObj(a);
a.name='王菜菜';
a.arr.age='年龄';
console.log(a,b);
//{name: "王菜菜",arr: {age: "年龄"}},{arr: {name: "前端",age: "年龄"}}

//对象赋值的方式实现深拷贝
var a={
name:'前端'
};
var b={
name:a.name
};
a.name='王菜菜';
console.log(a,b)

//通过json的方法进行深拷贝,但是无法实现对象中方法的深拷贝
//原因:undefined,function,symbol 会在转换json的过程中被忽略掉;
var a={
name:'前端',
fn:function(){
console.log('2021加油!!!');
}
};
function CopyObj(obj) {
  let _obj = JSON.stringify(obj);
  return JSON.parse(_obj);
}
 let b = CopyObj(a);
a.name='王菜菜';
console.log('当前数据',d,a); //{ name: "前端" },{ name: "王菜菜", fn: ƒ}

// 网上找的:Object.assign()方法实现深拷贝,但是也划分深浅拷贝,对象只有一级时为深拷贝,
//二级之后就是浅拷贝;
var a={
name:'前端',
arr:{age:22}
};
var b=Object.assign({},a);
a.name='王菜菜';
a.arr.age='年龄';
console.log(a,b);
//数据联动是浅拷贝,数据不联动是深拷贝
//{name: "王菜菜", arr: "{age:'年龄'}"} {name: "前端", arr: "{age:'年龄'}"}

var a={
name:'前端',
arr:{age:22}
};
var b={...a}; //这样只能拷贝一第一次,但是...扩展运算符可以进行展开继续拷贝;
var b={...a,arr:{...a.arr}};//深拷贝,只拷贝2层的深拷贝;
a.name='王菜菜';
a.arr.age='年龄';
console.log(a,b);

//这个是es6的新语法,用于将两类对象转换成真正的数组：类似数组的对象 和 可遍历对象；
var a = ['前端', ['王菜菜', '2021'], '加油!'];
//需要伪数组对象或可迭代对象；
//传递可迭代的对象就需要传递第二个参数,是个回调函数,然后把对象处理一下
var b = Array.from(a);
a=[];
console.log(a,b); 
//[], Array:['前端',Array: ['王菜菜', '2021'], '加油!']

//es6的新语法,不会改变现有的数组，而仅仅会返回被连接后的数组;
var a = ['前端', ['王菜菜', '2021'], '加油!'];
var b = a.concat([1,2]);
a=[];
console.log(a,b); 
// Array [] Array ["前端", Array ["王菜菜", "2021"], "加油!", 1, 2]

var a = ['前端', ['王菜菜', '2021'], '加油!'];
//截取,第一个参数从下标为几开始截取,第二个参数在下标为几结束截取,结束的下标数据不截取;
var b = a.slice(0,3);
a=[];
console.log(a,b);
//Array [] Array ["前端", Array ["王菜菜", "2021"], "加油!"]

//采用递归进行实现(不过我这个方式还是有些不严谨)
function CopyObj(obj) {
//判断是数组还是对象
  let _obj = Array.isArray(obj) ? [] : {};
  //进行对象循环
  for (let key in obj) {
    //判断obj对象中是否含有当前这个key值,有则为true,否则为false
    if (obj.hasOwnProperty(key)) {
    //obj对象中的key值存在且key值为第二层对象
      if (obj[key] && typeof obj[key] === 'object') {
      //进行函数递归
        _obj[key] = CopyObj(obj[key]);
      } else {
      //如果不是对象则直接赋值
        _obj[key] = obj[key];
      }
    }
  }
  //递归的出口
  return _obj;
}