前端学习<四>JavaScript基础——05-变量的数据类型:基本数据类型和引用数据类型

数据分类

数据分为:静态数据、动态数据。

静态数据

静态数据是指一些永久性的数据。一般是以文件的形式存储在硬盘上,比如文档、照片、视频等文件。

电脑关闭后,静态数据仍然还在。只要不主动删掉数据或者硬盘没损坏,这些数据就一直都在。

动态数据

动态数据是在程序运行过程中,动态产生的临时数据,这些数据可能随时发生变化。一般存储在内存中。

电脑关闭后,这些数据会被清除。

为何不把应用程序的动态数据加载到硬盘中执行呢?这主要是因为,内存的访问速度比硬盘快无数倍。

变量的数据类型

为什么需要数据类型

在计算机中,不同的数据所需占用的存储空间不同,为了充分利用存储空间,于是定义了不同的数据类型。而且,不同的数据类型,寓意也不同。

我们都知道,无论这个变量是字符串类型,还是数字类型,我们都可以直接用 var 去定义它。比如:

复制代码
 var a = 'hello word';
 ​
 var b = 123;

为什么可以这样做呢?这是因为:JavaScript 是一种「弱类型语言」,或者说是一种「动态语言」,这意味着不需要提前声明变量的类型,在程序运行过程中,类型会自动被确定。

JS 的变量数据类型,是在程序运行的过程中,根据等号右边的值来确定的。而且,变量的数据类型是可以变化的。比如说:

复制代码
 var name = 'qianguyihao';
 ​
 name = 123; // 强制将变量 name 修改为 数字类型

JS 中一共有八种数据类型

  • 基本数据类型(值类型):String 字符串、Number 数值、BigInt 大型数值、Boolean 布尔值、Null 空值、Undefined 未定义、Symbol。

  • 引用数据类型(引用类型):Object 对象。

注意:内置对象 Function、Array、Date、RegExp、Error 等都是属于 Object 类型。也就是说,除了那七种基本数据类型之外,其他的,都称之为 Object 类型。

BigInt 和 Symbol 是ES6中新增的类型,我们留到以后再讲。

面试问:引用数据类型有几种?
面试答:只有一种,即 Object 类型。

数据类型之间最大的区别:

  • 基本数据类型:参数赋值的时候,传数值。

  • 引用数据类型:参数赋值的时候,传地址。

一个经典的例子

基本数据类型举例:

复制代码
 var a = 23;
 var b = a;
 ​
 a++;
 ​
 console.log(a); // 打印结果:24
 console.log(b); // 打印结果:23

上面的代码中:a 和 b 都是基本数据类型,让 b 等于 a,然后改变 a 的值之后,发现 b 的值并没有被改变。

但是在引用数据类型中,就不同了,我们来看一看。

引用数据类型举例:

复制代码
 var obj1 = new Object();
 obj1.name = 'smyh';
 ​
 // 让 obj2 等于 obj1
 var obj2 = obj1;
 ​
 // 修改 obj1 的 name 属性
 obj1.name = 'vae';
 ​
 console.log(obj1.name); // 打印结果:vae
 console.log(obj2.name); // 打印结果:vae

上面的代码中:obj1 和 obj2 都是引用数据类型,让 obj2 等于 obj1,然后修改 obj1.name 的值之后,发现 obj2.name 的值也发生了改变。

从上面的例子中,可以反映出,基本数据类型和引用数据类型是有区别的。

那到底有什么区别呢?我们进一步往下看。

栈内存和堆内存

我们首先记住一句话:JS 中,所有的变量 都是保存在栈内存中的。

然后来看看下面的区别。

基本数据类型:

基本数据类型的值,直接保存在栈内存中。值与值之间是独立存在,修改一个变量不会影响其他的变量。

引用数据类型:

对象是保存到堆内存 中的。每创建一个新的对象,就会在堆内存中开辟出一个新的空间;而变量保存了对象的内存地址(对象的引用),保存在栈内存当中。如果两个变量保存了同一个对象的引用,当一个通过一个变量修改属性时,另一个也会受到影响。

相关推荐
Amumu1213813 分钟前
NodeJs介绍
前端·node.js
小陈phd13 分钟前
深入理解agent学习笔记(五)——KV Cache友好的上下文设计
笔记·学习·spring
咧咧小侠15 分钟前
Windows Codex 连接 Chrome 失败:一次 nodeRepl.fetch 报错排查记录
前端·chrome
下辈子不要当码农15 分钟前
Linux驱动学习(1)
linux·运维·学习
Eider199817 分钟前
大模型输出格式幻觉解决思路
开发语言·前端·javascript
广州智造17 分钟前
Radioss时间步长(Time Step)
前端·设计·cad·建模·cae·radioss
余额瞒着我当琳26 分钟前
C++算法学习篇5--二分查找法
c++·学习·算法
志尊宝38 分钟前
Vue3 零基础每日笔记(085):项目上线前 Checklist——环境变量、报错监控、安全自查
前端·javascript·笔记·安全·信息可视化·echarts
朱涛的自习室1 小时前
我让 Gemini 4 当高管、DeepSeek 当员工,开了一家软件公司(Day 1)
android·前端·人工智能
志尊宝1 小时前
Vue3 零基础每日笔记(088·完结):从零到一——一个完整 Vue3 项目的成长复盘
前端·javascript·vue.js·笔记·ecmascript·#vue.js