js数据类型的使用详解

这次给大家带来js数据类型的使用详解,js数据类型使用的注意事项有哪些,下面就是实战案例,一起来看一下。

由于自己是野生程序员,在刚开始学习程序设计的时候没有在意内存这些基础知识,导致后来在提到“什么什么是存在栈中的,栈中只是存了一个引用”这样的话时总是一脸懵逼。。

后来渐渐的了解了一些内存的知识,这部分还是非常有必要了解的。

基本数据结构

栈,只允许在一段进行插入或者删除操作的线性表,是一种先进后出的数据结构。

堆是基于散列算法的数据结构。

队列

队列是一种先进先出(FIFO)的数据结构。

JavaScript中数据类型的存储

JavaScript中将数据类型分为基本数据类型和引用数据类型,它们其中有一个区别就是存储的位置不同。

基本数据类型

我们都知道JavaScript中的基本数据类型有:

String

Number

Boolean

Undefined

Null

Symbol(暂时不管)

基本数据类型都是一些简单的数据段,它们是存储在栈内存中。

引用数据类型

JavaScript中的引用数据类型有:

Array

Object

引用数据类型是保存在堆内存中的,然后再栈内存中保存一个对堆内存中实际对象的引用。所以,JavaScript中对引用数据类型的操作都是操作对象的引用而不是实际的对象。

可以理解为,栈内存中保存了一个地址,这个地址和堆内存中的实际值是相关的。

图解

现在,我们声明几个变量试试:

var name="axuebin";var age=25;var job;var arr=[1,2,3];var obj={age:25};

登录后复制

此时name,age,job三种基本数据类型是直接存在栈内存中的,而arr,obj在栈内存中只是存了一个地址来表示对堆内存中的引用。

复制

基本数据类型

对于基本数据类型,如果进行复制,系统会自动为新的变量在栈内存中分配一个新值,很容易理解。

引用数据类型

如果对于数组、对象这样的引用数据类型而言,复制的时候就会有所区别了:

系统也会自动为新的变量在栈内存中分配一个值,但这个值仅仅是一个地址。也就是说,复制出来的变量和原有的变量具有相同的地址值,指向堆内存中的同一个对象。

如果所示,执行了var objCopy=obj之后,obj和objCopy具有相同的地址值,执行堆内存中的同一个实际对象。

这有什么不同呢?

当我修改obj或objCopy时,都会引起另一个变量的改变。

为什么?

为什么基础数据类型存在栈中,而引用数据类型存在堆中呢?

堆比栈大,栈比对速度快。

基础数据类型比较稳定,而且相对来说占用的内存小。

引用数据类型大小是动态的,而且是无限的。

堆内存是无序存储,可以根据引用直接获取。

参考文章

理解js内存分配

原始值和引用值

在ECMAScript中,变量可以存放两种类型的值,即原始值和引用值。
原始值指的就是代表原始数据类型(基本数据类型)的值,即Undefined,Null,Number,String,Boolean类型所表示的值。
引用值指的就是复合数据类型的值,即Object,Function,Array,以及自定义对象,等等

栈和堆

与原始值与引用值对应存在两种结构的内存即栈和堆
栈是一种后进先出的数据结构,在javascript中可以通过Array来模拟栈的行为

原始值是存储在栈中的简单数据,也就是说,他们的值直接存储在变量访问的位置。
堆是基于散列算法的数据结构,在javascript中,引用值是存放在堆中的。
引用值是存储在堆中的对象,也就是说,存储在变量处的值(即指向对象的变量,存储在栈中)是一个指针,指向存储在堆中的实际对象.

例:var obj = new Object(); obj存储在栈中它指向于new Object()这个对象,而new Object()是存放在堆中的。
那为什么引用值要放在堆中,而原始值要放在栈中,不都是在内存中吗,为什么不放在一起呢?那接下来,让我们来探索问题的答案!
首先,我们来看一下代码:

function Person(id,name,age){this.id = id;this.name = name;this.age = age;}var num = 10;var bol = true;var str = "abc";var obj = new Object();var arr = ['a','b','c'];var person = new Person(100,"笨蛋的座右铭",25);

登录后复制

变量num,bol,str为基本数据类型,它们的值,直接存放在栈中,obj,person,arr为复合数据类型,他们的引用变量存储在栈中,指向于存储在堆中的实际对象。

由上图可知,我们无法直接操纵堆中的数据,也就是说我们无法直接操纵对象,但我们可以通过栈中对对象的引用来操作对象,就像我们通过遥控机操作电视机一样,区别在于这个电视机本身并没有控制按钮。

现在让我们来回答为什么引用值要放在堆中,而原始值要放在栈中的问题:

记住一句话:能量是守衡的,无非是时间换空间,空间换时间的问题

堆比栈大,栈比堆的运算速度快,对象是一个复杂的结构,并且可以自由扩展,如:数组可以无限扩充,对象可以自由添加属性。将他们放在堆中是为了不影响栈的效率。而是通过引用的方式查找到堆中的实际对象再进行操作。相对于简单数据类型而言,简单数据类型就比较稳定,并且它只占据很小的内存。不将简单数据类型放在堆是因为通过引用到堆中查找实际对象是要花费时间的,而这个综合成本远大于直接从栈中取得实际值的成本。所以简单数据类型的值直接存放在栈中。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

jQuery+JSONP跨域请求的使用步奏详解

Vue2.0的http请求和loading展示使用详解

以上就是js数据类型的使用详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2773550.html

(0)
上一篇 2025年3月8日 13:53:23
下一篇 2025年3月8日 13:53:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS正则表达式的具体描述

    正则表达式是描述字符模式的对象。 用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。 语法 var patt=new regexp(pattern,modifiers); var patt=/pattern/modifier…

    编程技术 2025年3月8日
    200
  • 深入理解js包装类

    本篇文章给大家分享的内容是深入理解js包装类,有着一定的参考价值,有需要的朋友可以参考一下 说包装类之前我们先看下面这个例子 var str = ‘hello’;str.name = ‘world’;console.log(str.name…

    2025年3月8日
    200
  • node.js怎么通过axios实现网络请求

    这次给大家带来node.js怎么通过axios实现网络请求,node.js通过axios实现网络请求的注意事项有哪些,下面就是实战案例,一起来看一下。 1、使用Npm 下载axios npm install –save axio…

    编程技术 2025年3月8日
    200
  • AngularJS中@HostBinding()和@HostListener()的使用区别

    这次给大家带来AngularJS中@HostBinding()和@HostListener()的使用区别,使用AngularJS中@HostBinding()和@HostListener()的注意事项有哪些,下面就是实战案例,一起来看一下。…

    编程技术 2025年3月8日
    200
  • vue项目打包上传到百度的BAE步奏详解

    这次给大家带来vue项目打包上传到百度的BAE步奏详解,vue项目打包上传到百度的BAE的上传有哪些,下面就是实战案例,一起来看一下。 经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上。虽然接口方面还有一下问题但是自己还是很高兴…

    编程技术 2025年3月8日
    200
  • 在Vuejs里使用index对第一项添加class

    这次给大家带来在Vuejs里使用index对第一项添加class,在Vuejs里使用index对第一项添加class的注意事项有哪些,下面就是实战案例,一起来看一下。 (1)在v-for中,利用index来对第一项添加class 在CODE…

    编程技术 2025年3月8日
    200
  • 常见的前端JS算法总结

    本篇文章给大家分享的内容是常见的前端JS算法总结,有着一定的参考价值,有需要的朋友可以参考一下 排序算法 1、冒泡排序 function bubbleSort(arr){   var i = 0,      j = 0;    for(i=…

    编程技术 2025年3月8日
    200
  • Vue的轮播组件怎么使用

    这次给大家带来Vue的轮播组件怎么使用,使用Vue轮播组件的注意事项有哪些,下面就是实战案例,一起来看一下。 本文章采用Vue结合css3来实现轮播图。 首先要了解的是Vue的动画原理。在vue中,如果我们要给元素设置动画效果,则需要使用一…

    编程技术 2025年3月8日
    200
  • 实现文件上传的AjaxUpLoad.js

    这次给大家带来实现文件上传的AjaxUpLoad.js,使用实现文件上传AjaxUpLoad.js的注意事项有哪些,下面就是实战案例,一起来看一下。 1、创建页面并编写HTML 上传文档:  登录后复制 上传图片:  登录后复制 2、引用A…

    编程技术 2025年3月8日
    200
  • Vue.js的ul-li标签如何仿制select标签

    这次给大家带来Vue.js的ul-li标签如何仿制select标签,Vue.js的ul-li标签如何select标签注意事项有哪些,下面就是实战案例,一起来看一下。 目标:用ul-li标签结合Vue.js知识做一个模仿select标签的下拉…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论