【JavaScript】包装类

包装类

JS 提供了三个主要的包装类:StringNumberBoolean。如果尝试把原始类型(stringnumberboolean)数据当成对象使用,JS 会自动将其转换为对应包装类的实例。

我们先来看一下 “基本类型数据” 及 “其包装类的实例” 之间的异同:

const strPrimitive = "I am a string";
const strObject = new String("I am a string");console.log(strPrimitive); // 'I am a string'
console.log(strObject); // { String: 'I am a string' }

① typeof:

typeof strPrimitive; // "string"
typeof strObject; // "object"

② instanceof:

strPrimitive instanceof String; // false
strObject instanceof String; // true

③ Object.prototype.toString.call:

Object.prototype.toString.call(strPrimitive); // [object String]
Object.prototype.toString.call(strObject); // [object String]

④ 调用属性/方法:

strPrimitive.name = "PrimitiveStr";
strObject.name = "ObjectStr";console.log(strPrimitive.name); // undefined
console.log(strObject.name); // 'ObjectStr'console.log(strPrimitive); // 'I am a string'
console.log(strObject); // { String: 'I am a string', name: 'ObjectStr' }console.log(strPrimitive.length); // 13
console.log(strObject.length); // 13

可以看到,strPrimitive.name 输出的是 undefined,而没有报错,这就是因为 JS 会在必要的时候将原始类型数据转换为对应包装类的实例。我们看如下解析:

strPrimitive.name = "PrimitiveStr";
// 执行这一步时, 相当于执行 new String(strPrimitive).name = 'superman'
// 但是没有变量接收 new String(strPrimitive) 这个实例, 所以该实例又会被垃圾回收机制处理掉console.log(strPrimitive.name);
// 执行这一步时, 相当于执行 console.log(new String(strPrimitive).name)
// 但是这个新建的 String 实例并没有 name 属性, 所以打印 undefinedconsole.log(strPrimitive.length);
// 执行这一步时, 相当于执行 console.log(new String(strPrimitive).length)
// 这个新建的 String 实例有 length 属性, 所以打印 13

除了使用包装类 Boolean、Number 和 String 创建对应实例。还能使用 Object 创建,它能根据参数的类型返回对应包装类的实例:

const obj = new Object("some text");
console.log(obj instanceof String); // true

如果参数是字符串,则会创建 String 的实例;如果是数值,则会创建 Number 的实例;如果是布尔值,则会得到 Boolean 的实例。


原始类型数据中,undefinednull 没有构造函数,所以它们没有包装类。没有包装类的原始类型数据被当成对象使用会直接报错:

const a = null;
console.log(a.name); // TypeError: Cannot read properties of null



Boolean

创建一个 Boolean 实例:

const booleanObject = new Boolean(true); // 传入 true / false 作为参数

valueOf 方法会被重写,返回布尔值 true / false;toString 也会被重写,返回字符串 “true” / “false”:

console.log(booleanObject.valueOf()); // true
console.log(booleanObject.toString()); // "true"

Boolean 实例在 ECMAScript 中用得很少。不仅如此,它们还很容易引起误会,尤其是在布尔表达式中使用 Boolean 实例时:

const falseObject = new Boolean(false);
const result = falseObject && true;
console.log(result); // trueconst falseValue = false;
result = falseValue && true;
console.log(result); // false

在这段代码中,我们创建一个值为 false 的 Boolean 实例。然后,在一个布尔表达式中通过 && 操作将这个实例与一个原始值 true 组合起来。在布尔算术中,false && true 等于 false。可是,这个表达式是对 falseObject 对象而不是对它的值(false)做 && 操作。因为所有对象在布尔表达式中都会自动转换为 true,因此 falseObject 在这个表达式里实际上表示原始值 true 。那么 true && true 当然是 true。



Number

创建一个 Number 实例:

const numberObject = new Number(10); // 传入一个数值作为参数

valueOf、toLocaleString 和 toString 方法会被重写。valueOf 方法返回 Number 实例表示的原始数值,另外两个方法返回数值字符串。

toString 方法可选地接收一个表示基数的参数,并返回对应基数形式的数值字符串:

