js中的数据类型(存储上的差别)

在这里插入图片描述


文章目录

  • 前言
  • 一、基本类型
    • Number
    • Undefined
    • String
    • Null
    • Boolean
    • Symbol
  • 二、引用类型
    • Object
    • Array
    • Function
    • 其他引用类型
  • 三、存储区别
    • 基本类型
    • 引用类型
  • 小结


前言

JavaScript中,我们可以分成两种类型:

  • 基本类型
  • 复杂类型

两种类型的区别是:存储位置不同


一、基本类型

基本类型主要为以下6种:

  • Number
  • String
  • Boolean
  • Undefined
  • null
  • symbol

Number

数值最常见的整数类型格式则为十进制,还可以设置八进制(零开头)、十六进制(0x开头)

let intNum = 55 // 10进制的55
let num1 = 070 // 8进制的56
let hexNum1 = 0xA //16进制的10

浮点类型则在数值汇总必须包含小数点,还可通过科学计数法表示

let floatNum1 = 1.1;
let floatNum2 = 0.1;
let floatNum3 = .1; // 有效,但不推荐
let floatNum = 3.125e7; // 等于 31250000

在数值类型中,存在一个特殊数值NaN,意为“不是数值”,用于表示本来要返回数值的操作失败了(而不是抛出错误)

console.log(0/0); // NaN
console.log(-0/+0); // NaN

Undefined

Undefined 类型只有一个值,就是特殊值 undefined。当使用 varlet 声明了变量但没有初始化时,就相当于给变量赋予了 undefined

let message;
console.log(message == undefined); // true

包含 undefined 值的变量跟未定义变量是有区别的

let message; // 这个变量被声明了,只是值为 undefinedconsole.log(message); // "undefined"
console.log(age); // 没有声明过这个变量,报错

String

字符串可以使用双引号(")、单引号(')或反引号(`)标示

let firstName = "John";
let lastName = 'Jacob';
let lastName = `Jingleheimerschmidt`

字符串是不可变的,意思是一旦创建,它们的值就不能变了

let lang = "Java";
lang = lang + "Script";  // 先销毁再创建

Null

Null类型同样只有一个值,即特殊值 null

逻辑上讲, null 值表示一个空对象指针,这也是给typeof传一个 null 会返回 "object" 的原因

let car = null;
console.log(typeof car); // "object"

undefined 值是由 null 值派生而来

console.log(null == undefined); // true

只要变量要保存对象,而当时又没有那个对象可保存,就可用 null 来填充该变量

Boolean

Boolean(布尔值)类型有两个字面值: truefalse

通过Boolean可以将其他类型的数据转化成布尔值

规则如下:

数据类型      				转换为 true 的值      				转换为 false 的值String        				 非空字符串          					"" Number 				非零数值(包括无穷值)						0 、 NaN Object 					 任意对象 							   null
Undefined 					N/A (不存在) 						undefined

Symbol

Symbol(符号)是原始值,且符号实例是唯一、不可变的。符号的用途是确保对象属性使用唯一标识符,不会发生属性冲突的危险

let genericSymbol = Symbol();
let otherGenericSymbol = Symbol();
console.log(genericSymbol == otherGenericSymbol); // falselet fooSymbol = Symbol('foo');
let otherFooSymbol = Symbol('foo');
console.log(fooSymbol == otherFooSymbol); // false

二、引用类型

复杂类型统称为Object,我们这里主要讲述下面三种:

  • Object
  • Array
  • Function

Object

创建object常用方式为对象字面量表示法,属性名可以是字符串或数值

let person = {name: "Nicholas","age": 29,5: true
};

Array

JavaScript数组是一组有序的数据,但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。并且,数组也是动态大小的,会随着数据添加而自动增长

let colors = ["red", 2, {age: 20 }]
colors.push(2)

Function

函数实际上是对象,每个函数都是 Function 类型的实例,而 Function 也有属性和方法,跟其他引用类型一样

函数存在三种常见的表达方式:

  • 函数声明
// 函数声明
function sum (num1, num2) {return num1 + num2;
}
  • 函数表达式
let sum = function(num1, num2) {return num1 + num2;
};
  • 箭头函数

函数声明和函数表达式两种方式

let sum = (num1, num2) => {return num1 + num2;
};

其他引用类型

除了上述说的三种之外,还包括DateRegExpMapSet等…


三、存储区别

基本数据类型和引用数据类型存储在内存中的位置不同:

  • 基本数据类型存储在栈中

  • 引用类型的对象存储于堆中

当我们把变量赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还是引用类型值

下面来举个例子

基本类型

let a = 10;
let b = a; // 赋值操作
b = 20;
console.log(a); // 10

a的值为一个基本类型,是存储在栈中,将a的值赋给b,虽然两个变量的值相等,但是两个变量保存了两个不同的内存地址

下图演示了基本类型赋值的过程:
在这里插入图片描述

引用类型

var obj1 = {}
var obj2 = obj1;
obj2.name = "Xxx";
console.log(obj1.name); // xxx

引用类型数据存放在堆中,每个堆内存对象都有对应的引用地址指向它,引用地址存放在栈中。

obj1是一个引用类型,在赋值操作过程汇总,实际是将堆内存对象在栈内存的引用地址复制了一份给了obj2,实际上他们共同指向了同一个堆内存对象,所以更改obj2会对obj1产生影响

下图演示这个引用类型赋值过程
在这里插入图片描述


小结

  • 声明变量时不同的内存地址分配:
    • 简单类型的值存放在栈中,在栈中存放的是对应的值
    • 引用类型对应的值存储在堆中,在栈中存放的是指向堆内存的地址
  • 不同的类型数据导致赋值变量时的不同:
    • 简单类型赋值,是生成相同的值,两个对象对应不同的地址
    • 复杂类型赋值,是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象

希望本文能够对您有所帮助!如果您有任何问题或建议,请随时在评论区留言联系 章挨踢(章IT)
谢谢阅读!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/449146.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

编译Duilib库

编译Duilib,遇到几个错误; 最终生成的lib如下; 报一个错误,无法打开源文件"StdAfx.h", 查了一下资料,反正我的在下图 C/C - 常规 - 附加包含目录,填入下图内容就可以了,这…

【老生常谈】之Java反射机制

文章目录 序言一、基本概念1.1 Java反射机制是什么?1.2 反射机制功能1.3 反射机制的优缺点 二、Java反射机制API2.1 java.lang.Class 类2.2 java.lang.reflect 包2.2.1 java.lang.reflect.Constructor2.2.2 java.lang.reflect.Method2.2.3 java.lang.reflect.Field2…

【亲测有效】无法获得下列许可 SOLIDWORKS Standard 无效的(不一致的) 使用许可号码 (-8,544,0)

在观看本文章前,请注意看你的报错代码是否和我的一致,如果不是,直接跳过本文章。 前言:我安装的是SOLIDWORKS2022版,软件已经安装完毕,SolidWorks_Flexnet_Server文件夹里面的两个注册表已经安装完毕&#…

LLM应用开发与落地:使用gradio十分钟搭建聊天UI

一、背景 如果你是做LLM应用开发的,特别是做后端开发,你一定会遇到怎么快速写一个聊天UI界面来调试prompt或agent的问题。这时候的你可能在苦恼中,毕竟react.js, next.js, css, html也不是每个人都那么熟练,对吧?即使…

深度学习入门笔记(七)卷积神经网络CNN

我们先来总结一下人类识别物体的方法: 定位。这一步对于人眼来说是一个很自然的过程,因为当你去识别图标的时候,你就已经把你的目光放在了图标上。虽然这个行为不是很难,但是很重要。看线条。有没有文字,形状是方的圆的,还是长的短的等等。看细节。纹理、颜色、方向等。卷…

Android13源码下载及全编译流程

目录 一、源码下载 1.1、配置要求 1.1.1、硬件配置要求 1.1.2、软件要求 1.2、下载环境搭建 1.2.1、依赖安装 1.2.2、工具安装 1.2.3、git配置 1.2.4、repo配置 1.3、源码下载 1.3.1、明确下载版本 1.3.2、替换为清华源 1.3.3、初始化仓库并指定分支 1.3.4、同步全部源码 二、…

Redis(十一)单线程VS多线程

文章目录 概述为何选择单线程主要性能瓶颈多线程特性和IO多路复用概述Unix网络编程中的五种IO模型Blocking IO-阻塞IONoneBlocking IO-非阻塞IOIO multiplexing-IO多路复用signal driven IO-信号驱动IOasynchronous IO-异步IO 场景:引出epoll总结 开启Redis多线程其…

【Go语言成长之路】安装Go

文章目录 安装Go一、下载Go语言安装包二、删除以前安装的Go版本三、添加/usr/local/go/bin到环境变量内四、确认安装成功 安装Go Note: 这里只演示安装Linux版本的Go,若为其它版本,请按照官网的安装教程进行安装即可。 一、下载Go语言安装包 ​ 在浏览…

paddle环境安装

一、paddle环境安装 如pytorch环境安装一样,首先在base环境下创建一个新的环境来安装paddlepaddle框架。首先创建一个新的环境名叫paddle。执行如下命令。 conda create -n paddle python3.8创建好了名叫paddle这个环境以后,进入到这个环境中&#xff…

STM32--USART串口(2)串口外设

一、USART简介 可配置数据位:不需要校验就是8位,需要校验就选9位; 停止位:决定了帧的间隔; STM32F103C8T6USART:USART1挂载在APB2总线上,USART2和USART3挂载在APB1总线上; 二、USART框图 TXE…

centos 7 部署若依前后端分离项目

目录 一、新建数据库 二、修改需求配置 1.修改数据库连接 2.修改Redis连接信息 3.文件路径 4.日志存储路径调整 三、编译后端项目 四、编译前端项目 1.上传项目 2.安装依赖 3.构建生产环境 五、项目部署 1.创建目录 2.后端文件上传 3. 前端文件上传 六、服务启…

SpringBoot、SpringCloud项目打包,target目录没有生成jar包

Maven中有一个 Execute goals recursively 递归执行 的复选框,如果这个没有勾选在IDEA中本地打包聚合工程的子模块target目录不会生成jar包,递归执行即对聚合工程执行的命令子模块也会执行 clean package install