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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
JavaScript闭包详解
Feb 02 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
js实现音乐播放控制条
Sep 09 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
Yii快速入门经典教程
2015/12/28 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
javascript去除空格方法小结
2015/05/21 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
TypeScript入门-接口
2017/03/30 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Python连接phoenix的方法示例
2017/09/29 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
解决python3输入的坑——input()
2020/12/05 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
岗位职责的含义
2013/11/17 职场文书
前台接待的工作职责
2013/11/21 职场文书
高中教师评语大全
2014/04/25 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书