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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
AutoSave/自动存储功能实现
Mar 24 Javascript
javascript 面向对象继承
Nov 26 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 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
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
php静态文件生成类实例分析
2015/01/03 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
js 幻灯片的实现
2011/12/06 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python生成随机验证码的两种方法
2015/12/22 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Python内置函数及功能简介汇总
2020/10/13 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
土木工程毕业生推荐信
2013/10/28 职场文书
优秀毕业生推荐信
2013/11/02 职场文书
国旗下的演讲稿
2014/05/08 职场文书
2015年教师节活动总结
2015/03/20 职场文书
小学数学教学反思范文
2016/02/16 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python