JavaScript中的装箱和拆箱操作_知白守黑_的博客-程序员ITS203

技术标签: 前端  javascript  

JS类型转换

JavaScript是一种动态类型弱类型的语言,我们在声明变量的同时不需要显式地指出它的类型,变量的类型将在运行时自动确定,而且可以随时更改一个变量的类型:

let temp = 1;	//  number
temp = '123';   //  string
temp = {
    };      //  object

同时js支持各种类型之间的隐式转换,将一个字符串除以2在js中也是合法的操作:

let str = '100';   //  string
str /= 2;          //  number
console.log(str);  //  输出50,'100'被隐式转换成了整数

而事实上,js中的大部分类型转换都比较简单,具体转换规则表在网上可以很容易找到。比较复杂的是装箱和拆箱操作,下面是我的一些学习体会和总结。

装箱转换(Boxing)以及拆箱转换(Unboxing)

JavaScript中共有六种原始数据(primitive data)类型,其中的number、string、boolean和ES6中新增的symbol类型,都有一个基本包装类型/对象(Wrappers)与之对应。

装箱转换指的就是将原始数据类型转换为对应的对象;拆箱转换与之对应,指的是将包装对象转换为对于的原始数据类型。

装箱转换

1.显式装箱(Explict boxing)

很好理解,手动完成原始数据类型到包装类型的转换:

let temp = 1;
typeof temp                        //  number
temp = new Number(1);	           //  原始数据类型 => 包装类型
typeof temp                        //  object
//  Symbol()函数无法通过new调用,我们可以使用Object()函数来显式装箱
let symbolObject = Object(Symbol('abc'));
typeof symbolObject                //  object

但是需要注意的是,使用手动装箱可能会导致一些语义上的错误:

let temp = new Boolean(true);
if(temp) console.log("true")           //  true
temp = new Boolean(false);             //  此时temp为object,转换为布尔值时为true
if(!temp) console.log("false");
else console.log("true");              //  true

2.隐式装箱(Implict boxing)
在JavaScript中,只有对象才有方法。所以当我们在基本类型上使用方法时,js实际上会创建一个临时对象来调用这个方法,这个临时对象将会在语句执行完毕后被销毁。

let s1 = "1234";
let s2 = s1.substring(1);	//  s2 === 234

//  对上述第二行代码实际执行过程的理解
let temp = new String(s1);
let s2 = temp.substring();
temp = null

//  证明第二行代码确实创建了临时变量
String.prototype.proof = () => {
    
	console.log("proof函数被调用!");
}
'123'.proof();                //  proof函数被调用!

拆箱转换

拆箱转换即装箱转换的逆过程,同样可以分为显式拆箱和隐式拆箱。

1.显式拆箱(Explicit unboxing)

let temp = (new Number(1)).valueOf();  //  包装类型 => 原始数据类型
typeof temp;                           //  number

2.隐式拆箱(Implicit unboxing)

let temp = new Number(1);
temp == 1;                            //  true

参考篇目

  1. 通俗的方式理解动态类型,静态类型;强类型,弱类型
  2. JavaScript类型:关于类型,有哪些你不知道的细节?
  3. Boxing and unboxing in JavaScript.
  4. 面试题:在javascript中,1与Number(1)有什么区别(第一条评论——eyesofkids)
  5. JavaScript Boxing Wrappers.
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45693198/article/details/115803052

智能推荐

Linux运维精华面试题_weixin_33895695的博客-程序员ITS203

1、什么是运维?什么是游戏运维?1)运维是指大型组织已经建立好的网络软硬件的维护,就是要保证业务的上线与运作的正常,在他运转的过程中,对他进行维护,他集合了网络、系统、数据库、开发、安全、监控于一身的技术运维又包括很多种,有DBA运维、网站运维、虚拟化运维、监控运维、游戏运维等等2)游戏运维又有分工,分为开发运维、应用运维(业务运维)和系统运维开发运维:是给应用运维开发运维工具和运维平台的应用运维...

让你的网站用上炫酷的中文字体_程序猿DD_的博客-程序员ITS203

点击上方蓝色“程序猿DD”,选择“设为星标”回复“资源”获取独家整理的学习资料!作者 | 米开朗基杨来源 |公众号「云原生实验室」随着当前 Web 技术的日新月异,网页界面内容越来越丰...

后端使用json格式将数据返回给前端的三种方式的实现_千篇不一律的博客-程序员ITS203_new jsonsuccessobject<>如何返回值

文章目录使用jackson类库使用springmvc的@RestController注解使用fastjson实现使用jackson类库1.引jar包 &lt;!-- json --&gt; &lt;dependency&gt; &lt;groupId&gt;com.fasterxml.jackson.core&lt;/groupId&gt; &lt;arti...

Python之命名元组 (namedtuple)_Andone_hsx的博客-程序员ITS203

 任务描述本关任务:补充函数代码,完成对命名元组的简单操作。命名元组 (namedtuple)Python中提供了基础的不可变数据结构元组tuple,对元组元素的访问需通过索引来完成,对此需要熟记每个下标对应的具体含义。如果元素数量一多,要记清楚这些东西就会比较麻烦了,于是就出现了命名元组namedtuple。创建命名元组命名元组的构造函数接受两个参数typename,fi...

python读取docx文件,并进行一些操作_python 读取docx_yangdeshun888的博客-程序员ITS203

其中一定要docx文件,如果是doc文件进行改后缀成docx是会有问题的,导致读取的文件一直是空的,需要原生态就是使用docx创建的文件。其是读取某个目录下的所有docx文件,去除中文后,然后进行保存到源文件。

Flink流计算编程:双流中实现Inner Join、Left Join与Right Join_zhisheng_blog的博客-程序员ITS203

点击上方“zhisheng”,选择“设为星标”回复“666”,获取精选资料简介之前文章中提到JoinedStream与CoGroupedStream,例如下列代码:dataStream....

随便推点

centos 改变root用户密码_LANWENBING的博客-程序员ITS203

方法chttp://www.dedecms.com/knowledge/servers/linux-bsd/2012/0819/8378.html

快递物流管理系统(SSM,JQUERY-EASYUI,MYSQL)_LIQUAN112688的博客-程序员ITS203

快递物流管理系统(SSM,JQUERY-EASYUI,MYSQL)快递物流管理系统(SSM,JQUERY-EASYUI,MYSQL)(毕业论文27564字,共78页,程序代码,MySQL数据库)【运行环境】Eclipse, IDEA JDK1.7(JDK1.8) Tomcat7(Tomcat8)【技术栈】JAVA, JSP, SSM, JQUERY, JQUERY EASYUI, MYSQL, HTML, CSS, JAVASCRIPT 项目源码【项目包含内容】...

STM32——固件库点亮LED灯_黑桃鱼的博客-程序员ITS203_stm32固件库点亮led

STM32——固件库点亮LED灯STM32——固件库点亮LED灯STM32——固件库点亮LED灯一、在User文件夹创建led灯文件夹并创建led.c和led.h二、在main.c文件、led.c文件和led.h文件中写下相关代码main.c代码led.c代码led.h代码三、实验过程一、注意事项:1、在编写main.c文件时需要注意包含文件的路径2、需要在rcc文件和gpio文件中去寻找相关函数3、GPIO_LOW 设置低电平引脚4、main文件中拉低电平一、在User文件夹创建led灯文件夹并创建l

c语言常用代码积累_Fireworks_light的博客-程序员ITS203_代码积累

c语言已经上完了,自我感觉,要想学会c语言就要不停的敲,不停的敲代码,一个好的代码重复的敲,直到敲的和hello world一样熟悉,好多算法,好多解题思想我们想不到,但是,我们把前辈的东西敲会,敲熟,哪怕是敲的背下,最后掌握了这些解题的方法,能达到举一反三,那么这些方法就变成我们的东西了。//把数字123转换为字符串"123"#include <stdio.h>int main ( void )

es6 TypedArray视图_ixygj197875的博客-程序员ITS203_es6 typedarray

TypedArray视图ES6 ArrayBuffer对象作为内存区域,可以存放多种类型的数据。同一段内存,不同数据有不同的解读方式,这就叫做“视图”(view)。ArrayBuffer有两种视图,一种是 TypedArray视图,另一种是DataView视图。前者的数组成员都是同一个数据类型,后者的数组成员可以是不同的数据类型。目前,TypedArray视图一共包括 9 种类型,每一种视图都是一...

使用阿里云OSS上传本地资源(图片、文件、音频、视频)_万少博的博客-程序员ITS203_oss上传音频

最新更新时间:2020年08月08日23:44:17《猛戳-查看我的博客地图-总有你意想不到的惊喜》背景:在使用阿里云OSS的过程中,通过JavaScript客户端签名直传的方案进行本地资源上传时,在react架构的项目中引入官方提供的Plupload SDK的方案一直上传失败,究其原因是Plupload SDK的方案采用jQuery操作DOM进行上传,通过分析源码发现核心还是传统的formdata格式发送xhr对象上传。本文内容:记录前端开发过程中在不同场景下使用阿里云OSS上传本地资源的方案