JS的隐式转换

1.什么是JS的隐式转换

JavaScript中的隐式转换是指在运行过程中,代码自动将一个数据类型转换为另一个数据类型,而无需显式地调用转换函数。

原因

JavaScript是弱类型语言,这意味着它不像Java,C++一样的强类型语言有预先确定的类型。
并且变量的类型是由值的类型来决定的,这导致了一个问题,一个变量可能上一步骤操作中还是String,下一步操作可能立刻变为了Object,为了解决不同类型无法进行计算,JS底层会将不同类型转换为同一类型,由JS运行环境自动帮我们去做的类型转换

2.发生情况

JavaScript 中的隐式类型转换主要发生在 +  -  *    /以及==、>、<这些运算符之间。

运算符两端的数据类型不一致,会触发隐式转换

例子

1 + '23' // '123'
1 + false // 1 
1 + Symbol() // Uncaught TypeError: Cannot convert a Symbol value to a number
'1' + false // '1false'
false + true // 1true == 1  // true 
true == '2'  // false, 
true == ['1']  // true
true == ['2']  // falseconsole.log("11" > 10) // true

3.隐式转换规则

首先要介绍ToPrimitive方法,这是 JavaScript 中每个值隐含的自带的方法,用来将值 (无论是基本类型值还是对象)转换为基本类型值。如果值为基本类型,则直接返回值本身;如果值为对象,其看起来大概是这样:

ToPrimitive(obj,type)

type的值为number或者string

(1)当typenumber时规则如下:obj

  • 调用的valueOf方法,如果为原始值,则返回,否则下一步;
  • 调用obj的toString方法,后续同上;
  • 抛出TypeError异常。

(2)当typestring时规则如下:

  • 调用obj的toString方法,如果为原始值,则返回,否则下一步;
  • 调用obj的valueOf方法,后续同上;
  • 抛出TypeError 异常。

可以看出两者的主要区别在于调用toStringvalueOf的先后顺序。默认情况下:

  • 如果对象为 Date 对象,则type默认为String;
  • 其他情况下,type默认为number.

总结上面的规则,对于 Date 以外的对象,转换为基本类型的大概规则可以概括为一个函数:

var objToNumber = value => Number(value.valueOf().toString())
objToNumber([ ]) === 0
objToNumber({ }) === NaN

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

以下是基本类型的值在不同操作符的情况下隐式转换的规则 (对于对象,其会被ToPrimitive转换成基本类型,所以最终还是要应用基本类型转换规则):

+ 操作符 +

当一侧为 string 类型,被识别为字符串拼接,并会优先将另一侧转换为字符串类型。
当一侧为 Number 类型,另一侧为原始类型,则将原始类型转换为Number 类型。
当一侧为 Number 类型,另一侧为引用类型,将引用类型和 Number 类型转换成字符串后拼接。

1 + '23' // '123'
1 + false // 1 
1 + Symbol() // Uncaught TypeError: Cannot convert a Symbol value to a number
'1' + false // '1false'
false + true // 1
123 + '123' // 123123   
123 + null  // 123    
123 + true // 124    
123 + {}  // 123[object Object]    

-  *  /  操作符  -  *  /  

我们在对各种非Number类型运用数学运算符(- * /)时,会先将非Number类型转换为Number类型。

1 * '23' // 23
1 * false // 0
1 / 'aa' // NaN
1 - true // 0, 首先把 true 转换为数字 1, 然后执行 1 - 1
1 - null // 1,  首先把 null 转换为数字 0, 然后执行 1 - 0
1 * undefined //  NaN, undefined 转换为数字是 NaN
2 * ['5'] //  10, ['5']首先会变成 '5', 然后再变成数字 5

== 操作符 ==

操作符两边的值都尽量转成number

3 == true // false, 3 转为number为3,true转为number为1
'0' == false //true, '0'转为number为0,false转为number为0
'0' == 0 // '0'转为number为0
NaN == NaN // false NaN和其他任何类型比较永远返回false
true == 1  // true 
true == '2'  // false, 先把 true 变成 1,而不是把 '2' 变成 true
true == ['1']  // true, 先把 true 变成 1, ['1']拆箱成 '1', 再参考规则3
true == ['2']  // false, 同上
undefined == false // false ,首先 false 变成 0,然后参考规则4
null == false // false,同上
123 == '123' // true, '123' 会先变成 123
'' == 0 // true, '' 会首先变成 0
null == undefined // true
null == '' // false
null == 0 // false
null == false // false
undefined == '' // false
undefined == 0 // false
'[object Object]' == {} 
// true, 对象和字符串比较,对象通过 toString 得到一个基本类型值
'1,2,3' == [1, 2, 3] 
// true, 同上  [1, 2, 3]通过 toString 得到一个基本类型值

> < 比较符  > <

如果两边都是字符串,则比较字母表顺序:

'ca' < 'bd' // false
'a' < 'b' // true

其他情况下,转换为数字再比较:

'12' < 13 // true
false > -1 // true

以上说的是基本类型的隐式转换,而对象会被ToPrimitive转换为基本类型再进行转换:

var a = {}
a > 2 // false
a.valueOf() // {}, 上面提到过,ToPrimitive默认type为number
所以先valueOf,结果还是个对象,下一步
a.toString() // "[object Object]",现在是一个字符串了
Number(a.toString()) // NaN,根据上面 < 和 > 操作符的规则,要转换成数字
NaN > 2 //false,得出比较结果var a = {name:'Jack'}
var b = {age: 18}
a + b // "[object Object][object Object]"a.valueOf() // {},上面提到过,ToPrimitive默认type为number,所以先valueOf,结果还是个对象,下一步
a.toString() // "[object Object]"
b.valueOf() // 同理
b.toString() // "[object Object]"
a + b // "[object Object][object Object]"

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

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

相关文章

离线安装pip包

文章目录 离线机器安装需要的python包 离线机器安装需要的python包 本机做一台和实际的生产机器相同环境的虚拟机 在本机环境下下载离线包 pip3 download gunicorn -d /usr/local/gunicorn-package -i https://pypi.tuna.tsinghua.edu.cn/simple 将gunicorn-package下的文件…

【088】基于SpringBoot+Vue实现高校就业管理系统

系统介绍 基于SpringBootVue实现的高校就业管理系统 课程设计 大作业必备 基于SpringBootVue实现高校就业管理系统采用前后端分离的架构方式&#xff0c;系统分为管理员、企业、辅导员、学生四种角色&#xff0c;实现了用户登录、学生注册、商家注册、首页统计、个人信息管理、…

动手学深度学习(Pytorch版)代码实践 -注意力机制-Transformer

68Transformer 1. PositionWiseFFN 基于位置的前馈网络 原理&#xff1a;这是一个应用于每个位置的前馈神经网络。它使用相同的多层感知机&#xff08;MLP&#xff09;对序列中的每个位置独立进行变换。作用&#xff1a;对输入序列的每个位置独立地进行非线性变换&#xff0c…

备份及恢复Sonarqube服务数据

基础数据&#xff1a; 源数据机ip&#xff1a;192.*.53 测试机ip&#xff1a;192.*.65 Sonarqube访问地址&#xff1a;http://192.*.65:9000/ 账户名&#xff1a;admin 密码&#xff1a;123456 数据库postgres&#xff1a; 版本&#xff1a;PostgreSQL 15.3 一、数据备份…

AI写歌词,为你的音乐之旅添彩

在追求音乐梦想的道路上&#xff0c;每一个音符都承载着我们的情感与故事。而精彩的歌词&#xff0c;更是让这些音符焕发出耀眼光芒的关键。如今&#xff0c;AI 写词的出现&#xff0c;为我们的音乐之旅增添了绚丽的色彩。 “妙笔生词智能写歌词软件&#xff08;veve522&#…

JAVA自定义注释

interface 声明 package test; public interface InProgress { } InProgress public void calculateInterest(float amount, float rate) { } 带成员 public interface TODO {String value(); } InProgress //只有成员变量名有value时&#xff0c;值有给value赋值时可以这…

Spring Cloud Eureka

引入&#xff1a;远程调用时&#xff0c;url是写死的 String url "http://127.0.0.1:9090/product/" orderInfo.getProductId(); 解决思路&#xff1a; 比如&#xff08;医院&#xff0c;学校等&#xff09;机构的电话号码发生变化&#xff0c;就需要通知各个使⽤…

基于深度学习的问答系统

基于深度学习的问答系统是一种利用深度学习技术从文本数据中提取信息并回答用户提出的问题的技术。它在智能助手、客服系统、教育和医疗等领域有广泛应用。以下是对这一领域的系统介绍&#xff1a; 1. 任务和目标 问答系统的主要任务和目标包括&#xff1a; 信息检索&#x…

Android14系统应用统一裁剪方案

Android14系统应用统一裁剪方案 背景 当前移除集成到系统里的应用,一般都是根据应用名,到各个mk文件里逐个在PRODUCT_PACKAGES中删除;这种方法,耗时而且不易管理集成到系统里的应用;需要有一个统一管理删除不需要应用的方案。 方案 参考PRODUCT_PACKAGES变量,添加PRO…