const num = 10;
console.log(num.toString()); // "10"
console.log(num.toString(2)); // "1010"
console.log(num.toString(8)); // "12"
console.log(num.toString(10)); // "10"
console.log(num.toString(16)); // "a"



String

创建一个 String 实例:

const stringObject = newString("hello world"); // 传入一个字符串作为参数

3 个继承的方法 valueOf、toLocaleString 和 toString 都返回实例表示的原始字符串值。

每个 String 对象都有一个 length 属性,表示字符串中字符的数量。来看下面的例子:

const stringValue = "hello world";
console.log(stringValue.length); // "11"

这个例子输出了字符串 “hello world” 中包含的字符数量:11。注意,即使字符串中包含双字节字符(而不是单字节的 ASCII 字符),也仍然会按单字符来计数。


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

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

相关文章

个人倒计时页面源码,实用倒计时单页源码

一、源码描述 这是一款非常实用的个人倒计时页面,支持设置未来一年时间,支持设置背景音乐,支持自定义下拉页面,点击向下箭头查看。 二、源码截图 三、源码下载

docker 常用命令,后面不断更新

1.从Docker容器中下载文件到本地的方法 使用 docker cp 命令:该命令可以将文件或目录从容器复制到主机。该方法简单快捷,适用于少量文件的下载。 # 将容器名为my_container中的 /data/file.txt文件复制到本地/path/to/save/file.txt docker cp my_container:/data/…

深入探讨【C++容器适配器】:现代编程中的【Stack与Queue】的实现

目录 一、Stack(栈) 1.1 Stack的介绍 1.2 Stack的使用 1.3 Stack的模拟实现 二、Queue(队列) 2.1 Queue的介绍 2.2 Queue的使用 2.3 Queue的模拟实现 三、容器适配器 3.1 什么是适配器 3.2 为什么选择deque作为stack和…

kylin入门教程

Apache Kylin的入门教程主要涵盖以下几个方面: 一、Apache Kylin简介 Apache Kylin是一个开源的分布式分析引擎,提供Hadoop之上的SQL接口及多维分析(OLAP)能力以支持超大规模数据。最初由eBay Inc.开发并贡献至开源社区&#xf…

基于Vue和UCharts的前端组件化开发:实现高效、可维护的词云图与进度条组件

基于Vue和UCharts的前端组件化开发:实现高效、可维护的词云图与进度条组件 摘要 随着前端技术的迅速发展和业务场景的日益复杂,传统的整块应用开发方式已无法满足现代开发的需求。组件化开发作为一种有效的解决方案,能够将系统拆分为独立、…

Shell基础之函数和数组

目录 函数 什么是函数 函数的语法 函数的调用 函数的返回值 函数的案例 函数变量的作用域 递归函数 函数库文件 数组 定义数组语法 数组操作 获取所有元素 获取元素下标 获取数组长度 获取数组元素 数组添加元素 删除数组元素 删除数组 遍历数组元素 数组案…

解决pycharm无法识别miniconda

解决pycharm无法识别miniconda 找到miniconda安装目录下condabin/conda.bat文件,点击load即可识别codna环境 a环境

Spring Boot(七十九):SprngBoot整合Apache tika做文件类型检测

之前有一个章节介绍了Apache tika实现文档内容解析,地址如下:Spring Boot(六十八):SpringBoot 整合Apache tika 实现文档内容解析_springboot tika pptx-CSDN博客 下面我们介绍Apache tika实现文件类型检测 1 引入依赖 <dependency><groupId>org.apache.tika&…

Docker 挂载目录空间占满修改/var/lib/docker/overlay2 的路径解决方案

本文详细描述了在CentOS7系统中卸载旧版Docker、安装依赖、添加Docker源、配置存储路径并启动Docker&#xff0c;使其在/home目录下运行的过程。 以下是在CentOS 7下重新安装Docker并将其安装在/home/下的完整步骤&#xff1a; 卸载旧版本的Docker。如果您之前已经安装了Dock…

仕考网:没有学位证能考公务员吗?

