對象是否通過引用破壞工作或克隆對象

Question

我需要從this.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; 
    }; 

突變爲了避免這種情況，我知道，我們可以使用：

一）​​

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

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

Answer 2

編號對象解構僅將'this.state'中的同一對象分配給不同的變量。

let {errors, author} = this.state; 

所以新error變量指向同一個錯誤對象的this.state

但是裏面，下一行errors = {};不發生變異的this.state。它只會將error變量重新引用到一個新的空對象。所以給定的代碼仍然不會做狀態變化。事實上，在這個對象解構中沒有任何含義。這與此類似。

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

這與本質上沒什麼區別。

let errors = {};