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 相关文章推荐
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
JavaScript获取URL参数的方法分享
Apr 07 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
php4的session功能评述(三)
2006/10/09 PHP
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
JS回调函数深入理解
2019/10/16 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python创建系统目录的方法
2015/03/11 Python
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
Windows下python3.7安装教程
2018/07/31 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
详解python itertools功能
2020/02/07 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
How TDD works
2012/09/30 面试题
小学远程教育工作总结
2015/08/13 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技
python数据处理之Pandas类型转换
2022/04/28 Python