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

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

一.浅拷贝

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 ))

你可能感兴趣的:(对象扩展运算符,对象的拷贝)