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 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
详解js类型判断
May 22 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 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与XML联手进行网站编程代码实例
2008/07/10 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
JS简单计算器实例
2015/01/20 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
python程序变成软件的实操方法
2019/06/24 Python
django Admin文档生成器使用详解
2019/07/22 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
颁奖典礼主持词
2014/03/25 职场文书
租房协议书
2014/04/10 职场文书
迎七一演讲稿
2014/09/12 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
MyBatis 动态SQL全面详解
2021/10/05 MySQL