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 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 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接口中interface存在的意义
2013/06/27 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
详解Python中的文件操作
2016/08/28 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python实现超市商品销售管理系统
2019/11/22 Python
pytorch实现线性拟合方式
2020/01/15 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
python中PyQuery库用法分享
2021/01/15 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
有个性的自我评价范文
2013/11/15 职场文书
会计专业求职信范文
2014/03/16 职场文书
安全宣传标语口号
2014/06/06 职场文书
2014年超市工作总结
2014/11/19 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
2016年教师新年寄语
2015/08/18 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
JavaScript实现两个数组的交集
2022/03/25 Javascript
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL