美文网首页
对象扩展运算符,对象的拷贝

对象扩展运算符,对象的拷贝

作者: Amy_yqh | 来源:发表于2019-05-04 12:17 被阅读0次

    对对象的操作,在我们日常的编码中,用的是非常频繁的,下面我总结了一些对象的操作方法,方便快捷。

    一.浅拷贝

    1.手动实现浅拷贝

        function shallowCopy(oldObj) {
            var newObj = {};
            for(var i in oldObj) {
                if(oldObj.hasOwnProperty(i)) {
                    newObj[i] = oldObj[i];
                }
            }
            return newObj;
        }
    

    2.Object.assign() 实现对象的浅拷贝

        let obj = {name:'乔巴',age:'18',type:{name:'驯鹿'}}
        let obj1 = Object.assign({},obj)
        console.log(obj1)
    

    二、深拷贝

    1.手动实现深拷贝

    function deepCopy(oldObj,newObj){
      var newObj=newObj||{};
      for(var key in oldObj){
          debugger
        if(typeof oldObj[key]==='object'){
          if(oldObj[key].constructor  === Array){
            //这是数组
            newObj[key]=[];
          }else{
            //这是对象
            newObj[key]={};
          }
          deepCopy(oldObj[key],newObj[key]);
           
        }else{
          newObj[key]=oldObj[key];
        }
      }
      return newObj;
    }
    let obj = {name:'乔巴',type:{name:'驯鹿'},age:'18'}
    let deepObje = deepCopy(obj,{})
    

    2.对象的扩展运算符实现拷贝

    let obj = {name:'乔巴',age:'18',type:{name:'驯鹿'}}
    let obj2 = {...obj}
    console.log(obj2)
    
    在此多补充一下对象的扩展运算符的用法:
     // 2.添加属性
        let obj3 = {...obj,color:'brown'}
        console.log(obj3)
    
        // 3.修改属性(即使是引用类型,也不会影响原来的值)
        let obj4 = {...obj,type:{name:'梅花鹿'}}
        console.log(obj4)
    
     // 数组的拷贝
        let arr = [1,2,3,4]
        let arr1 = [...arr]
        console.log(arr1)
    

    3.JSON.parse 实现深拷贝

    let obj = {name:'乔巴',age:'18',type:{name:'驯鹿'}}
    let deepObj = JSON.parse(JSON.stringify(obj ))
    

    相关文章

      网友评论

          本文标题:对象扩展运算符,对象的拷贝

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