JavaScript中的不变性意味着什么？有什么解决办法？

本文涉及到对assign与扩展运算操作符（...）的使用

在编码中，我们编写的代码一直在改变变量的值。这是

可变性

。但是

可变性

常常会导致意外的错误。如果代码只处理原始数据类型（numbers, strings, booleans），那么你不用担心。但是，如果在处理Arrays和Objects时，则需要小心执行可变操作。

接下来演示

不变性

：

• 创建一个数组，并将其赋值给另一个变量。

let a = [1, 2, 3]
let b = a
b.push(8)
consol.elog(b)
[1, 2, 3, 8]
consol.elog(a)
[1, 2, 3, 8]
           

可以看到，更新数组b也会同时改变数组a。这是因为对象和数组是引用数据类型 → 这意味着这样的数据类型实际上并不保存值，而是存储指向存储单元的指针。

将a赋值给b，其实我们只是创建了第二个指向同一存储单元的指针。要解决这个问题，我们需要将引用的值复制到一个新的存储单元。本文将使用ES6方法。

a = [1,2,3];
b = Object.assign([],a)
console.log(b)
[ 1, 2, 3 ]
b.push(8)
console.log(b)
[ 1, 2, 3, 8 ] // b output
console.log(a)
[ 1, 2, 3 ] // a output
           

在上面的代码中，修改数组b将不会影响数组a。我们使用

Object.assign()

创建了一个新的副本，由数组b指向。我们也可以使用

操作符(...)

执行不可变操作：

a = [1,2,3]
console.log(a)
[ 1, 2, 3 ]
b = [...a, 4, 5, 6]
console.log(b)
[ 1, 2, 3, 4, 5, 6 ]
console.log(a)
[ 1, 2, 3 ]