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 相关文章推荐
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 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中foreach循环中使用引用要注意的地方
2011/01/02 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php实现复制移动文件的方法
2015/07/29 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
python数字图像处理之高级滤波代码详解
2017/11/23 Python
pandas中的series数据类型详解
2019/07/06 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
争论的故事教学反思
2014/02/06 职场文书
初中家长寄语
2014/04/02 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL