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 void(0)的妙用
Oct 21 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
vue语法之拼接字符串的示例代码
Oct 25 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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 读取和修改大文件的某行内容的代码
2009/10/30 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
php之readdir函数用法实例
2014/11/13 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
通过shell+python实现企业微信预警
2019/03/07 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Django实现分页显示效果
2019/10/31 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
详解python的super()的作用和原理
2020/10/29 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
小学教师自我鉴定
2013/11/07 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
实习工作表现评语
2014/12/31 职场文书
小英雄雨来观后感
2015/06/09 职场文书
网吧管理制度范本
2015/08/05 职场文书
大学校园招聘会感想
2015/08/10 职场文书
寒假致家长的一封信
2015/10/10 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL