JavaScript - 不变性

不变性是指不可改变的事物。在编程中，不变性是指一旦设置就无法更改的值。

大多数程序都需要生成、修改和删除数据。那么，为什么有人会想要处理不可变数据呢?

在本教程中，我们将通过 JavaScript 示例来探讨原始类型、数组和对象的不变性。

不变性的概念

不变性是一个简单但强大的概念。简单来说，不可修改的事物就是不可变的值。我们可能会遇到需要在代码中创建一个具有新属性或值的新对象，同时保留现有值的情况，尤其是在创建应用程序时。不变性的概念使我们能够在不更改原始值的情况下创建新对象。

JavaScript 有两种类型:原始类型和引用类型。原始类型包括数字、字符串、布尔值、null 和 undefined。引用类型包括对象、数组和函数。

两者的区别在于，原始类型是不可变的(不可更改)，而引用类型是可变的(可更改)。例如，字符串是不可变的:

let userAge = "22";
let userNewAge = userAge;
userAge = "24";

我们只是生成了两个变量，并将 userAge 传递给 userNewAge 变量。但是，当我们修改 userAge 的值时，您会发现两者保持不变。

console.log(userAge === userNewAge); // false

为什么要使用不可变性?

以下是一些在 JavaScript 中使用不可变性的原因 -

• 可预测性:当数据不变时，很容易理解软件的工作原理。

• 防止错误:不可变数据有助于防止可能导致程序错误的意外更改。

• 易于共享:由于不可变数据永远不会改变，因此最好将其分布在整个应用程序中。

不可变性示例

以下是一些展示 JavaScript 中不可变性的示例 -

示例 1

这是第一个使用字符串的示例，您可能知道 JavaScript 中的字符串是不可变的。当你更改一个字符串时，就会创建一个新的字符串。

// 在此处创建一个字符串
let greeting = "Hello, world!";

// 这不会改变原始字符串。
greeting[0] = "h";

console.log(greeting);

输出

在此示例中，我们尝试将问候语的首字母从"H"更改为"h"。但字符串无法通过这种方式编辑。原始字符串保持不变。

Hello, world!

示例 2

现在我们来讨论第二个示例，其中我们将使用数组。您可能知道数组是可变的，但我们可以使用 JavaScript 中的展开运算符来创建新数组，而不是更改现有数组。

// 创建一个数组
let numbers = [1, 2, 3];

// 创建一个包含额外数字的新数组。
let newNumbers = [...numbers, 4]; 

console.log(numbers); 
console.log(newNumbers); 

输出

在上面的例子中，我们从一个数字数组开始，而不是修改数组中的数字，而是创建了一个名为 newNumbers 的新数组并插入一个新数字。查看以下输出 -

[1, 2, 3]
[1, 2, 3, 4]

示例

对象也是可变的，但我们可以创建一个新对象，而不是修改现有对象。

let person = { name: "Amit", age: 25 };

// 创建一个更新年龄的新对象。
let updatedPerson = { ...person, age: 26 }; 

console.log(person); 
console.log(updatedPerson);

输出

这将生成以下结果 -

{ name: "Amit", age: 25 }
{ name: "Amit", age: 26 }

不变性的重要性

不变性对于我们日常代码如此重要的原因有很多。

• 一旦设置，不变值就无法更改。而是会创建一个新的值。因此，该值在整个代码中保持一致且可靠。因此，它使整个程序的状态管理更加容易。此外，不变性是像 Redux 这样的状态管理框架的核心原则。

• 当数据结构不会快速更改时，代码会变得更易于阅读，并且不易出错。这有助于故障排除和维护。

• 不变性可以减少副作用并提高代码的可预测性，这与函数式编程的理念相符。