10分钟的时间,带你彻底搞懂JavaScript数据类型转换

前言

 📫 大家好,我是南木元元,热衷分享有趣实用的文章,希望大家多多支持,一起进步!

 🍅 个人主页:南木元元


目录

JS数据类型

3种转换类型

ToBoolean

ToString

ToNumber

对象转原始类型

隐式类型转换

结语


JS数据类型

首先我们需要知道,js中数据类型分为两大类:基本数据类型引用数据类型

7种基本数据类型分别是:

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol
  • BigInt

引用数据类型即对象Object,包含普通对象-Object,数组对象-Array,正则对象-RegExp,日期对象-Date,数学函数-Math,函数对象-Function。

3种转换类型

在JS中,类型转换只有三种情况:

  • 转换成布尔值
  • 转换成字符串
  • 转换成数字

数据类型转换的基本规则见下表:

ToBoolean

ToBoolean指其他类型转换为布尔类型的操作。

js中的假值只有0、-0、NaN、""、falsenullundefined,其它值转为布尔型都为true

console.log(Boolean(0)); // flase
console.log(Boolean(-0)); // flase
console.log(Boolean(NaN)); // flase
console.log(Boolean("")); // flase
console.log(Boolean(null)); // flase
console.log(Boolean(undefined)); // flase
console.log(Boolean(false)); // flase//其它所有值都转为true,包括所有对象
console.log(Boolean([])); //true
console.log(Boolean({})); //true
console.log(Boolean("0")); //true
console.log(Boolean(1)); //true

ToString

ToString指其他类型的值转换为字符串类型的操作。

