JavaScript数据类型的存储方法详解


Posted in Javascript onAugust 25, 2017

一个很基础的知识点,JavaScript中基本数据类型和引用数据类型是如何存储的。

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

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

基本数据结构

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

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

队列

队列是一种先进先出(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};

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

JavaScript数据类型的存储方法详解

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

复制

基本数据类型

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

引用数据类型

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

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

JavaScript数据类型的存储方法详解

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

这有什么不同呢?

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

为什么?

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

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

总结

以上所述是小编给大家介绍的JavaScript数据类型的存储方法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 覆盖和重载 函数
Sep 25 Javascript
Javascript Object.extend
May 18 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
vue获取form表单的值示例
Oct 29 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 #Javascript
Vue.js实现网格列表布局转换方法
Aug 25 #Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 #Javascript
Angular2 组件交互实例详解
Aug 24 #Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
探究react-native 源码的图片缓存问题
Aug 24 #Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 #Javascript
You might like
php中常用字符串处理代码片段整理
2011/11/07 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php函数与传递参数实例分析
2014/11/15 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
教师自我评价范例
2013/09/24 职场文书
幼儿如何来做好自我评价
2013/11/05 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
护士自我鉴定总结
2014/03/24 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
限期整改通知书
2015/04/22 职场文书
军事理论课感想
2015/08/11 职场文书
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript