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回调(callback)函数概念自我理解及示例
Jul 04 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 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下Memcached入门实例解析
2015/01/05 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
jQuery操作cookie
2016/08/08 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python自动化之Ansible的安装教程
2019/06/13 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
药剂专业学生求职信范文
2013/12/28 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
签订劳动合同通知书
2015/04/16 职场文书
转变工作作风心得体会
2016/01/23 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
mysql主从复制的实现步骤
2021/10/24 MySQL
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle