JS的数据类型使用详解

php中世界最好的语言

发布时间：2018-03-28 13:31:15

1495人浏览过

来源于php中文网

原创

这次给大家带来JS的数据类型使用详解，使用JS的数据类型的注意事项有哪些，下面就是实战案例，一起来看一下。

由于自己是野生程序员，在刚开始学习程序设计的时候没有在意内存这些基础知识，导致后来在提到“什么什么是存在栈中的，栈中只是存了一个引用”这样的话时总是一脸懵逼。。

后来渐渐的了解了一些内存的知识，这部分还是非常有必要了解的。

基本数据结构

栈

栈，只允许在一段进行插入或者删除操作的线性表，是一种先进后出的数据结构。

堆

堆是基于散列算法的数据结构。

队列

队列是一种先进先出（FIFO）的数据结构。

JavaScript中数据类型的存储

JavaScript中将数据类型分为基本数据类型和引用数据类型，它们其中有一个区别就是存储的位置不同。

基本数据类型

我们都知道JavaScript中的基本数据类型有：

String
Number
Boolean
Undefined
Null
Symbol（暂时不管）

基本数据类型都是一些简单的数据段，它们是存储在栈内存中。

引用数据类型

JavaScript中的引用数据类型有：

Array
Object

引用数据类型是保存在堆内存中的，然后再栈内存中保存一个对堆内存中实际对象的引用。所以，JavaScript中对引用数据类型的操作都是操作对象的引用而不是实际的对象。

可以理解为，栈内存中保存了一个地址，这个地址和堆内存中的实际值是相关的。

图解

现在，我们声明几个变量试试：

var name="axuebin";
var age=25;
var job;
var arr=[1,2,3];
var obj={age:25};

可以通过下图来表示数据类型在内存中的存储情况：

此时name,age,job三种基本数据类型是直接存在栈内存中的，而arr,obj在栈内存中只是存了一个地址来表示对堆内存中的引用。

复制

基本数据类型

对于基本数据类型，如果进行复制，系统会自动为新的变量在栈内存中分配一个新值，很容易理解。

引用数据类型

如果对于数组、对象这样的引用数据类型而言，复制的时候就会有所区别了：

系统也会自动为新的变量在栈内存中分配一个值，但这个值仅仅是一个地址。也就是说，复制出来的变量和原有的变量具有相同的地址值，指向堆内存中的同一个对象。

如果所示，执行了var objCopy=obj之后，obj和objCopy具有相同的地址值，执行堆内存中的同一个实际对象。

这有什么不同呢？

当我修改obj或objCopy时，都会引起另一个变量的改变。

为什么？

为什么基础数据类型存在栈中，而引用数据类型存在堆中呢？

堆比栈大，栈比对速度快。
基础数据类型比较稳定，而且相对来说占用的内存小。
引用数据类型大小是动态的，而且是无限的。
堆内存是无序存储，可以根据引用直接获取。

参考文章

理解js内存分配

原始值和引用值

在ECMAScript中，变量可以存放两种类型的值，即原始值和引用值。
原始值指的就是代表原始数据类型（基本数据类型）的值，即Undefined,Null,Number,String,Boolean类型所表示的值。
引用值指的就是复合数据类型的值，即Object,Function,Array,以及自定义对象,等等

栈和堆

与原始值与引用值对应存在两种结构的内存即栈和堆
栈是一种后进先出的数据结构，在javascript中可以通过Array来模拟栈的行为

原始值是存储在栈中的简单数据，也就是说，他们的值直接存储在变量访问的位置。
堆是基于散列算法的数据结构，在javascript中，引用值是存放在堆中的。
引用值是存储在堆中的对象，也就是说，存储在变量处的值(即指向对象的变量，存储在栈中）是一个指针，指向存储在堆中的实际对象.

例：var obj = new Object(); obj存储在栈中它指向于new Object()这个对象，而new Object()是存放在堆中的。
那为什么引用值要放在堆中，而原始值要放在栈中，不都是在内存中吗，为什么不放在一起呢?那接下来，让我们来探索问题的答案！
首先，我们来看一下代码：

function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
}
var num = 10;
var bol = true;
var str = "abc";
var obj = new Object();
var arr = ['a','b','c'];
var person = new Person(100,"笨蛋的座右铭",25);

然后我们来看一下内存分析图：

变量num,bol,str为基本数据类型，它们的值，直接存放在栈中，obj,person,arr为复合数据类型，他们的引用变量存储在栈中，指向于存储在堆中的实际对象。

由上图可知，我们无法直接操纵堆中的数据，也就是说我们无法直接操纵对象，但我们可以通过栈中对对象的引用来操作对象，就像我们通过遥控机操作电视机一样，区别在于这个电视机本身并没有控制按钮。

现在让我们来回答为什么引用值要放在堆中，而原始值要放在栈中的问题：

记住一句话：能量是守衡的，无非是时间换空间，空间换时间的问题

堆比栈大，栈比堆的运算速度快,对象是一个复杂的结构，并且可以自由扩展，如：数组可以无限扩充，对象可以自由添加属性。将他们放在堆中是为了不影响栈的效率。而是通过引用的方式查找到堆中的实际对象再进行操作。相对于简单数据类型而言，简单数据类型就比较稳定，并且它只占据很小的内存。不将简单数据类型放在堆是因为通过引用到堆中查找实际对象是要花费时间的，而这个综合成本远大于直接从栈中取得实际值的成本。所以简单数据类型的值直接存放在栈中。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关专题

java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容，阅读专题下面的文章了解更多详细学习方法。

2026.01.29

java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容，阅读专题下面的文章了解更多详细操作。

2026.01.29

java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容，阅读专题下面的文章了解更多详细推荐内容。

2026.01.29

Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容，阅读专题下面的文章了解详细操作教程。

2026.01.29

Java空对象相关教程合集

本专题整合了Java空对象相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.29

clawdbot ai使用教程保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用，包括对称加密与非对称加密（AES、RSA）、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范（如SQL注入、XSS、CSRF）及其防护措施。通过实战案例，帮助学习者掌握如何使用 Go 语言保障网络通信的安全性，保护用户数据与隐私。

2026.01.29