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模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
微信小程序工具函数封装
Oct 28 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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
JavaScript 异步调用
2017/10/25 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
使用webpack构建应用的方法步骤
2019/03/04 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python决策树之C4.5算法详解
2017/12/20 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python实现批量命名照片
2020/06/18 Python
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
AJax面试题
2014/11/25 面试题
个人对照检查材料
2014/02/12 职场文书
金融事务专业求职信
2014/04/25 职场文书
食品安全演讲稿
2014/09/01 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS