객체 값을 변경하는 불변 함수

Question

var brand = [{id:1,name:'samsung',price:1000},{id:1,name:'lg',price:2000}]; 
var changed = brand[0].price = 2000; 

지금은 삼성의 가격이 2000과 같고 변경되었지만 변경되지 않고 브랜드 변수를 변경하는 방법은 무엇입니까?

또는 어쩌면 내가 redux에 불변의 개념을 오해 한 것일까 요? 위의 코드는 실제로 괜찮습니까?

Answer 1

Object#assign을 사용하여 필요한 변경 사항으로 새 개체를 만듭니다. Array#slice을 사용하면 원래 배열에서 변경되지 않은 항목을 가져오고 Array#concat을 사용하여 원본을 변경하는 대신 새 배열을 만들 수 있습니다. 당신은 코드 또는 브라우저 호환성이 문제가되지 않을 transpile 경우

var brand = [{id:1,name:'samsung',price:1000},{id:1,name:'lg',price:2000}]; 
 

 
var index = 0; // changed element index 
 

 
// creates a new object with the merge properties 
 
var item = Object.assign({}, brand[index], { price: 2000 }); 
 

 
// creates a new array by combining the elements before the changed item, with the changed item, and the elements after the it in the right order 
 
var changed = brand.slice(0, index) // the items before the changed item 
 
    .concat(
 
    item, // the changed item 
 
    brand.slice(index + 1) // the elements after the changed item 
 
); 
 

 
console.log(changed); 
 
console.log(brand); // brand haven't changed

, 당신은 array spread 및 object spread 구문을 사용할 수 있습니다 :이 좋은를

const brand = [{id:1,name:'samsung',price:1000},{id:1,name:'lg',price:2000}]; 
 

 
const index = 0; // changed element index 
 

 
const changed = [ 
 
    ...brand.slice(0, index), // the elements before the changed item 
 
    { ...brand[index], price: 2000 }, // the changed item 
 
    ...brand.slice(index + 1) // the items after the changed items 
 
]; 
 

 
console.log(changed); 
 
console.log(brand); // brand haven't changed

Answer 2

발견 우리가 어떻게 할 수 있는지 명확하게 설명하는 기사 객체와 배열을 불변으로 만듭니다. http://wecodetheweb.com/2016/02/12/immutable-javascript-using-es6-and-beyond/