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变量以及其作用域详解
Jul 18 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
angular分页指令操作
Jan 09 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 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 一个页面执行时间类代码
2010/03/05 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
php命令行写shell实例详解
2018/07/19 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
js对象基础实例分析
2015/01/13 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
python简单实现计算过期时间的方法
2015/06/09 Python
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
Python简单实现enum功能的方法
2016/04/25 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Tesserocr库的正确安装方式
2018/10/19 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
艺术应用与设计个人的自我评价
2013/11/23 职场文书
个人求职信范文分享
2014/01/31 职场文书
暑假家长评语大全
2014/04/17 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
会计专业自荐信范文
2015/03/05 职场文书
胡桃夹子观后感
2015/06/11 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python