JavaScript中的包装类型详解

  • 在 JavaScript 中,我们有基本类型和对象类型两种数据类型。
  • 基本类型包括 StringNumberBooleannullundefinedSymbol。然而,当我们需要在这些基本类型上调用方法时,就需要用到 JavaScript 的包装类型。

什么是包装类型?

  • 包装类型是 JavaScript 中的一种特殊对象,它们将基本类型的值“包装”在对象中,使我们能够在基本类型上调用方法。JavaScript 提供了三种包装类型:StringNumberBoolean

  • 例如,当我们在一个字符串上调用方法时,JavaScript 会临时将其转换(或者说“包装”)为一个对象,这样就可以调用方法了。

var str = 'hello';
console.log(str.toUpperCase()); // 输出 "HELLO"
  • 在这个例子中,str 是一个字符串基本类型,但我们可以在它上面调用 toUpperCase 方法。这是因为 JavaScript 在后台临时将 str 包装成了一个 String 对象,然后在这个对象上调用了 toUpperCase 方法。

包装类型的特性

  • 值得注意的是,这种包装只是临时的,调用方法后,基本类型值会恢复到原来的状态。这就是所谓的包装类型。

  • 此外,虽然 nullundefined 也是基本类型,但它们没有对应的包装类型,也没有可以调用的方法。

包装类型的注意事项

  • 虽然包装类型在 JavaScript 中非常有用,但在使用时也需要注意一些问题。例如,虽然 Boolean 对象是一个包装类型,但它在布尔上下文中总是被视为 true,无论它包装的值是 true 还是 false。这可能会导致一些意想不到的结果。
var bool = new Boolean(false);
if (bool) {
console.log('run?'); // 会进到 if 条件里面吗?
}
  • 在这个例子中,bool 是一个 Boolean 对象,其包装的值为 false。然而,因为 bool 是一个对象,所以在 if 语句中,它被视为 true,所以 console.log 语句总是会执行。所以打印出 run?

  • 总的来说,包装类型是 JavaScript 中一个重要的概念,它让我们能够在基本类型上调用方法,极大地增强了 JavaScript 的灵活性和功能性。然而,在使用时,我们也需要注意它的一些特性和潜在问题。

面试题

  • 有可能会是面试题,先看以下代码:
var a = new Boolean(false);
if (!a) {
console.log('run?'); // 会进到 if 条件里面吗?
}
  • 看了上面关于包装类型的介绍,那会执行到 if 里面吗?
  • 不会
  • 为什么呢?
// 个人的解析过程:
1. var a = new Boolean(false); 之后,a 的值为 [Boolean: false]
2. 将 a 转换为包装类型,执行 Object(a) 后值为 [Boolean: false]
3. 因为在 if 语句中的判断条件都会转换为 boolean 再进行判断,那再进行 boolean 值的转换, !!Object(a) 后值为 true
4. 而在 if 语句中的条件是取反 a,则 if 条件不成立,则 if 中的语句不执行
  • 原因:
  1. 在 JavaScript 中,有两种类型的布尔值:基本类型的布尔值(true 或 false)Boolean 对象(通过 new Boolean() 创建的,它是一个包装对象,可以包装一个布尔值,但它本身是一个对象)。
  2. 在 JavaScript 中,所有的对象(包括 Boolean 对象)在布尔上下文中都被视为 true,无论它们包装的值是 true 还是 false
  3. 这就是为什么 if 语句中的 !a 不会执行的原因,因为 a 是一个 Boolean 对象,即使它包装的值是 false,在布尔上下文中也被视为 true,所以 !a 的结果是 false

JavaScript中的包装类型详解的更多相关文章

  1. JavaScript中的Array类型详解

    与其他语言中的数组的区别: 1.JavaScript数组的每一项都可以保存任何类型的数据,一个数组的数组元素可以是不同类型的数据. 2.数组的大小是动态调整的,可以随着数据的添加自动的增长. 1.两种 ...

  2. JavaScript中的对象类型详解

    To be finished 摘要 1.什么是对象? 2.引用类型和原始类型 3.对象数据属性拥有的特性(Attributes) 4.如何创建对象 a.直接定义 var mango={color:&q ...

  3. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  4. JavaScript中return的用法详解

    JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...

  5. javascript 中合并排序算法 详解

    javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的...  合并排序代码如下: <script type="text/javascript& ...

  6. javascript中的this作用域详解

    javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...

  7. JavaScript中this的用法详解

    JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...

  8. JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...

  9. JavaScript中的注释问题详解? 部分3

    注释:解释代码的含义,浏览器中不执行. 方便其他程序员了解代码 ,也可以注释自己不需要的代码(开发过程中)! 1. 单行注释 // 用于一行代码上面 2.多行注释 /* */ 用于一段代码上面 或者是 ...

  10. JavaScript中的async/await详解

    1.前言 ​ async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法.async和await关键字 ...

随机推荐

  1. k8s集群搭建及对一些组件的简单理解(一)

    背景 k8s的学习环境(用kubeadm方式搭建),我也搭过几次了,但都有点问题. 要么在云服务器上弄,这个的问题是就只有一台轻量服务器,只能搭个单节点的:后来买了一台便宜的,所以就有了两台,但是不在 ...

  2. ClickHouse特性及底层存储原理

    ClickHouse的特性 ClickHouse是一款MPP架构的列式存储数据库,但MPP和列式存储并不是什么"稀罕"的设计.拥有类似架构的其他数据库产品也有很多,但是为什么偏偏只 ...

  3. python重拾基础第一天

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...

  4. Android Framework:如何让 App 拿到Power key 值

    Android app:如何让 App 拿到Power key 值 原文(有删改):https://blog.csdn.net/qq_37858386/article/details/10383566 ...

  5. 执行insmod提示 invalid module format

    内核版本和驱动版本不匹配: 1.假如内核版本是2018.3,驱动使用了另外一个版本,可能会出现这样的问题 2.内核和驱动版本一致,但内核进行了一些配置,导致驱动装不上,此时应该: make clean ...

  6. openGauss集群主库出现流复制延迟告警

    问题描述:环境是openGauss 5.0集群,在一次意外重启数据库之后.收到了一个主库的主从延迟告警,只有从库才能出现延迟,主库怎么会出现了告警延迟 告警信息: Status: Resolved H ...

  7. java实现微信登录

    前言 上一篇做了php的微信登录,所以也总结一下Java的微信授权登录并获取用户信息这个功能的开发流程. 配置 配置什么的就不多说了,详细的配置可以直接前往我上一篇查看. https://www.cn ...

  8. Unity中正面视图的相机最大距离定位

    问题背景: Unity中在场景中有这样的需求,就是俯视整个场景或者平视整个场景.这种情况下场景中物体长宽比不一定和相机视口长宽比一致,要保证所有的物体都在视口内,并且距离不能太远,,所以处理起来需要点 ...

  9. P8571 题解

    既然字符串的总长一定,不妨对于每个询问中的 \(s_k\) 的长度根号分治,假定分治阈值为 \(B\).下面令 \(L\) 为所有串长度总和. 对于长度大于 \(B\) 的字符串,这样的不同字符串至多 ...

  10. Aspose Excel 单元格合并后边框显示不全

    /// <summary> /// 解决合并后的单元格没有边框,设置合并单元格格式,让合并过的单元格中每一个单元格上都添加上加边框的样式 /// </summary> /// ...