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继承的实现代码
Aug 05 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
js弹出对话框方式小结
Nov 17 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
JS立即执行的匿名函数用法分析
Nov 04 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
删除无限级目录与文件代码共享
2006/07/12 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
vue实现分页组件
2020/06/16 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
python fabric实现远程操作和部署示例
2014/03/25 Python
centos系统升级python 2.7.3
2014/07/03 Python
Python常用的爬虫技巧总结
2016/03/28 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
校长寄语大全
2014/04/09 职场文书
药店促销活动策划方案
2014/08/24 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers