本文涉及到对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 ]