对象破坏是通过引用工作还是克隆对象

Question

我需要从 this.state 复制一个对象来更改它的某些属性值。

例如在下面的方法中，state 被直接改变 (this.state.errors = {})

   authorFormIsValid = () => {
    var formIsValid = true;
    this.state.errors = {}; //clear any previous errors.

    if (this.state.author.firstName.length < 3) {
      this.state.errors.firstName = 'First name must be at least 3 characters.';
      formIsValid = false;
    }

    if (this.state.author.lastName.length < 3) {
      this.state.errors.lastName = 'Last name must be at least 3 characters.';
      formIsValid = false;
    }

    this.setState({errors: this.state.errors});
    return formIsValid;
  };

为了避免这种情况，我知道我们可以使用：

a) object spread operator

let errors={...this.state.errors};

b) 或 Object.assign

let errors=Object.assign({},this.state.errors);

但有时我会看到一些例子，其中 object destructuring 是这样使用的：

authorFormIsValid = () => {
    let formIsValid = true;

   //Destructuring error and authors from this.state
    let {errors, author} = this.state;

    errors = {}; //clear any previous errors.

    if (author.firstName.length < 3) {
      errors.firstName = 'First name must be at least 3 characters.';
      formIsValid = false;
    }

    if (author.lastName.length < 3) {
      errors.lastName = 'Last name must be at least 3 characters.';
      formIsValid = false;
    }

    this.setState({errors});
    return formIsValid;
  };

所以我的问题是，object destructuring是否等同于上面提到的其他两种方法？我的意思是，我会避免使用简单的 object destructuring 直接改变状态吗？

Answer 1

没有。对象解构只是将 'this.state' 中的相同对象分配给不同的变量。

let {errors, author} = this.state;

所以新的 error 变量引用 this.state

中的同一个错误对象

但是，下一行 errors = {}; 不会改变 this.state。它仅将 error 变量重新引用到一个新的空对象。所以给定的代码仍然没有进行状态突变。事实上，在这个对象解构中没有任何意义 error 。它类似于这样的东西。

let errors = this.state.errors;
errors = {};

本质上和这个没什么区别

let errors = {};

Answer 2

Object destructuring 由 reference 工作，因此你不应该在解构它之后改变对象。所以

的做法

let {errors, author} = this.state;

errors = {}; //clear any previous errors.

其实是错误的。

请参阅下面的参考调用片段

let obj = {
  foo: {
    bar: 1
  }
}

let { foo } = obj;

console.log(foo.bar);      // 1
console.log(obj.foo.bar); // 1

foo.bar++;

console.log(foo.bar);      // 2
console.log(obj.foo.bar); // 2

对象破坏是通过引用工作还是克隆对象

Does Object destructing work by reference or it clones the object

javascript

immutability

ecmascript-6

reactjs