JavaScript 中的可变性与不变性——用代码示例进行解释

淡淡的烟草味﹌ 2024-03-22 19:10 25阅读 0赞

在 JavaScript 中，不同的数据类型在内存中有不同的行为和位置。因此，为了减少代码中出现错误的可能性，您需要了解 JavaScript 中可变性和不变性的概念。

可变性是指在创建并存储在内存中后可以访问和更改的数据类型。另一方面，不变性指的是在创建后无法更改的数据类型——但您仍然可以在内存中访问它们。

本文将帮助您全面掌握 JavaScript 中数据可变性和不可变性的概念。我们将从了解不同的数据类型开始，然后从那里开始。

先决条件  
了解变量如何在 JavaScript 中工作  
了解对象如何在 JavaScript 中工作  
目录  
JavaScript 中的原始数据类型是什么？  
JavaScript 中的引用数据类型是什么？  
如何克隆对象属性  
JavaScript 中的不可变性是什么？  
如何防止对象可变性  
const != 不变性  
最后的想法  
JavaScript 中的数据类型  
数据类型在 JavaScript 中分为Primitive和Reference类型。在解释这些类别之前，让我们先看一下您需要知道的关于内存的两个重要术语：Stack和Heap。

什么是堆栈？  
Stack是一种遵循Last In First Out（LIFO）原则的数据结构。这意味着最后进入的项目stack先出去。

想象一下，一堆书堆放在架子上。最后一本书最终成为第一个被删除的书。存储在堆栈中的数据仍然可以轻松访问。

什么是堆？  
参考数据存储在heap. 创建引用数据时，数据的变量放在 上，stack但实际值放在 上heap。

JavaScript 中的原始数据类型是什么？  
原始数据类型是不可变的并且不是对象，因为它们缺少属性和方法。  
要确定您正在使用的数据类型，请使用typeof运算符。该typeof运算符可与除 . 之外的所有原始数据类型完美配合null。

原始数据类型示例  
现在让我们看一些原始数据类型的例子，以便更好地理解它们是什么以及它们是如何工作的

这是一个数字的例子：

let num = 23;
    
    console.log(typeof num)

下面是一个字符串示例：

let str = "Table"

这是未定义变量的示例。如果没有附加任何值，则称变量是未定义的。

let figure;
    
     `null`
     
       let fig = null
    
       console.log(fig)
    
       console.log(fig === null)

请记住，这与ornull不同。NullNULL

这是一个布尔值的例子。此原始数据类型是true或false。

let student = true;
    
       let married = false;

布尔值不是字符串——请注意trueorfalse不在引号中。

这是一个符号的例子。作为原始数据类型，符号是唯一的。返回的值也保证是唯一的。

const mySymbol = Symbol();
       
       console.log(typeof mySymbol) //Symbol

这是 BigInit 的示例。BigInt当您处理的值对于数字数据类型来说太大时使用。

const myBigInt = 12n;
    
       console.log(typeof myBigInt) //BigInt
    
       const check = BigInt(414242532)
    
       console.log(typeof check)

JavaScript 中的引用数据类型是什么？  
默认情况下，引用数据类型是可变的。引用数据类型包括Functions、Arrays和Objects。

让我们看一些参考数据类型的示例，以帮助您更好地理解：

下面是一个函数示例：

function favorite(question) {
       
        
          console.log(`Hi dear, do you like ${
       
        question} programming language?`)
       }
    
       favorite('JavaScript')

下面是一个数组的例子：

const countriesVisited = ['Nigeria', 'Japan', 'Australia']
    
       console.log(countriesVisited)

这是一个对象的示例：

const touristData = {
       
        
          firstname: 'Camila',
          lastname: 'Pedro',
          Nationality: 'Spanish'
       }
       console.log(touristData)

为清楚起见，名字称为 thekey而 Camila 是value.

引用数据类型将变量放在stack. 该变量用作指向object位于heap.

这些类别之间的主要区别在于 Primitives 是immutable而 References 是mutable. 现在，让我们进入正题。

JavaScript 中的可变性是什么？  
如果数据类型是可变的，则意味着您可以更改它。可变性允许您修改现有值而无需创建新值。

对于每一个object，一个指针被添加到stack，这个指针指向 上object的heap。

举个例子，下面的代码：

const staff = {
       
        
             name: "Strengthened",
             age: 43,
             Hobbies: ["reading", "Swimming"]
       }

在堆栈上你会发现staffwhich 是一个指向实际对象的指针heap。

const staff2 = staff;
    
       console.log(staff);
       
       console.log(staff2);

另一个指针放在 when stackwhen when staffwas assigned to staff2。现在，这些指针指向heap.

引用数据不复制值，而是指针。

staff2.age = 53;
    
       console.log(staff)
    
       console.log(staff2)

更改对象的更新age对象。现在你知道这是因为两者都指向同一个对象。staff2agestaff  
如何克隆对象属性  
Object. assign()您可以使用方法和运算符克隆对象的属性spread。使用这些，您可以更改克隆对象的属性，而无需更改克隆对象的属性。

Object.assign()该方法的工作原理  
该object.assign方法将一个对象（源）的属性复制到另一个对象（目标）并返回修改后的目标对象。

语法如下：

Object.assign(target, source)

该方法有两个参数，targetThesource.是target接收新属性的对象，而 thesource是属性的来源。可以target是空对象\{\}.

source在和target共享相同 的情况下key，对象会覆盖目标上source的 值。key

const staff = {
       
        
          name: "Strengthened",
          age: 43,
          Hobbies: ["reading", "Swimming"]
       }
    
       const staff2 = Object.assign({
       
        }