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

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

---

1.基元与引用类型

原语

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

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

主要特征：

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

参考类型

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

• 对象：{名称：'爱丽丝'}
• 数组：[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.变异与赋值

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

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

// 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'

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

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

---

5.复制对象和数组

浅复制：

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

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

深复制：

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

let original = { name: 'Alice' };
let copy = { ...original };
copy.name = 'Bob';
console.log(original.name); // Output: 'Alice'

---

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

原语（按值传递）：

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

let nested = { person: { name: 'Alice' } };
let deepCopy = JSON.parse(JSON.stringify(nested));
deepCopy.person.name = 'Bob';
console.log(nested.person.name); // Output: 'Alice'

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

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

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

---

7.原始包装类型

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

function modifyObject(obj) {
  obj.name = 'Bob';
}
let person = { name: 'Alice' };
modifyObject(person);
console.log(person.name); // Output: 'Bob'

说明：

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

---

8.最佳实践

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

let str = 'hello';
console.log(str.length); // Output: 5

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

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

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

---

9.常见陷阱

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

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

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

---

结论

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

关注我：Github Linkedin

以上是JavaScript 变量：理解基元和引用类型的详细内容。更多信息请关注PHP中文网其他相关文章！