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学习笔记7 原型链的原理
Jan 11 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 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程序中的常见漏洞进行攻击
2006/10/09 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
javascript中 try catch用法
2015/08/16 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
Python日期操作学习笔记
2008/10/07 Python
easy_install python包安装管理工具介绍
2013/02/10 Python
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python实现探测socket和web服务示例
2014/03/28 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
python生成n个元素的全组合方法
2018/11/13 Python
PyTorch预训练的实现
2019/09/18 Python
Python中的__init__作用是什么
2020/06/09 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
硕士论文致谢范文
2015/05/14 职场文书
毕业实习证明范本
2015/06/16 职场文书