• js:浅拷贝和深拷贝


    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
      <script>
    
        // 浅拷贝
        // 1、基本的赋值 =
        let a = [0, 1, 2, 3, 4],
          b = a;
        console.log(a === b); //true
        a[0] = 1;
        console.log(a, b); //[1,1,2,3,4]
    
        // 2、Object.assing()
        let obj = {
          name: 'chen',
          age: '18'
        }
        let obj2 = {
          hobby: 'music'
        }
        let obj3 = Object.assign(obj2, obj)
        console.log(obj3)
        console.log(Object.assign({}, obj))
    
    
        // 深拷贝
        let test = {
          name: 'chen',
          message: {
            age: '18',
          }
        }
        let test2 = {}
    
        // 1、封装函数
        function deepClone(newObj, oldObj) {
          for (var k in oldObj) {
            let item = oldObj[k];
            if (item instanceof Array) {
              // 先判断是否是数组
              newObj[k] = [];
              deepClone(newObj[k], item)
            } else if (item instanceof Object) {
              // 再判断是否是对象
              newObj[k] = {};
              deepClone(newObj[k], item)
            } else {
              // 基本的数据类型就直接赋值即可
              newObj[k] = item
            }
          }
        }
        deepClone(test2, test)
        console.log(test2)
    
        test2.message.age = '20'
        console.log('--', test);
        console.log('--', test2);
    
    
        // 2、除了递归,我们还可以借用JSON对象的parse和stringify
        let o1 = {
          name: 'chen',
          message: {
            age: '18',
          }
        }
        let o2 = JSON.parse(JSON.stringify(test))
        o2.message.age = '20'
        console.log('o2--', o2);
        console.log('o1--', o1);
    
    
        // 3.除了上面两种方法之外,我们还可以借用JQ的extend方法。 需要依赖JQ库。
        $.extend([deep], target, object1[, objectN])
        // deep表示是否深拷贝,为true为深拷贝,为false,则为浅拷贝
        // target Object类型 目标对象,其他对象的成员属性将被附加到该对象上。
        // object1  objectN可选。 Object类型 第一个以及第N个被合并的对象。
        let a = [0, 1, [2, 3], 4];
        b = $.extend(true, [], a);
        a[0] = 1;
        a[2][0] = 1;
        console.log(a, b);
    
    
        // 4、slice
        var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
        var aCopy = arr.slice();      //没有参数表示从头截取到尾部
        console.log(aCopy);  // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
        console.log(aCopy === arr); // false
        arr[0] = 'a'
        aCopy[0]='1'
        console.log(arr); // false
        console.log(aCopy); // false
    
      </script>
    </body>
    
    </html>
  • 相关阅读:
    从 0 配置 webpack(一)
    Redux
    React Hooks 全解(二)
    日本人要把核污水排进大海,我突然想到几个问题
    突然发现,我的代码还花花绿绿的,挺好看的
    Ghidra ,改道吧,我也准备改道这玩意了
    语音控制?这,看起来很眼熟。
    winafl 工具的编译
    关于 TX 的 WeGame 的一点疑问
    新年的第一个随笔,随便写写吧
  • 原文地址:https://www.cnblogs.com/cyycyhcbw/p/14204030.html
Copyright © 2020-2023  润新知