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中sort()方法的用法
Nov 04 Javascript
use jscript Create a SQL Server database
Jun 16 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
layui表格实现代码
May 20 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 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内核解析:PHP中的哈希表
2014/01/30 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
js星星评分效果
2014/07/24 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Python count函数使用方法实例解析
2020/03/23 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
劳动竞赛口号
2014/06/16 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
红楼梦读书笔记
2015/06/25 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
python unittest单元测试的步骤分析
2021/08/02 Python