【PyTorch单点知识】自动求导机制的原理与实践

文章目录 0. 前言1. 自动求导的基本原理2. PyTorch中的自动求导2.1 创建计算图2.2 反向传播2.3 反向传播详解2.4 梯度清零2.5 定制自动求导 3. 代码实例&#xff1a;线性回归的自动求导4. 结论 0. 前言 按照国际惯例&#xff0c;首先声明&#xff1a;本文只是我自己学习的理解&…

游戏的无边框模式是什么?有啥用?

现在很多游戏的显示设置中&#xff0c;都有个比较特殊的选项“无边框”。小伙伴们如果尝试过&#xff0c;就会发现这个效果和全屏几乎一毛一样&#xff0c;于是就很欢快地用了起来&#xff0c;不过大家也许会发现&#xff0c;怎么和全屏比起来&#xff0c;似乎有点不够爽快&…

渲染引擎实践 - OSG引擎渲染一帧的过程

一&#xff1a;概述 经过前面两节的介绍&#xff0c;我们已经创建了窗口(OSG引擎窗口)和启动了渲染线程(OSG渲染线程)。当应用程序加载好模型数据以后&#xff0c;就开始正式的渲染了&#xff0c;那么本节分析下渲染一帧的过程&#xff0c;本文尽量做到简单&#xff0c;清晰&am…

uniapp编译成h5后接口请求参数变成[object object]

问题&#xff1a;uniapp编译成h5后接口请求参数变成[object object] 但是运行在开发者工具上没有一点问题 排查&#xff1a; 1&#xff1a;请求参数&#xff1a;看是否是在请求前就已经变成了[object object]了 结果&#xff1a; 一切正常 2&#xff1a;请求头&#xff1a;看…

AST反混淆实战:提升JavaScript代码的可读性与调试便利性

博客标题&#xff1a;AST反混淆&#xff1a;提升JavaScript代码的可读性与调试便利性 引言 JavaScript代码混淆是一种常见的保护源码的方法&#xff0c;但这也给代码的维护和调试带来了不小的挑战。抽象语法树&#xff08;AST&#xff09;提供了一种结构化的方式来分析和转换…

C语言实现数据结构B树

B树&#xff08;B-Tree&#xff09;是一种自平衡的树数据结构&#xff0c;它维护着数据的有序性&#xff0c;并允许搜索、顺序访问、插入、删除等操作都在对数时间内完成。B树广泛用于数据库和操作系统的文件系统中。 B树的基本特性 根节点&#xff1a;根节点至少有两个子节点…

平安好车主:“保”你车平安,“养”出好生活~

“小朋友 你是否有很多问号,为什么......”从出生到长大,不论我们身居何处,年岁几何,妈妈似乎总有嘱咐不完的话。小时候,总不能理解妈妈的话,只想摆脱唠叨,期盼快快长大。 如今,我们羽翼渐丰,已能驾驭人生,肩负起家庭的重任,但妈妈的话却依然从未落下。不过,此刻的我们,不仅能…

Gitea 仓库事件触发Jenkins远程构建

文章目录 引言I Gitea 仓库事件触发Jenkins远程构建1.1 Jenkins配置1.2 Gitea 配置引言 应用场景:项目部署 I Gitea 仓库事件触发Jenkins远程构建 Gitea支持用于仓库事件的Webhooks 1.1 Jenkins配置 高版本Jenkins需要关闭跨域限制和开启匿名用户访问 在Jenkins启动前加入…

Windows 32 汇编笔记(二):使用 MASM

一、Win32 汇编源程序的结构 ; Hello.asm ; 使用 Win32 ASM 写的 Hello, world 程序 ;>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>…

STM32入门开发操作记录(一)——新建工程

目录 一、课程准备1. 课程资料2. 配件清单3. 根目录 二、环境搭建三、新建工程1. 载入器件支持包2. 添加模块3. ST配置4. 外观设置5. 主函数文件 一、课程准备 1. 课程资料 本记录操作流程参考自b站视频BV1th411z7snSTM32入门教程-2023版 细致讲解 中文字幕&#xff0c;课程资…

柯桥韩语培训韩语学习力职场口语韩语中的职场黑话你知道几个?

生活中比较常用的&#xff0c;与职场生活有关的新造词有상사병, 직장살이, 무두절(無頭節)等。一起来看下他们的意思吧... 상사병 상사병是指因为上司多变不定的指示而火大的意思。 직장살이 직장살이用来比喻职场生活也需要看上司的脸色&#xff0c;就像在婆家看婆婆脸色一样…