JavaScript 如何保持对象的不可变性

不可变性 是在涉及私有或受限制对象时的一个问题。有时我们需要创建新的对象，而不是无意中进行修改或更改，以保持数据的完整性。因此，我们需要找到一种方法来保留对象的状态。在本文中，我们将了解对象不可变性的概念，以及保持对象不可变性的不同方法，并借助示例来了解它们的基本实现。

对象的不可变性

不可变性是指确保对象状态的完整性。不可变对象不能被修改、添加新的属性或删除现有属性。在本文中，我们将看到如何在JavaScript中保持对象的不可变性。

保持对象不可变性的不同技术

在JavaScript中，我们可以使用以下方法来保持对象的不可变性：

使用JavaScript的Object.freeze()方法
使用JavaScript的扩展运算符
使用JavaScript的object.assign()方法

方法1：使用JavaScript的Object.freeze()方法

JavaScript的Object.freeze() 方法用于冻结一个对象。冻结对象不允许向对象添加新属性，并防止删除或修改现有属性。

语法：

Object.freeze( obj );

例子： 在这个例子中，我们将使用Object.freeze()方法使对象不可变。

JavaScript

// Creating an object constructor and assigning  
// values to it 
const obj = { name: 'JavaScript' }; 
  
// Creating immutable object using freeze method 
Object.freeze(obj); 
  
// Updating the properties of the frozen object 
obj.name = 'HTML'
  
// Displaying the properties of the frozen object 
console.log(obj.name);

输出

JavaScript

输出清楚地显示，当对象传递给object.freeze()方法时，它变成不可变的，无法修改。

方法2：使用JavaScript扩展运算符

扩展运算符允许可迭代的内容在需要0个或多个参数的位置展开。它主要用于可变数组，需要超过1个值的情况。

语法：

let variablename1 = [ ...value ];

示例： 在这个示例中，我们将使用 展开运算符 创建一个新对象，保留旧对象的状态。

JavaScript

// Creating an object 
const oldObject = { name: 'John', age: 30 }; 
  
// Creating new object from old one 
const newObject = { ...oldObject, age: 31 }; 
  
// Display properties of both objects 
console.log(oldObject); 
console.log(newObject);

输出

{ name: 'John', age: 30 }
{ name: 'John', age: 31 }

方法3：使用JavaScript Object assign()方法

Object.assign()方法被用于将一个或多个源对象的值和属性复制到目标对象。

语法：

Object.assign( target, ...sources );

示例： 在这个示例中，我们将使用object.assign()创建一个新的对象，并保留现有对象的属性。

Javascript

// Creating an object constructor and assigning 
// values to it 
const obj1 = { name: 'JavaScript' }; 
  
// Creating a second object using  
// Object.assing() method 
const obj2 = Object.assign({},obj1) 
  
// Updating the properties of new object 
obj2.name = 'HTML'; 
  
// Displaying the properties  
console.log(obj1.name) 
console.log(obj2.name);

输出