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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
基于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延迟静态绑定示例分享
2014/06/22 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
办公室经理岗位职责
2014/01/01 职场文书
房产买卖委托公证书
2014/04/04 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
学期个人自我总结
2015/02/13 职场文书
文化大革命观后感
2015/06/17 职场文书
cf战队宣传语
2015/07/13 职场文书
golang中的空接口使用详解
2021/03/30 Python
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP