JS对象和数组深浅拷贝总结②

在实际开发中遇到过太多次深拷贝浅拷贝的问题。总结一下~

JS数据存储和深浅拷贝实际运用①

这是之前写过的一篇文章，解决浅拷贝深拷贝的问题只说了一种方法，今天来补充一下。

介绍深拷贝和浅拷贝都在上一篇文章里介绍过了，在上一篇文章里只写了一个针对于数组的一种深拷贝，今天总结一下 js中对象和数组的深浅拷贝。具体的场景已经在上一篇文章里说明了。

这里废话一下上一篇文章中出现的问题：一个表格数据，可以点击编辑弹出表单数据，修改数据后点击取消或者关闭表单时，表格的数据会变空，解决的思路就是当我点击表单显示的时候，定义一个中间变量存储当前表单的数据。点击取消按钮或者关闭表单时，把之前定义的这个中间变量重新赋值给当前的表单数据。就可以解决啦~
当然这个问题还是由于对象或者数组的深浅拷贝的问题。所以今天来总结一下对象和数组的深拷贝和浅拷贝的常用方法。

首先来介绍一下对象的浅拷贝

1.最传统的浅拷贝

 var gogo = {
    name: '小明',
  }
  var out = {}
  out = gogo
  console.log(gogo)  //{name: "小明"}
  console.log(out)   //{name: "小明"}
  out.name = '小花花'
  console.log(gogo) //{name: "小花花"}
  console.log(out)  //{name: "小花花"}

　　

当我改变out的值的时候gogo里也改变了~
2.Object.assign()
这个方法是es6的新方法，用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。目标对象就是Object.assign()，括号里的第一个参数。

注意，Object.assign可以用来处理数组，但是会把数组视为对象。

说完了对象的浅拷贝说一下深拷贝
1.转换成json再转换成对象实现对象的完全深拷贝（此方法适用于数组的深拷贝，也是比较简单快速的深拷贝方法）

var out= {
  name: '小花花',
  sex: 'man',
  old: '18'
}
var gogo= JSON.parse(JSON.stringify(out))

　　

这种方式目前是最受推崇的完全深拷贝写法。
但是这样容易造成数据丢失，因为如果对象中含有Date, function, undefined, Infinity, RegExp, Map, Set, Blob, FileList, ImageData, sparse Array, Typed Array等复杂对象的话，转化成json再转回来后这些数据都丢失了。。。

2.扩展运算符

var out= {
  name: '小花花',
  sex: 'man',
  old: '18'
}
var { ...gogo} = out
 console.log(gogo) //{name: "小花花", sex: "man", old: "18"}
  console.log(out)   //{name: "小花花", sex: "man", old: "18"}
  out.name = '大花花花花花'
  console.log(gogo)  //{name: "小花花", sex: "man", old: "18"}
  console.log(out) // { name: "大花花花花花", sex: "man", old: "18" }

　　

介绍完对象的深浅拷贝之后接下来说一下数组

1. concat() slice() 实现一维数组的深拷贝，多维数组不行。

   var array1 = ['a',1,true,{name:'lei',age:18}];
   
   //concat()  slice() 实现浅拷贝
   
   var array2 = array1.concat()
    
   //修改拷贝后的数据
   
   array2[0] = 'b';            //array1[0]是原始数据类型 所以是直接赋值的
   
   array2[3].name = 'zhang';   //array1[3]是对象数据类型 所以拷贝的是对象的引用，其实还是和原数组使用同一对象
   
   console.log(array1);   //  ['a',1,true,{name:'zhang',age:18}]
   

   　　

   2.递归（目前有点难度所以以后再补充） 深拷贝

   3.针对于多维数组的jq方法 深拷贝
   jQuery.extend()

   传送门：https://www.runoob.com/jquery/misc-extend.html