JavaScript的深浅拷贝--简写

拷贝的区别？

浅拷贝：只拷贝一层数据(简单数据类型)

深拷贝：拷贝所用的数据（包含复杂数据类型）

如何查看是否拷贝成功？

更改一个的属性或方法的值，看是否会有数据覆盖导致两个数据都改变。

一、浅拷贝

浅拷贝方式：0.1  for...in 循环遍历拷贝；0.2 通过展开运算符拷；0.3 Object.assign(新,旧)。

0.1  for...in 循环遍历拷贝

let arr = {
        uname: '张三',
        age: 233,
        max: 987,
      }

      let ass = {}

     // 拷贝方式
      ass.uname = arr.uname
      for (let k in arr) {
        ass[k] = arr[k]
      }

// 输出语句
console.log(arr, ass)

 0.2 通过展开运算符拷；

let arr = {
        uname: '张三',
        age: 233,
        max: 987,
       }

//展开运算符，拷贝。注意：需要用{}包裹
 let ass ={...arr}

//输出语句

console.log(arr, ass)

0.3 Object.assign(新,旧)

let arr = {
        uname: '张三',
        age: 233,
        max: 987,
      }
      let ass = {}

// 拷贝方式
Object.assign(ass,arr )

//输出语句
console.log(arr, ass)

二，深拷贝

深拷贝方式：0.1 for..in循环遍历+条件判定；0.2 用JSON特性两次转换；0.3 londasn下载js插件。

0.1 for..in循环遍历+条件判定；

let arr = {
        uname: '唐三藏',
        max: 996,
        kkl: '洗澡',
        color: ['red', 'red', 'red', 'red', 'red', 'red'],
        gjrmd: {
          gjr1: '孙悟空',
          gjr2: '猪悟净',
          gjr3: '沙僧',
          gjr4: '小白龙',
        },
      }


let ass = {};
// 拷贝方式 封装函数
        function nanes(newObj, oldObj) {
          for (let k in oldObj) {
            // 1.1  先数组  
            if (oldObj[k] instanceof Array) {
              newObj[k] = []
              nanes(newObj[k], oldObj[k])
              // 1.2 处理对象
            } else if (oldObj[k] instanceof Object) {
              newObj[k] = {}
              nanes(newObj[k], oldObj[k])
              // 1.3 处理浅层
            } else {
              newObj[k] = oldObj[k]
            }
          }
        }

      nanes(ass, arr)
//输出语句
      console.log(ass, arr);

0.2 用JSON特性两次转换；

 let arr = {
        uname: '唐三藏',
        max: 996,
        kkl: '洗澡',
        color: ['red', 'red', 'red', 'red', 'red', 'red'],
        gjrmd: {
          gjr1: '孙悟空',
          gjr2: '猪悟净',
          gjr3: '沙僧',
          gjr4: '小白龙',
        },
      }

// 拷贝方式
let ass = JSON.parse(JSON.stringify(arr))

//输出
console.log(ass, arr)

0.3 londasn下载js插件

搜索  londasn 下载js文件，插入引用。

// 插入js文件
<script type="text/javascript" src="./lodash.min.js"></script>
<script>

    let arr = {
        uname: '唐三藏',
        max: 996,
        kkl: '洗澡',
        color: ['red', 'red', 'red', 'red', 'red', 'red'],
        gjrmd: {
          gjr1: '孙悟空',
          gjr2: '猪悟净',
          gjr3: '沙僧',
          gjr4: '小白龙',
        },
      }
// 引用深拷贝的js 
let ass = _.cloneDeep(arr)

//输出
console.log(ass, arr)


</script>