为什么不变性在JavaScript中如此重要？
可变性或代码中的对象突变怎么了？
它不是使事情变得简单吗？
在深入了解不变性的重要性之前，我们应该首先了解软件开发中的可变性和不变性的概念。
公主亲吻青蛙，希望它会变成一个英俊的王子。不变性的概念说青蛙永远是青蛙。不变性概念主要源于功能和面向对象的编程。每当我们想对某些数据（例如，对像或数组）进行更改时，我们都应使用更新后的数据返回一个新对象，而不是直接修改原始数据。
可以将不变性视为“另存为”，因为您知道它会返回一个新更改的对象，而传统的就地突变就像“保存”就意味着更新原始状态并释放一个较早的状态。不变数据的结构无法更改。
数据将是原始数据，一旦创建了对象，我们就无法在不可变对像中修改其状态。将不变性概念视为不受外界影响的人体。一种安心的状态。
反之亦然。可变性描述对象的状态在声明后是否可以修改。将其视为亲吻青蛙会导致王子的转变。举一个例子，我们有一个变量，并给它赋了一个值。稍后，如果我们需要修改此变量的值，然后先更改它，然后更改其状态，则该对像被认为是可变的。
从未使用不变性概念的开发人员可能会对将变量分配给新值或重新分配感到困惑。在JavaScript中，字符串和数字是不可变的数据类型。
JavaScript并不是一种以不变的方式处理数据的好语言。在JavaScript中，数组和对像不是不可变的。它们的值可以随时间改变。两者都始终作为参考传递，并且绝大多数可用方法都会对数据进行适当的突变。您可以考虑以下示例...
const a = [2, 1, 4, 3];
console.log(a);
// output: [2, 1, 4, 3]
const b= a.sort();
console.log(b);
// output: [1, 2, 3, 4]
console.log(a)
// output: [1, 2, 3, 4]我们已经为变量“ a”分配了一个数组，并且正在对其执行排序操作。将排序后的数组分配给变量“ b”，您可以看到在执行排序操作后，我们得到了两个变量的排序后的数组。在这里，对象和数组作为参考传递，而不是复制变量“ a”和“ b”指向内存中的同一数组，并且该数组直接由方法sort进行了更改。
许多数组方法是Mutator方法。copyWithin，fill，pop，push，reverse，shift，sort，splice，unshift这些方法都允许可变性。映射和过滤器是不可变的，因为它创建了一个新的数组而不改变原始数组。要使对象和数组不可变，可以使用JavaScript中的某些技术并创建新值，而无需修改原始内容。不要直接更改对象的原始值。将此对象视为不可变对象，并返回具有更新值的全新对象。
让我们再举一个例子来理解这个概念。我们有一系列数据，其中包含一名员工在某个项目中工作的天数。
var daysWorked = [7, 7, 5, 9, 8, 6, 6, 7, 9, 5];
console.log(daysWorked);
// op: [7, 7, 5, 9, 8, 6, 6, 7, 9, 5];
//让我们检查一下最近6个月的工作
var lastSixMonths = daysWorked.slice(0,6);
console.log(lastSixMonths);
// op: [7, 7, 5, 9, 8, 6]
// 让我们整理一下工作日
var sortedDaysWorked = daysWorked.sort();
console.log(sortedDaysWorked);
// op: [5, 5, 6, 6, 7, 7, 7, 8, 9, 9]
var lastSevenMonths = hoursWorked.slice(0,7);
console.log(lastSevenMonths);
// op: [5, 5, 6, 6, 7, 7] ，但预期输出为 [7, 7, 5, 9, 8, 6] expected.在上面的方法中，我们在可变的dayWorked上使用了两种方法。
- 切片：在以上示例中，我们使用切片方法实现了不变性。此方法将原始对象切成薄片，而不是修改原始数据集，而是获取对象lastSixMonths的新副本。
- 排序：此方法是一种可变方法，它正在对原始数据集进行排序。这种方法使我们无法对数据集进行进一步的计算。
JavaScript中不变性的重要性
不变性的优点是什么？为什么我们首先需要关心不变性？为什么还要打扰？
不变性可立即对您的数据进行更严格的控制，从而使您的代码更安全，更可预测。换句话说，不可变的对象使您能够以可预测的方式控制界面和数据流，从而有效地发现更改。它还使实现诸如撤消/重做，时间旅行调试，乐观更新和回滚等复杂功能变得更加容易。
如果我们谈论前端库React，Vue os状态管理库Redux，那么不变性还可以通过在更改前后的状态版本之间进行快速廉价的比较来帮助获得更好的性能。组件可以利用此优势，并仅在需要时智能地重新渲染自身。这可以大大提高性能。
不变性的主要好处是可预测性，性能和更好的突变跟踪。
1.可预测性
在任何应用程序中，当我们使用某些前端库时，都会在其中声明很多状态。我们执行异步操作，并更新原始状态（变异）。一旦最终用户开始使用它，更新后的状态将与初始状态大不相同。改变状态会隐藏更改，并且会产生副作用，从而导致多个错误。在这种情况下，调试变得很困难。
当您保持应用程序架构的不变性和思维模型简单时，在任何给定时间预测状态下的数据变得更加容易，然后您可以放心，它不会造成任何令人讨厌的副作用。
2.表现
创建一个不变的对象会消耗内存。怎么样？当您向不可变对象添加值时，您需要创建一个新对象，并在此新对像中，将现有值与需要额外内存的新值一起复制。为了减少内存消耗，我们使用结构共享。
无论我们执行什么更新，都将返回新值，但是我们在内部共享结构以减少内存消耗。例如，如果将一个矢量附加到包含100个元素的矢量中，则它不会创建一个新的101个元素长的矢量。内部仅分配了一些小对象。
3.变异追踪
不变性的优点之一是，您可以通过使用引用和值相等来优化应用程序。这样可以很容易地确定是否有任何更改。您可以考虑React组件中状态更改的示例。shouldComponentUpdate可用于检查状态是否相同，比较状态对象并防止不必要的呈现。
不变性使您可以跟踪这些对象发生的更改，例如一系列事件。与现有变量相比，变量具有易于跟踪的新引用。这有助于调试代码和构建并发应用程序。此外，事件调试器还可以帮助您通过跟踪突变的视频回放来回放DOM事件。
不变性的概念第一次让您感到困惑。如果您了解不变性的需求和好处，则可以做得更好。当状态发生变化时，您会遇到许多错误，并且处理它会使您更好地理解不变性的概念。
0 评论