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

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

作者: 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 ))

相关文章

  • ES6之扩展运算符-对象

    Spread扩展运算符 (1) 复制对象(深拷贝) 拷贝了对象实例的属性对象的扩展运算符(...)用于取出参数对象...

  • 解构赋值,函数扩展默认值

    扩展运算符 对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。 对象的扩展运算符等同...

  • ES6之解构赋值/剩余运算符/箭头函数

    扩展运算符(对象) 扩展运算符(数组) 扩展运算符和Object.assign对对象进行合并的行为,是属于浅拷贝 ...

  • 扩展运算符(...)

    对象的扩展运算符 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 上述方法实际...

  • "..."扩展运算符的使用

    对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中 使用扩展运算符可以简洁代码,非常实...

  • 扩展运算符...的作用

    扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 拷贝运算符有拷贝功能。拷贝是一个动词 ht...

  • 扩展运算符(...)

    对象中的扩展运算符(...)用于去除参数对象中的所有可遍历属性,拷贝到当前对象中。 扩展运算符同样可以运用到对数组...

  • 对象

    对象的深拷贝 对象合并 assign() hasOwnProperty 遍历赋值 Es6,扩展运算符 Object...

  • CostumeTab---messages

    sharedMessages 对象中的扩展运算符(...),用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中...

  • ... 扩展运算符

    对于扩展运算符,只需要记住一句话 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之...

网友评论

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

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