公务员考试需要满足报名条件才能参加&#xff0c;没有学位证能考公吗? 没有学位证书的考生也有机会参与公务员考试虽然可以选择的岗位比较少&#xff0c;但可以报考参加那些不设定学位要求的岗位。当发布的公务员招录信息中某一职位的学位要求标注为“无要求”时&#xff0c;…

【C++】:继承[下篇](友元静态成员菱形继承菱形虚拟继承)

目录 一&#xff0c;继承与友元二&#xff0c;继承与静态成员三&#xff0c;复杂的菱形继承及菱形虚拟继承四&#xff0c;继承的总结和反思 点击跳转上一篇文章&#xff1a; 【C】&#xff1a;继承(定义&&赋值兼容转换&&作用域&&派生类的默认成员函数…

MATLAB Gazebo联合仿真

准备仿真环境&#xff1a;在Gazebo中设置仿真场景&#xff0c;包括机器人模型、环境布局、传感器和执行器等。编写MATLAB脚本&#xff1a;在MATLAB中编写控制算法和数据处理脚本&#xff0c;用于接收Gazebo中的传感器数据&#xff0c;并生成控制命令。建立通信&#xff1a;通过…

DEBUG:jeston卡 远程ssh编程

问题 jeston 打开网页 gpt都不方便 而且只需要敲命令就行 解决 下载MobaXterm(window执行) liunx需要虚拟机 软件 远程快速复制命令

PHP文字ocr识别接口示例、人工智能的发展

全球在人工智能升级的大背景下&#xff0c;有一定规模的制造商开始大量部署人工智能机器人、系统&#xff0c;以此取代危险、简单和重复性的工作。各种人工智能技术的迅猛发展&#xff0c;正在驱动各行业就业市场发现变革。 京东物流大家并不陌生&#xff0c;京东快递机器人在…

vue中table内容和lable对不齐解决方案

问题&#xff1a; 代码片段&#xff1a; <template><el-table :data"tableData" stripe style"width: 100%"><el-table-column prop"title" label"标题" width"80px" /><el-table-column prop"n…

Windows安全日志导致环境内存占用过高

Windows 环境内存占用高不释放&#xff0c;目前遇到的常见情况如下&#xff1a; 情况一&#xff1a;JVM内存泄漏 这种网上的排查方式有很多&#xff0c;自行查阅即可 情况二&#xff1a;SQLserver内存配置过大 这种也是&#xff0c;从网上查找修改方式然后修改即可 情况三…

python的面向对象编程

为什么要面向对象编程&#xff1f; 伟大的领袖毛泽东曾说过&#xff1a;编程最大的敌人是重复。 最开始&#xff0c;在程序中写的一条条语句&#xff0c;在执行的时候会变成一条条指令交给CPU执行。这就是**“程序是指令的集合”** 。为了简化程序的设计&#xff0c;引入了函数…

WebPages 全局:深入解析现代网页设计与开发

WebPages 全局:深入解析现代网页设计与开发 引言 随着互联网技术的飞速发展,网页设计与开发已经成为了数字化时代的重要组成部分。从简单的文本和图像展示,到如今复杂的多媒体交互体验,网页设计经历了翻天覆地的变化。本文将深入探讨WebPages全局,包括网页设计的基本概念…

Defensor 4.5:构建数据资产为中心的安全运营体系

5月31日“向星力”未来数据技术峰会上&#xff0c;星环科技重磅发布数据安全管理平台 Defensor 4.5版本。新版本引入了以数据资产为中心的数据安全运营体系&#xff0c;通过智能化大模型技术&#xff0c;帮助企业快速、精准地识别核心重要资产&#xff1b;建设全局的数据安全策…

pytorch GPU cuda 使用 报错 整理

GPU 使用、报错整理 1. 使用指定GPU&#xff08;单卡&#xff09;1.1 方法1&#xff1a;os.environ[CUDA_VISIBLE_DEVICES]1.2 方法2&#xff1a;torch.device(cuda:2)1.3 报错1&#xff1a;RuntimeError: CUDA error: invalid device ordinal CUDA kernel errors might be asy…