深拷贝和浅拷贝

2019-03-19  本文已影响0人  5b5072cc2c5b

首先我们来了解一下JSON.stringify()
JSON.stringify()将值转换为相应的JSON格式:

JSON.stringify({});                        // '{}'
JSON.stringify(true);                      // 'true'
JSON.stringify("foo");                     // '"foo"'
JSON.stringify([1, "false", false]);       // '[1,"false",false]'
JSON.stringify({ x: 5 });                  // '{"x":5}'

JSON.stringify({x: 5, y: 6});              
// "{"x":5,"y":6}"

JSON.stringify([new Number(1), new String("false"), new Boolean(false)]); 
// '[1,"false",false]'

JSON.stringify({x: undefined, y: Object, z: Symbol("")}); 
// '{}'

JSON.stringify([undefined, Object, Symbol("")]);          
// '[null,null,null]' 

JSON.stringify({[Symbol("foo")]: "foo"});                 
// '{}'

JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
// '{}'

JSON.stringify(
    {[Symbol.for("foo")]: "foo"}, 
    function (k, v) {
        if (typeof k === "symbol"){
            return "a symbol";
        }
    }
);


// undefined 

// 不可枚举的属性默认会被忽略:
JSON.stringify( 
    Object.create(
        null, 
        { 
            x: { value: 'x', enumerable: false }, 
            y: { value: 'y', enumerable: true } 
        }
    )
);

// "{"y":"y"}"

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

1.利用json解析实现
JSON.parse(JSON.stringify(obj));

缺点:

    var obj={
      a: undefined,
      b: {first:1,last:2,abc:{name: undefined, age:12}},
      c: null,
      d: '',
      e: function(){
        console.log(111);
      }
    }
    var depclone = JSON.parse(JSON.stringify(obj));
    console.log(depclone)
    /*output: obj.a 和obj.b.abc.name丢失了
      原对象的方法没有拷贝进来
      {
        b:{
          abc: {age: 12}
        },
        first: 1,
        last: 2,
        c: null
        d: ""
      }
    */
2.递归实现
deepCopy(o) {
  if (o instanceof Array) {
    let n = [];
    for (let i = 0; i < o.length; ++i) {
      n[i] =deepCopy(o[i]);
    }
    return n;
  } else if (o instanceof Object) {
    let n = {}
    for (let i in o) {
      n[i] = deepCopy(o[i]);
    }
    return n;
  } else {
    return o;
  }
}

//或者
function deepCopy(origin,target){
  //目标值先置为空
  var target=null;
  //判断原始对象的数据类型
  if(typeof origin==='object'&&origin!==null){
     //判断拷贝的是数组还是对象
     target=origin instanceof Array?[]:{};
     for(var key in origin){
         //递归拷贝
         target[key]=deepCopy(origin[key],target[key])
      }
   }else{
      //基本类型直接赋值
      target=origin;
   }
   return target;
 }

//或者用constructor来判断类型
//参数p为原对象
//参数c为原对象的类型,若原对象为数组,则传入c为[],若原对象是对象传入c为{},也可不传默认为{}
function deepCopy(p,c){
  var c = c || {};
  for(var i in p){
    if(typeof p[i] === "object"){
      c[i] = (p[i].constructor === Array)?[]:{};
    deepCopy(p[i],c[i])
  }else{
    c[i] = p[i]
  }
  }
 return c;
}
3.jquery的extend方法

extend()将一个对象或者多个对象的内容合并到目标对象上面。
语法:

$.extend( [deep ], target, object1 [, objectN ] )
//deep表示是否要深度拷贝,默认是false
//以下为将obj1深度拷贝到obj对象
$.extend(true, obj, obj1)
4.lodash函数库提供了lodash.cloneDeep()实现深拷贝
5.一维数组的深拷贝

一维数组的深拷贝也可以使用slice(),concat, [...array]三种方法
例子:

    var array = [1,2,3,[2,4,6,undefined,null,'']];
    var arrayDepClone1 = array.slice(0);
    var arrayDepClone2 = array.concat();
    var arrayDepClone3 = [...array];
    console.log(arrayDepClone1);
    console.log(arrayDepClone2);
    console.log(arrayDepClone3);
     /*
      [1,2,3,[2,4,6,undefined,null,'']];

    */
    //多维数组项更改其中一个值,其他都会改变,因为是引用类型
    arrayDepClone3[3][0] = 7;
    console.log(array);
    console.log(arrayDepClone1);
    /*此时结果为:
      [1,2,3,[7,4,6,undefined,null,'']];
    */

浅拷贝:Object.create(); Object.assign()都是浅拷贝,对于值为基础类型的则为深拷贝。

上一篇 下一篇

猜你喜欢

热点阅读