当前位置:首页 » 《我的小黑屋》 » 正文

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

26 人参与  2024年11月19日 09:21  分类 : 《我的小黑屋》  评论

点击全文阅读


 

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


1.基元与引用类型

原语

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

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

主要特征:

不可变:它们的值不能直接改变。按值存储。
参考类型

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

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

主要特征:

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

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

// primitive examplelet a = 10;let b = a;b = 20;console.log(a); // output: 10// reference examplelet 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.最佳实践

使用 const 作为引用类型: 使用 const 声明对象和数组可以防止重新分配,但允许内容发生变化。
const obj = { name: 'Alice' };   obj.name = 'Bob'; // Allowed   obj = { age: 25 }; // Error: Assignment to constant variable.

 

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

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

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


9.常见陷阱

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

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

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


结论

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


点击全文阅读


本文链接:http://zhangshiyu.com/post/188570.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1