美文网首页饥人谷技术博客
引用类型与对象拷贝

引用类型与对象拷贝

作者: cccccccc7355608 | 来源:发表于2017-09-15 21:47 被阅读0次

    基本类型、引用类型

    • 基本类型(字符串、数值、布尔值、null 和 undefined):指的是保存在栈内存中的简单数据段
    • 引用类型(对象、数组、函数、正则):指的是那些保存在堆内存中的对象,变量中保存的实际上只是一个指针,这个指针执行内存中的另一个位置,由该位置保存对象

    练习一

    var obj1 = {a:1, b:2};
    var obj2 = {a:1, b:2};
    console.log(obj1 == obj2);
    console.log(obj1 = obj2);
    console.log(obj1 == obj2);
    // -----------------------//
    /*
    得到的结果为
    // false
    // {a: 1, b: 2}
    // true
    分析如下:
    声明了两个对象,属性和属性值皆相同,但 obj1 和 obj2 是两个不同的对象
    var obj1 = {a: 1, b: 2} // 假设内存地址为 0x0000
    var obj2 = {a: 1, b: 2} // 假设内存地址为 0x0088
    console.log(obj1 == obj2) // 二者指向的不是同一个对象(地址),为 false
    console.log(obj1 = obj2) // 赋值操作,使得 obj1 指针指向的地址变为 0x0088
    console.log(obj1 == obj2) // 二者指向同一个对象(地址),为 true
    */
    

    练习二

    var a = 1
    var b = 2
    var c = {name: '饥人谷', age: 2}
    var d = [a, b, c]
    
    var aa = a // 1
    var bb = b // 2
    var cc = c // {name: '饥人谷', age: 2}
    var dd = d // [1, 2, {name: '饥人谷', age: 2}]
    
    a = 11
    b = 22
    c.name = 'hello' 
    d[2]['age'] = 3
    
    console.log(aa)
    console.log(bb)
    console.log(cc)
    console.log(dd)
    //--------------//
    /*
    结果如下
    // 1
    // 2
    // {name: 'hello', age: 3}
    // [1, 2, {name: 'hello', age: 3}]
    分析如下:
    a、b 都为基本类型中的number,对 aa、bb 赋值之后,aa、bb 也为基本类型的 number,无论对 a、b 如何修改,都不会影响 aa、bb 的值,
    而对象 c 是引用类型,标识符 c 的指针指向 {name: '饥人谷', age: 2} 在内存中所在的地址,对 cc 赋值操作,cc 也指向同一个地址,对 c 进行修改,实际上是对 {name: '饥人谷', age: 2} 进行修改,凡是引用了这一对象的标识符都会受其影响,所以 cc、dd 中的 name 和 age 分别变为 'hello' 和 3
    */
    

    练习三

    var a = 1
    var c = {name: 'jirengu', age: 2}
    
    function f1(n){
      ++n // 前增量
    }
    function f2(obj){
      ++obj.age
    }
    f1(a)
    f2(c)
    f1(c.age)
    console.log(a)
    console.log(c)
    //----------------//
    /*
    结果如下:
    // 1
    // {name: 'jirengu', age: 3}
    分析如下:
    a 为基本类型的number,
    执行 f1(a) 不会影响全局作用域下的 a,所以 a 仍然为 1
    c 为引用类型的对象,
    执行 f2(c) 时,c 作为参数传递进入 f2,实则 f2 的参数 obj = c,obj 指向对象 {name: 'jirengu', age: 2},f2 内部对 obj.age自增1,会影响到所引用的对象,对象变为 {name: 'jiregu', age: 3}
    执行 f1(c.age) 时,f1 内部的 n 实际上获得了 age 的属性值 2,之后同第一步,n 自增1,但 age 的属性值不受影响,仍为 3
    */
    

    练习四 过滤数组,在原数组上操作

    var arr = [3, 1, 0, -1, -3, 2, -5]
    function filter(arr){
      for(let i = 0; i < arr.length; i++){
        if(arr[i]<0 || arr[i] == 0){
          arr.splice(i, i); // 若不是正数,删除
          i--; // 抵消 i++ 的自增1 效果,下一轮循环仍从该位开始
        }
      }
      return arr;
    }
    filter(arr)
    console.log(arr) // [3, 1, 2]
    

    练习五 过滤数组,不在原数组上操作

    var arr = [3, 1, 0, -1, -3, 2, -5]
    function filter(arr){
      if(Array.prototype.filter){
        return Array.prototype.filter.call(arr, function(x){
          return x > 0;
        });
      } else {
        var result = [];
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] > 0) {
            result.push(arr[i])
          }
        }
        return result;
      }
    }
    var arr2 = filter(arr)
    console.log(arr2) // [3, 1, 2]
    console.log(arr) // [3, 1, 0, -1, -3, 2, -5]
    

    对象拷贝

    参考:javaScript中浅拷贝和深拷贝的实现

    // 浅拷贝
    function shallowCopy(oldObj) {
      var newObj = {};
      for (var i in oldObj) {
        if (oldObj.hasOwnProperty(i)) {
          newObj[i] = oldObj[i];
        }
      }
      return newObj;
    }
    
    var x = {
      a: 1,
      b: {f: {g: 1}},
      c: [1, 2, 3]
    };
    var y = shallowCopy(x);
    console.log(y.b.f === x.b.f); // true
    
    // Object.assign() 可以把任意多个的元对象自身的可枚举属性拷贝给目标对象
    var x = {
      a: 1,
      b: { f: { g: 1 } },
      c: [1, 2, 3]
    };
    var y = Object.assign({}, x);
    console.log(y.b.f === x.b.f); // true
    
    
    // 深拷贝
    function deepcCopy(oldObj) {
      var newObj = {};
      for (var key in oldObj) {
        if(oldObj.hasOwnProperty(key)) {
          if (typeof oldObj[key] === 'number' || typeof oldObj[key] === 'boolean' || typeof oldObj[key] === 'string' || oldObj[key] === undefined || oldObj[key] === null) {
            newObj[key] = oldObj[key];
          } else {
            newObj[key] = deepCopy(oldObj[key]); // 递归调用,层层遍历拷贝
          }
        }
      }
      return newObj;
    }
    
    // JSON.parse、JSON.stringify实现深拷贝
    var source = { name: "source", child: { name: "child" } };
    var target = JSON.parse(JSON.stringify(source));
    target.name = "target"; // 改变 target 的 name 属性值
    console.log(source.name); // source
    console.log(target.name); // target
    target.child.name = "target child"; // 改变 target 的 child
    console.log(source.child.name); // child
    console.log(target.child.name); // target child
    
    

    记住,深拷贝的目的在于,拷贝完成时,就“切断”引用

    相关文章

      网友评论

        本文标题:引用类型与对象拷贝

        本文链接:https://www.haomeiwen.com/subject/wdtesxtx.html