JavaScript 值类型和引用类型的初次研究(推荐)


Posted in Javascript onJuly 19, 2017

值类型:也称为原始数据或原始值(primitive value)。

这类值存储在栈(stack)中,栈是内存中一种特殊的数据结构,也称为线性表,栈按照后进先出的原则存储数据,先进入的数据被压入栈底,最后插入(push)的数据放在栈顶,需要读取数据时从栈顶开始弹出(pop)数据,即最后一个数据被第一个读出来。因此说,值类型都是简单的数据段。变量的位置和变量值的位置是重叠的,也就是说值类型的数据被存储在变量被访问的位置。

引用类型:这类值存储在堆(heap)中,堆是内存中的动态区域,相当于自留空间,在程序运行期间会动态分配给代码和堆栈。

堆中存储的一般都是对象,然后通过一个编号传递给栈内变量,这个编号就是所谓的引用指针(point),这样变量和变量值之间是分离的,它们通过指针相联系。当读写数据时,计算机通过变量的指针找到堆中的数据块,并进行操作。

今天遇到一个坑,具体的不多说,直接上代码

var a = [ [],[],[1,2,3] ]
var b = ['颜色','大小','尺寸']
var arr = []
for(let i = 0; i < a.length; i ++){
  let obj = {}
  for(let j = 0; j < a[i].length; j ++){
    obj[b[i]] = a[i][j]
    arr.push(obj)
    console.log(arr)
    console.log(obj)
  }

}
console.log(arr)

我预期的 arr 的结果应该是

[ { '尺寸': 1 }, { '尺寸': 2 }, { '尺寸': 3 } ]

最后arr的结果居然是这样的

[ { '尺寸': 3 }, { '尺寸': 3 }, { '尺寸': 3 } ]

在一个基友群里问,最后终于自己得出结论了——这是因为值类型和引用类型不同的原因。

在JavaScript里的值大概分为两种,一种是值类型,一种是引用类型。

值类型:数值、布尔值、null、undefined

引用类型:对象、数组、函数

我们例子中的obj虽然每次打印出来都是不同的,但是因为是引用类型,arr也是引用类型,即使obj  push到arr里面了,也只是push进去了一个内存地址而已,所以最后obj变成3了,arr里面引用的obj也会全部变成3。很神奇吧,最后解决的办法也很简单

var a = [ [],[],[1,2,3] ]
var b = ['颜色','大小','尺寸']
var arr = []
for(let i = 0; i < a.length; i ++){
  for(let j = 0; j < a[i].length; j ++){
  let obj = {}
    obj[b[i]] = a[i][j]
    arr.push(obj)
  }
}
console.log(arr)

只要把obj的声明放在最内层的循环里面,每次循环都会是单独的一个内存地址,这样最后的obj即使变成了3,前面的obj也不会被影响到,因为他们的内存地址根部不同。

以上所述是小编给大家介绍的JavaScript 值类型和引用类型的初次研究(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 #Javascript
深入理解vue2.0路由如何配置问题
Jul 18 #Javascript
JavaScript实现二维坐标点排序效果
Jul 18 #Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 #Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 #jQuery
jquery版轮播图效果和extend扩展
Jul 18 #jQuery
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 #Javascript
You might like
用PHP动态创建Flash动画
2006/10/09 PHP
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
如何打开php的gd2库
2017/02/09 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
python3.0 字典key排序
2008/12/24 Python
python比较两个列表大小的方法
2015/07/11 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
nohup的用法
2012/11/26 面试题
小学生美德少年事迹
2014/02/02 职场文书
团购业务员岗位职责
2014/03/15 职场文书
揭牌仪式主持词
2014/03/19 职场文书
教师考核评语大全
2014/12/31 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
2015年中秋节主持词
2015/07/30 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
Python基础之元编程知识总结
2021/05/23 Python
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技