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 相关文章推荐
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
详解javascript函数写法大全
Mar 25 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
vue 图片裁剪上传组件的实现
Nov 12 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php 发送带附件邮件示例
2014/01/23 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
对联广告js flash激活
2006/10/19 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
JS画线(实例代码)
2013/11/20 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
python实现多进程代码示例
2018/10/31 Python
django2.0扩展用户字段示例
2019/02/13 Python
python 列表推导式使用详解
2019/08/29 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
keras之权重初始化方式
2020/05/21 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
门卫岗位职责
2013/11/15 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle