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离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
JavaScript模块详解
Dec 18 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
JS + HTML 罗盘式时钟的实现
May 21 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/08/08 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
PHP查询快递信息的方法
2015/03/07 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
python正则表达式re模块详解
2014/06/25 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python字典DICT类型合并详解
2017/08/17 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
退伍老兵事迹材料
2014/01/31 职场文书
重阳节登山活动方案
2014/02/03 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
活动总结怎么写啊
2014/05/07 职场文书
商业街策划方案
2014/05/31 职场文书
电气自动化求职信
2014/06/24 职场文书
应聘教师求职信
2014/07/19 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android