JavaScript 变量：理解基元和引用类型

两种基本类型的数据存储在 JavaScript 中的变量中：基元 和 引用类型。了解这两种类型之间的区别对于内存管理以及调节数据的共享、存储和更改至关重要。本文深入探讨了它们之间的区别，提供了现实世界的示例，并研究了有效处理这两种类型的方法。

1.基元与引用类型

原语

最简单的数据类型称为基元。它们直接将不可更改的数据存储在变量中。 javascript 支持的基本类型如下：

• 字符串：“你好”
• 数量：42
• 布尔值：真或假
• 空
• 未定义
• 符号
• bigint

主要特征：

• 不可变：它们的值不能直接改变。
• 按值存储。

参考类型

另一方面，引用类型存储对象的内存位置。变量不是存储实际值，而是保存对内存地址的引用。示例包括：

立即学习“Java免费学习笔记（深入）”；

• 对象：{名称：’爱丽丝’}
• 数组：[1,2,3]
• 函数： function() { console.log(‘hello’); }
• 日期：新日期()

主要特征：

• 可变：它们的内容可以修改。
• 存储通过引用。

2.实际操作中的基元和引用类型

// primitive example let a = 10; let b = a; b = 20; console.log(a); // output: 10  // reference example let obj1 = { name: 'alice' }; let obj2 = obj1; obj2.name = 'bob'; console.log(obj1.name); // output: 'bob' 

说明：

• 原语：将 a 分配给 b 会创建该值的副本。更改 b 不会影响 a，因为它们是独立的。
• 引用类型：obj1和obj2都指向相同的内存位置。通过 obj2 更改内容也会更新 obj1。

3.可视化概念

• 基元：将每个变量想象成它自己的包含值的框。复制会创建一个具有独立值的新框。
• 引用类型：将变量视为指向共享容器的标签。引用同一容器的所有标签都会受到其内容更改的影响。

4.变异与赋值

理解变异和赋值之间的区别是使用引用类型时的关键。

突变：修改现有对象的内容。

let arr = [1, 2, 3]; let arr2 = arr; arr2.push(4); console.log(arr); // output: [1, 2, 3, 4] 

赋值：更改对新对象的引用。

let arr = [1, 2, 3]; let arr2 = arr; arr2 = [4, 5, 6]; console.log(arr); // output: [1, 2, 3] 

5.复制对象和数组

浅复制：

要创建对象或数组的单独副本，请使用扩展运算符 (…) 或 Object.assign()。

let original = { name: 'alice' }; let copy = { ...original }; copy.name = 'bob'; console.log(original.name); // output: 'alice' 

深复制：

对于嵌套对象，需要深拷贝。一种常见的方法是使用 json.parse(JSon.Stringify()).

let nested = { person: { name: 'alice' } }; let deepcopy = json.parse(json.stringify(nested)); deepcopy.person.name = 'bob'; console.log(nested.person.name); // output: 'alice' 

6.按值传递与按引用传递

原语（按值传递）：

将基元传递给函数时，会传递值的副本。

function modifyvalue(x) {   x = 20; } let num = 10; modifyvalue(num); console.log(num); // output: 10 

引用类型（通过引用传递）：

传递引用类型时，会传递对内存位置的引用。

function modifyobject(obj) {   obj.name = 'bob'; } let person = { name: 'alice' }; modifyobject(person); console.log(person.name); // output: 'bob' 

7.原始包装类型

即使原语是不可变的，javascript 也会暂时将它们包装在对象中以允许访问方法和属性。

let str = 'hello'; console.log(str.Length); // output: 5 

说明：

字符串原语“hello”临时包装在 string 对象中以访问 length 属性。包装在操作后被丢弃。

8.最佳实践

1. 使用 const 作为引用类型： 使用 const 声明对象和数组可以防止重新分配，但允许内容发生变化。

   const obj = { name: 'Alice' };    obj.name = 'Bob'; // Allowed    obj = { age: 25 }; // Error: Assignment to constant variable. 

1. 避免意外突变：
   如果您需要独立副本，请确保使用扩展运算符或深度复制技术创建一个副本。

2. 知道何时使用深层副本：
   对于浅层对象，扩展运算符就足够了，但嵌套结构需要深层复制以避免引用问题。

3. 利用不变性：
   使用 immutable.js 等库或采用函数式编程技术来最大限度地减少意外突变引起的错误。

9.常见陷阱

1. 混淆赋值与变异：
   请注意您是在修改对象还是重新分配引用。

2. 修改共享引用:
   如果程序的其他部分也使用共享对象，则对共享对象的更改可能会产生意想不到的后果。

3. 假设所有副本都是独立的：
   请记住，浅拷贝并不能防止嵌套结构发生变化。

结论

javascript 的核心思想之一是基元和引用类型之间的区别。它会影响您向函数发送数据、管理变量以及防止代码中出现意外副作用的方式。通过掌握这些想法并使用最佳实践，您可以构建更可靠和可维护的 javascript 代码。

关注我：github linkedin