当前位置:首页 > 日记 > 正文

JavaScript 值类型和引用类型的初次研究 | 推荐

JavaScript 值类型和引用类型的初次研究 | 推荐

值类型:也称为原始数据或原始值(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 值类型和引用类型的初次研究(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

Laravel5.5新特性之友好报错以及展

Laravel5.5新特性之友好报错以及展

新特性,报错,详解,友好,电脑软件,前言期待已久的laravel5.5 很快将为大家呈现,本文将给大家详细介绍关于Laravel5.5新特性之友好报错及展示的相关内容,分享出来供大家参考学习,话不多说了,来一起看看详细的介绍:Laravel5.5 获取源代码如今Larave…

ES6正则表达式扩展笔记

ES6正则表达式扩展笔记

正则表达式,扩展,笔记,电脑软件, 前面的话  正则表达式是javascript操作字符串的一个重要组成部分,但在以往的版本中并未有太多改变。然而,在ES6中,随着字符串操作的变更, ES6也对正则表达式进行了一些更新。本文将详细介绍ES6正则表达式扩展…

正则表达式实现匹配连续数字的方法

正则表达式实现匹配连续数字的方法

数字,连续,正则表达式,方法,电脑软件,实现的要求如下:纯数字 5-7位之间 前三位相同 从第四位开始连续 如下面的例子:11123 #正确22234 #正确33345 #正确333456 #正确2223456 #正确0001234 #正确00012345 #错误:此行长度超…

在Excel表格中如何给数字添加单位

在Excel表格中如何给数字添加单位

单位,数字,表格,电脑软件,Excel,  在Excel表格中,我们一般只会输入数字,那么成绩分数单位该如何设置呢?以下是小编为您带来的关于在Excel表格中给数字添加单位,希望对您有所帮助。在Excel表格中给数字添加单位1、点击&ldquo;开始&rdquo;选项…

U盘装系统出现ntldr is missing

U盘装系统出现ntldr is missing

装系统,电脑软件,ntldr,missing,小编在使用U盘安装系统时,安装完系统后,重启电脑,系统却出现NTLDR is missing press any key to restart的错误提示,导致无法正常进入系统。这是怎么回事呢?今天小编就和大家说说解决U盘装系统出现ntldr is missi…

Yii清理缓存的方法

Yii清理缓存的方法

方法,清理缓存,电脑软件,Yii,本文实例讲述了Yii清理缓存的方法。分享给大家供大家参考,具体如下:html:复制代码 代码如下:<button onclick="clearCache()">ClearCache</button>js:function clearCache(){ $.get('../eng/index.php?r=site…

JavaScript中正则表达式使数字、中

JavaScript中正则表达式使数字、中

数字,字符,正则,表达式,中文,<span id="span_id">span2314的23文本213</span>var htmlobj = txt.replace(/(\d+)/img, "<span style='background:red;'>$&</span>");//var htmlobj = txt.replace(/([+\-]?[0-9]+(\.[0-9]+)?)/g, …

如何把ai路径导入c4d?ai路径导入c4d

如何把ai路径导入c4d?ai路径导入c4d

路径,通用方法,电脑软件,ai,c4d,ai制作的文字路径怎么导入c4d?如果想在C4D里做一个漂亮的字体,那么就需要在AI里做出效果,然后再导入C4D,那么问题来了,怎么把ai文件保存成路径文件,可以倒入c4d呢?下面小编就教大家ai路径导入c4d的通用方法,有图有…

PS怎么将人物图形打造成印章效果?

PS怎么将人物图形打造成印章效果?

图形,印章,效果,人物,电脑软件,如图这个是最终效果,具体怎么做,下面我们小编慢慢道来。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、我们首先打开PS,插入一张人像2、接着我们用磁性套索工具将人物抠…

详解node单线程实现高并发原理与no

详解node单线程实现高并发原理与no

单线程,异步,高并发,详解,原理,一、node单线程实现高并发原理众所周知nodejs是单线程且支持高并发的脚本语言。可为什么单线程的nodejs可以支持高并发呢?很多人都不明白其原理,下面我来谈谈我的理解:1. node的优点:I/O密集型处理是node的强项,因…

win7怎么隐藏硬盘分区

win7怎么隐藏硬盘分区

硬盘分区,电脑软件, 电脑用户们都知道Windows7系统分区是用于存放电脑上所安装的系统,但是打开计算机系统盘就会暴露在电脑操作手的面前,对于家里有小孩用电脑的用户来说,很容易被小孩误删了系统文件导致系统无法开机等问题,有没有什么好的方法…

基于Two.js实现星球环绕动画效果的

基于Two.js实现星球环绕动画效果的

动画效果,示例,星球,电脑软件,js,Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁。Two.js 有一个内置的动画循环,可搭配其他动画库。Two.js 包含可伸…