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 浮动层菜单收藏
Jan 16 Javascript
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
浅谈vant组件Picker 选择器选单选问题
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
php上传文件常见问题总结
2015/02/03 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
关于JS中的闭包浅谈
2013/08/23 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
Linux 修改Python命令的方法示例
2018/12/03 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
详解Python中第三方库Faker
2020/09/25 Python
python压包的概念及实例详解
2021/02/17 Python
python实现发送邮件
2021/03/02 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
建材投资建议书
2014/05/16 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2014年技术部工作总结
2014/12/12 职场文书
毕业实习证明范本
2015/06/16 职场文书
思品教学工作总结
2015/08/10 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers