javascript技巧之拆箱装箱和类型转换

本篇文章给大家带来了关于javascript中的相关知识,其中主要介绍了拆箱装箱和类型转换的相关问题,装箱是指把基本数据类型转换为对应的引用类型的操作,下面就一起来看一下,希望对大家有帮助。

javascript技巧之拆箱装箱和类型转换

相关推荐:javascript教程

基本数据类型:string、number、boolean

引用类型:object、function

立即学习“Java免费学习笔记(深入)”;

不存在的类型:undefined

String、Number、Boolean分别属于string、number、boolean三个原始类型的包装类型,它们的对象属于引用类型。

装箱

装箱是指把基本数据类型转换为对应的引用类型的操作,该过程主要是指string、number、boolean类型的数据,通过String、Number、Boolean进行包装成为引用类型数据的过程。

// 隐式装箱var s1 = 'Hello World'; var s2 = s1.substring(2);

登录后复制

上面第二行代码的执行步骤其实是这样的:

使用new String(‘Hello World’)创建一个临时的实例对象;使用临时对象调用substring方法;将执行结果赋值给s2;销毁临时的实例对象。

上面的步骤转换为代码,如下:

// 显式装箱var s1 = 'Hello World'; var tempObj = new String('Hello World');var s2 = tempObj.substring(2);

登录后复制

拆箱

拆箱是把引用类型转换为基本的数据类型。

关于拆箱过程中的ToPrimitive

类型转换

运算符对于两端的变量,都有一个期待类型,在javascript中,凡是不满足运算符期待类型的变量,都会做做隐式转换。

逻辑运算符

在进行逻辑运算时,隐式转换只有一个标准:只有 null 、undefined、 ”、 NaN、 0和 false 表示 false,其他的情况都是 true,比如 {} , []。

算术运算符

如果算术运算符两端均为number类型的数据,直接进行计算;

如果算术运算符两端存在非number的基本数据类型,则对非number的运算数使用Number()进行装箱,然后对返回值进行拆箱为number类型,参与计算;

算术运算符两端存在引用数据类型,则先对引用类型进行拆箱操作,如果结果为非number类型,则根据条件2执行,否则执行条件1。

1 - true // 0, 首先 Number(true) 转换为数字 1, 然后执行 1 - 11 - null // 1,  首先把 Number(null) 转换为数字 0, 然后执行 1 - 01 * undefined //  NaN, Number(undefined) 转换为数字是 NaN , 然后执行 1 * NaN2 * ['5'] //  10, ['5'] 依照ToPrimitive规则进行拆箱会变成 '5', 然后通过 Number('5') 进行拆装箱再变成数字 5123 + {valueOf:()=>{return 10}}   // 133  {valueOf:()=>{return 10}} 依照ToPrimitive规则会先调用valueOf,获得结果为10

登录后复制

当+作为单目运算符出现在变量的前面时,表示的意思是将变量转换为Number类型

+"10" // 10  同 Number("10")+['5']  // 5   ['5']依照ToPrimitive规则会变成 '5', 然后通过`Number`的拆箱操作再变成数字 5

登录后复制

字符串连接符

字符串连接符的符号同算术运算符的+ 。

如果算术运算符两端均为string类型的数据,直接进行连接如果运算符的两端存在非string的基本类型,则对非string的基本类型数据使用String()进行装箱,然后对返回值进行拆箱为基本类型,参与字符串拼接。当+两端两端存在引用数据类型,则先对引用类型进行拆箱操作,如果结果为非string类型,则根据条件2执行,否则执行条件1。

关系运算符

NaN和其他任何类型,做任何关系运算永远返回false(包括和他自己)。如果想判断一个变量是不是NaN , 可以通过Number.isNaN()来判断。

null == undefined比较结果是true,除此之外,null、undefined和其他的(不包括它们自身)任何结果的比较值都为false。

这里是规则定义的,null 为 object 的类型,可是调用valueOf或者toString都会有语法错误,这里直接记住结果就行。

一般情况:

如果算术运算符两端均为number类型的数据,直接进行计算;如果算术运算符两端存在非number的基本数据类型,则对非number的运算数使用Number()进行装箱,然后对返回值进行拆箱为number类型,参与计算;算术运算符两端存在引用数据类型,则先对引用类型进行拆箱操作,如果结果为非number类型,则根据条件2执行,否则执行条件1。

{} == !{}  // false   Number({}.valueOf().toString())==> NaN , 所以题目等同于 NaN == false , NaN 和 任何类型比较都是 false[] == []  // false  内存地址不同![] == 0  // true   ![]==>false , 所以题目等同于 false==0 , Number(false)==>0 ,  所以结果为 true

登录后复制

一些题目

[] == ![]

    - 第一步,![] 会变成 false    - 第二步,[]的valueOf是[],[]是引用类型,继续调用toString,题目变成: "" == false    - 第三步,符号两端转换为Number, 得到 0==0    - 所以, 答案是 true

登录后复制

[undefined] == false

    - 第一步,[undefined]的valueOf结果为 [undefined],然后[undefined]通过toString变成 '' ,所以题目变成  '' == false    - 第二步,符号两端转换为Number, 得到 0==0    - 所以, 答案是 true !

登录后复制

如何使a==1 && a==2 && a==3的结果为 true

var a = {    value: 0,    valueOf: function() {        this.value += 1;        return this.value    }};console.log(a == 1 && a == 2 && a == 3) // true

登录后复制

如何使a===1&&a===2&&a===3的结果为 true

// 使用 defineProperty 进行数据劫持var value = 0;Object.defineProperty(window,"a",{    get(){        return ++value;    }})console.log(a===1&&a===2&&a===3)  //true

登录后复制

实现一个无限累加函数

柯里化实现多参累加

相关推荐:javascript学习教程

以上就是javascript技巧之拆箱装箱和类型转换的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月7日 19:24:03
下一篇 2025年2月17日 23:43:00

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

相关推荐

  • 详细介绍JavaScript怎么实现哈希表

    本篇文章给大家带来了关于javascript中的相关知识,其中主要介绍了关于javascript怎么实现哈希表的相关问题,对最终数据插入的数组进行整个结构的封装,得到的就是哈希表,希望对大家有帮助。 相关推荐:javascript学习教程 …

    2025年3月7日 编程技术
    200
  • 一起来聊聊JavaScript函数柯里化

    本篇文章给大家带来了关于javascript中的相关知识,其中主要介绍了javascript中函数柯里化的相关问题,柯里化是把接受多个参数的函数变换成接受一个单一参数的函数,并且返回接受余下的参数且返回结果的新函数的技术,希望对大家有帮助。…

    2025年3月7日
    200
  • es6中怎么将set转化为数组

    es6中将set转化为数组的方法:1、使用扩展运算符“…”,语法“[…set对象]”;2、使用Array.from()方法,语法“Array.from(set对象)”。 本教程操作环境:windows7系统、ECMA…

    2025年3月7日
    200
  • es6怎么判断数组是否含有相同的值

    判断方法:1、将数组转为Set集合,并使用size属性获取Set元素总数,语法“new Set(arr).size”;2、利用length属性获取数组元素总数;3、比较Set元素总数和数组元素总数是否相等,不相等则含有相同的值,反之则没有。…

    2025年3月7日
    200
  • 实例图文详解在JavaScript中实现队列

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了javascript实现队列的相关问题,描述队列数据结构,其具有的操作以及展示javascript中的队列实现,希望对大家有帮助。 相关推荐:javascript教程 1…

    2025年3月7日 编程技术
    200
  • 怎么快速掌握正则表达式?通过 AST 来学学正则语法!

    正则表达式是对字符串操作的一种逻辑公式,是在处理文本数据时的一项重要而复杂的技术。那么怎么快速掌握正则表达式?下面本篇文章推荐一种学习方法:通过 ast。希望对大家有所帮助! 字符串的处理基本都会用正则表达式,用它来做字符串的匹配、提取、替…

    2025年3月7日 编程技术
    200
  • javascript定义函数的几种类型是什么

    在JavaScript中定义函数的几种类型:1、利用function关键字通过声明或表达式定义函数,语法为“function functionName(parameters){执行的代码}”;2、利用函数构造器Function()构造函数。…

    2025年3月7日
    200
  • 带你了解JSON.stringify,看看怎么使用

    你真的会使用强大的json.stringify方法吗?下面本篇文章带大家详细了解解json.stringify,介绍一下使用方法,希望对大家有所帮助! JSON.stringify 作为日常开发中经常使用的方法,你真的能灵活运用它吗? 学习…

    2025年3月7日
    200
  • 聊聊 typeof 和 instanceof 间有什么区别

    typeof和instanceof操作符都可用来判断数据类型,那么它们之间有什么差异?下面本篇文章就来带大家了解 typeof 和 instanceof ,聊聊它们的区别,希望对大家有所帮助! typeof和instanceof操作符都是用…

    2025年3月7日
    200
  • 图文详解JavaScript原型链

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于原型链的相关问题,原型链指一些原型通过__proto__指针构成的链表,一个原型链可以为想共享原型链中数据的对象服务,希望对大家有帮助。 相关推荐:javascrip…

    2025年3月7日 编程技术
    200

发表回复

登录后才能评论