ES6扩展运算符(三点运算符)“...”用法和对象拷贝

Posted 2021-01-12 wy90s

es6拷贝数组对象有以下方法：

方法一： Object.assign()
// 对象浅拷贝，obj1复制给obj2，这种方法要把obj2设置为{}，不能const obj2 = "";
const obj1 = {a: 1};
const obj2 = {};
Object.assign( obj2, obj1)
 

方法二 ：ES6扩展运算符(...)
//对象浅拷贝，obj1复制给obj2
const obj1 = {a: 1};
const obj2 = {...obj1};
 

方法三 ：深拷贝
//对象深拷贝，obj1复制给obj2
const obj1 = {a: 1};
const obj2 = JSON.parse(JSON.stringify(obj1));

所谓深拷贝和浅拷贝：

const obj1 = {a: 1};
const obj2 =  obj1
obj2.a = 2
console.log(obj1)   //{a:2}

像这种直接赋值的方式其实是obj2引用obj1，二者指向同一个存储地址，无论改变哪一个二者都会受影响。

对于简单数组对象(不含有引用数据类型)，可以用浅拷贝方法来消除这种关联影响。

对于复杂数组对象(含有引用数据类型，比如：{a:1,b:[1,2,3],c:{d:3}} 多层嵌套类型的)，则需要用深拷贝方法。

在实际项目中，通常会这样：

this.selectEvaluate({param: param, showLoading: true}).then((res) => {
      if (res.data) {
         console.log(res.data)
         this.evaluationInfo = res.data
      } else {
         ...
      }
})

console.log打印出来会发现res.data数据结构发生了一些变化，多了一些对象的get和set函数，这样的直接赋值是一种引用，虽然不会对数据产生出bug，但是如果其他地方也需要使用到res.data，像这样的：

this.selectEvaluate({param: param, showLoading: true}).then((res) => {
      if (res.data) {
         console.log(res.data)
         this.evaluationInfo = res.data
         this.selectEvaluationInfo = res.data
      } else {
         ...
      }
})

这种情况下需要用对象拷贝方法来区分，可以使用三点运算符写法比较简便：

this.selectEvaluate({param: param, showLoading: true}).then((res) => {
      if (res.data) {
         console.log(res.data)
         this.evaluationInfo = {...res.data}
         this.selectEvaluationInfo = {...res.data}
      } else {
         ...
      }
})

拷贝对象只是三点运算符的一种用法，它还有其他多种用法，常用于数组序列化：

function f(x, y, z) {
    // ...
}
var args = [0, 1, 2];
f(...args)