转为字符串的规则:

  • null:转为"null"

  • undefined:转为"undefined"

  • Boolean类型:true转为"true",false转为"false"

  • Number类型:直接转换,如5转为"5"(不过那些极小和极大的数字会使用指数形式,如1e21转为"1e+21"

  • Symbol类型:直接转换(只允许显式强制类型转换,使用隐式强制类型转换会报错)

  • 数组:转为由逗号分隔的一系列数字组成的字符串 ,如[1,2]转为"1,2"

  • 普通对象:会调用Object.prototype.toString(),返回"[object Object]",如果对象有自己的 toString() 方法,字符串化时就会调用该方法并使用其返回值。

console.log(String(null)); //'null'
console.log(String(undefined)); //'undefined'
console.log(String(true)); //'true'
console.log(String(false)); //'false'
console.log(String(5)); //'5'
console.log(String(1e21)); //'1e+21'
console.log(String(Symbol("5"))); //"Symbol(5)"
console.log(String([1, 2]));  '1,2'
console.log(String({})); // '[object Object]'

ToNumber

ToNumber指其他类型转换为数字类型的操作。

转为数字的规则:

  • null:转为0
  • undefined:转为NaN
  • Boolean类型:true转为1,false转为 0
  • String类型:如果是纯数字形式,则转为对应的数字,空字符转为0,否则转为NaN
  • Symbol类型:不能转为数字,会报错
  • 对象:会先被转换为相应的基本类型值,如果返回的是非数字的基本类型值,则再遵循以上规则将其强制转换为数字。
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN
console.log(Number(true)); //1
console.log(Number(false)); // 0
console.log(Number("10")); //10
console.log(Number("")); //0
console.log(Number("10a")); //NaN
console.log(Number(Symbol("a"))); //TypeError: Cannot convert a Symbol value to a number
console.log(Number([])); // 0
console.log(Number(["1"])); // 1
console.log(Number({})); // NaN

对象转原始类型

上面提到了如果是对象,则会先被转为基本类型,那么这个过程到底是怎么样的?

其实,对象转原始类型,会调用内置的ToPrimitive方法,逻辑如下:

  1. 如果有Symbol.toPrimitive()方法,优先调用再返回
  2. 调用valueOf(),如果转换为原始类型,则返回
  3. 调用toString(),如果转换为原始类型,则返回
  4. 如果都没有返回原始类型,会报错

注意:Date是个例外,要先调用toString,再调用valueOf来转换

来看下面的几个例子:

1.有Symbol.toPrimitive()方法,优先调用返回。

var obj = {value: 3,valueOf() {return 4;},toString() {return '5'},[Symbol.toPrimitive]() {return 6}
}
console.log(obj + 1); // 输出7

2.toString 返回的不是基本类型值,valueOf 返回的基本类型值。

// toString 返回的不是基本类型值,valueOf 返回的基本类型值
var obj = {toString: function () {return {};},valueOf: function () {return null;},
};
console.log(String(obj)); // "null"

 3.valueOf和toString都没有返回原始类型,会报错。

// 先判断valueOf⽅法,再判断toString⽅法,返回的都不是基本类型值,报错
var obj = {valueOf: function () {return {};},toString: function () {return {};},
};
console.log(Number(obj)); // Uncaught TypeError: Cannot convert object to primitive value

隐式类型转换

在开发中,为什么建议大家使用===而不是==呢?

其实主要原因就是需要避免==所带来的隐式类型转换,下面就来看看js中有着很多坑的隐式转换。

JavaScript中的隐式类型转换主要发生在+、-、*、/以及==、>、<这些运算符之间。而这些运算符只能操作基本类型值,所以在进行这些运算前的第一步就是将两边的值用上面的ToPrimitive方法转换成基本类型,再进行操作。

不同操作符的隐式转换规则不同。

  • +操作符

两边有至少一个string类型变量时,两边的变量都会被隐式转换为字符串;其他情况下两边的变量都会被转换为数字。

1 + "23"; // '123'
1 + false; // 1
1 + Symbol(); // Uncaught TypeError: Cannot convert a Symbol value to a number
"1" + false; // '1false'
false + true; // 1
  •  -*\操作符

一律转换成数值后计算。

1 * "23"; // 23
1 * false; // 0
1 / "aa"; // NaN
  • <>比较符

两边都是字符串,则比较字母表顺序;其他情况下,转换为数字再比较。

"ca" < "bd"; // false
"a" < "b"; // true
"12" < 13; // true
false > -1; // true
  • ==操作符

==的隐式转换规则相对来说比较复杂,它的转换规则如下:

  1. 两边的类型是否相同,相同的话就比较值的大小
  2. 判断两边是否是null和undefined,是的话就返回true
  3. 判断的类型是否是String和Number,是的话,把String类型转换成Number,再进行比较
  4. 判断其中一方是否是Boolean,是的话就把Boolean转换成Number,再进行比较
  5. 如果其中一方为Object,且另一方为String、Number或者Symbol,会将Object转换成字符串,再进行比较

其实可以概括一下:两边的值都尽量转成Number

console.log(3 == true); //false
console.log("0" == false); //true
console.log("0" == 0); //true
console.log({ a: 1 } == true); //false
console.log({ a: 1 } == "[object Object]"); //true

了解了上面的规则后,来看下面几道经典的题。

1.[]==[]的结果是什么?为什么?

答案为false。

原因:==两边都是对象的话,仅当它们引用同一个对象时返回true。数组是引用数据类型,在创建两个不同的数组时,引用的是两个不同的对象,所以不同。

2.[] == ![]结果是什么?为什么?

答案为true。

原因:先算右边(!的优先级要大于==),右边的结果是布尔值,那么根据上面==的隐式转换规则4,两边都转换成数字然后进行比较。左边[]转换为数字为0。右边![] 首先是转换为布尔值,由于[]作为一个引用类型转换为布尔值为true,因此![]为false,进而在转换成数字,变为0。0 == 0 , 所以结果为true。

3.如何让if(a == 1 && a == 2)条件成立?

其实就是利用==的隐式类型转换以及对象转原始类型的过程。

var a = {value: 0,valueOf: function() {this.value++;return this.value;}
};
// 利用隐式类型转换,对象需要先转原始类型,再应用隐式类型转换规则
console.log(a == 1 && a == 2);//true

结语

🔥如果此文对你有帮助的话,欢迎💗关注、👍点赞、⭐收藏✍️评论支持一下博主~ 

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

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

相关文章

23.Oracle11g的UNDO表空间

Oracle的UNDO表空间 一、UNDO表空间概述1、什么是UNDO表空间2、UNDO表空间的作用2.1 提供一致性读2.2 回滚事务2.3 实例恢复 3、UNDO表空间的工作机制 二、UNDO表空间的相关操作1、UNDO表空间的创建2、UNDO表空间的管理 三、Oracle 11g中UNDO表空间的新特性1、UNDO表空间自动管…

token认证机制,基于JWT的Token认证机制实现,安全性的问题

文章目录 token认证机制几种常用的认证机制HTTP Basic AuthOAuthCookie AuthToken AuthToken Auth的优点 基于JWT的Token认证机制实现JWT的组成认证过程登录请求认证 对Token认证的五点认识JWT的JAVA实现 基于JWT的Token认证的安全问题确保验证过程的安全性如何防范XSS Attacks…

循环神经网络RNN

1. 背景 RNN(Recurrent Neural Networks) CNN利用输入中的空间几何结构信息&#xff1b;RNN利用输入数据的序列化特性。 2. SimpleRNN单元 传统多层感知机网络假设所有的输入数据之间相互独立&#xff0c;但这对于序列化数据是不成立的。RNN单元用隐藏状态或记忆引入这种依赖…

CSS特效022:小球抛物线效果

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

open3d-点云及其操作

open3d提供了一个专门用于点云的数据结构 PointCloud。 class PointCloud(Geometry3D):color # 颜色normals # 法向量points # 点云def __init__(self, *args, **kwargs):"""__init__(*args, **kwargs)Overloaded function.1. __init__(self: open3d.cpu.py…

数据探索:五款免费数据可视化工具概览

数据可视化是解读和传达数据的重要方式&#xff0c;而现在有许多免费的工具可供选择&#xff0c;让您在探索数据时更轻松、更有趣。以下是五款推荐的免费数据可视化工具&#xff1a; Tableau Public&#xff1a; Tableau Public是一款功能强大的可视化工具&#xff0c;能够创建…

宏定义中 ## 和 # 的作用

1. ## 的作用 ## 称为连接符&#xff0c;用来将宏参数或其他的串连接起来。 例1&#xff1a; > #define COMBIN(arg) my##arg则> COMBIN(abc)相当于 myabc 例2&#xff1a;#define CON1(a, b) a##e##b #define CON2(a, b) a##b##00 那么&#xff1a;printf("%f\…

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《基于分布鲁棒优化的广义共享储能容量配置方法》

这个标题涉及到储能系统的容量配置方法&#xff0c;具体而言&#xff0c;是一种基于分布鲁棒优化的广义共享储能容量配置方法。让我们逐步解读&#xff1a; 基于分布鲁棒优化&#xff1a; 这表明该方法采用了一种优化技术&#xff0c;即分布鲁棒优化。分布鲁棒优化通常是指在考…

大数据-之LibrA数据库系统告警处理(ALM-37016 MPPDBServer执行XLOG日志归档命令异常)

告警解释 当集群中的CN实例或者DN实例执行归档命令归档XLOG日志失败时&#xff0c;产生该告警。 在下次执行成功时告警自动恢复。 告警属性 告警ID 告警级别 可自动清除 37016 严重 是 告警参数 参数名称 参数含义 ServiceName 产生告警的服务名称 RoleName 产生…

c++ 执行系统命令

示例一&#xff1a; #include <cstdlib> // 必须包含这个头文件来使用system()int main() {system("sleep 10"); // 塞执行return 0; }程序会等待10秒后&#xff0c;执行完成使用system("sleep 10 &");可以实现非阻塞执行 示例二&#xff1a; …

11.29 C++ 作业

自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c; 定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出该矩形的周长和面积函数:void show() #include <io…

PHP:处理数据库查询数据

注&#xff1a; DB_num_rows($result5)可以替换为mysqli_num_rows($result5) DB_fetch_array($result5)可以替换为mysqli_fetch_assoc($result5) 一、查询单个数据 代码解析 1、SQL语句 查询表www_users中当userid等于变量$_SESSION[UserID]时的depart_code值 $sql &qu…

两台电脑如何快速传输几百G文件,这款文件传输软件真快

当我们需要传输数百GB的文件时&#xff0c;使用传统工具对于大型文件传输来说往往效率低下。这些方法可能需要数小时&#xff0c;甚至数天才能完成传输。然而&#xff0c;现代生活和工作中&#xff0c;我们经常需要以更快速、更高效的方式传输大文件&#xff0c;无论是因为工作…

第72讲:MySQL数据库锁机制剖析:行级锁、间隙锁与临键锁详解及应用指南

文章目录 1.行级锁的概念2.行锁的概念以及基本使用2.1.行锁的概念2.2.常见的SQL语句所对应的行锁类别2.3.行锁的基本使用 3.间隙锁和临键锁的概念以及基本使用3.1.间隙锁和临键锁的概念3.2.间隙锁和临键锁的基本使用 1.行级锁的概念 行级锁指的是&#xff0c;每次操作锁住的是…

11.兔子生崽问题【2023.11.26】

1.问题描述 有一对兔子&#xff0c;从出生后第3个月起每个月都生一对兔子&#xff0c;小兔子长到第三个月后每个月又生一对兔子&#xff0c;假如兔子都不死&#xff0c;问 第二十个月的兔子对数为多少对&#xff1f; 2.解决思路 3.代码实现 #include<stdio.h> int mai…

儿童绘本故事之乐小鱼的龙舟体验

《乐小鱼的龙舟体验》 Chapter 1: 破浪前行的盛宴在2023年11月26日的清晨&#xff0c;顺德迎来了一场震撼心灵的盛宴——中国龙舟大奖赛。湖面上&#xff0c;龙舟竞渡&#xff0c;破浪前行&#xff0c;为这座城市注入了一份激情的节奏。On the morning of November 26, 2023, …

揭秘近期CSGO市场小幅回暖的真正原因

揭秘近期CSGO市场小幅回暖的真正原因 最近市场小幅度回暖&#xff0c;第一个原因则是到处都在说buff要开租赁了&#xff0c;市场要开始爆燃了。童话听到这些消息实在是绷不住了&#xff0c;出来给大家讲一下自己的看法&#xff0c;大家理性思考一下。 Buff出不出租赁跟市场燃不…

MacBook续命,XCode硬盘占用问题

MacBook续命&#xff0c;XCode硬盘占用问题 参考资料 xcode由于真机运行的时候需要把真机的配置拷贝到 &#xff5e;/Library/Developer/Xcode/iOS\ DeviceSupport 这个文件夹下&#xff0c;这样运行一段时间之后&#xff0c;这个文件夹就大到占满了存储空间&#xff0c;之后…

Structured Streaming的模型介绍与实际操作

微批处理&#xff08;Micro-Batching&#xff09; 微批处理是 Structured Streaming 默认的处理模型。 微批处理 (Micro-batching): 在微批处理模型中&#xff0c;实时数据流被分割成小的批次。这些批次按顺序处理&#xff0c;每个批次处理像一个小的批处理作业。处理完一个…

恋上数据结构与算法之二叉堆

文章目录 需求分析Top K 问题堆堆的基本接口设计二叉堆(Binary Heap)最大堆添加思路交换位置的优化实现 删除思路流程图解实现 replace批量建堆自上而下的上滤自下而上的下滤效率对比复杂度计算实现 完整代码 最小堆比较器解析Top K 问题问题分析代码实现内部方法分析问题 2 堆…