改变对象值的不可变函数

Question

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

现在 samsung 的价格等于 2000 并且它被分配给改变了，但是如何在不改变品牌变量的情况下做到这一点？

或者我误解了 redux 中的不可变概念？上面的代码其实没问题？

Answer 1

使用Object#assign创建一个包含您需要的更改的新对象。使用 Array#slice to get the items that haven't changed from the original array, and Array#concat 创建一个新数组而不是更改原始数组。

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 and 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/

改变对象值的不可变函数

immutable function that alter object value

javascript

immutability

reactjs

redux