当前位置: 首页 > news >正文

JavaScript:隐式转换、显示转换、隐式操作、显示操作

一、理解js隐式转换

JavaScript 中的隐式转换是指不需要显式地调用转换函数,而是在执行期间自动发生的数据类型的转换。即在使用不同类型的值进行操作时,JavaScript会自动进行类型转换。这种转换通常发生在不同数据类型之间进行运算或比较时。

序号分类
1字符串与数字之间的转换
当使用加号(+)运算符将字符串和数字进行拼接时,JavaScript会将数字转换为字符串类型,实现字符串与数字的拼接。
2将字符串转换为数字
当使用减号(-)运算符时,JavaScript会将字符串转换成数字类型进行运算。
3布尔值与数字之间的转换
当使用布尔值和数字进行运算时,JavaScript会将布尔值转换成数字类型,true 转换为 1,false 转换为 0。
4对象和原始值之间的转换
当使用对象和原始值进行运算时,JavaScript会自动将对象转换成原始值类型,例如将对象转换成字符串时会调用对象的 toString() 方法。
5隐式转换为布尔值
当判断条件中使用非布尔值时,JavaScript会将其转换成布尔值,例如将数字 0、空字符串、null、undefined、NaN等转换为 false,其它值都转换为 true。
序号类型实例
1字符串与数字的相加(隐式转换成字符串)"1" + 2 // "12"
2字符串与布尔值的相加(隐式转换成字符串)"true" + true // "truetrue"
3数字与布尔值的相加(隐式转换成数字)1 + true // 2
4数组与字符串的相加(隐式转换成字符串)[1, 2, 3] + "hello" // "1,2,3hello"
5数字与字符串的比较(隐式转换成数字)"1" > 2 // false
"1" < 2 // true
6布尔值与数字的相乘(隐式转换成数字)
布尔值与数字的相加(隐式转换成数字)
true * 2 // 2
true + 1 // 2
7对象与布尔值的比较(隐式转换成布尔值)if ({}) {
  // 这里的代码会执行
}
8数字类型作为条件转换为布尔值(隐式转换成布尔值)var num = 0;
if (num) {
  console.log("num is true"); // 不会执行到这
}
9undefined和null的转换
将undefined转为数字类型时,结果为NaN
将null转为数字类型时,结果为0
将undefined和null转为布尔类型时,结果均为false
Number(undefined) // NaN
Number(null) // 0
Boolean(undefined) // false
Boolean(null) // false
10字符串与数字加、减、乘、除"10" + 1 // "101"
"10" - 1 // 9
"10" * 2 // 20
"10" / 2 // 5
"10" / "two" // NaN
11当一个对象参与加法运算时,会自动调用对象的 valueOf() 方法或 toString() 方法将对象转换成字符串或数字

1、如果对象具有 valueOf() 方法,则 JavaScript 将首先调用该方法。valueOf() 方法返回对象的原始值,通常是一个数字或布尔值。

2、如果对象没有 valueOf() 方法,或者 valueOf() 方法返回一个非原始值,则 JavaScript 将尝试调用对象的 toString() 方法。toString() 方法返回一个表示对象的字符串。

3、如果对象没有 valueOf() 方法和 toString() 方法,或者两个方法都返回一个非原始值,则 JavaScript 将抛出一个类型错误(TypeError)。

let obj = {valueOf: function() { return 42; },toString: function() { return "42"; }
}console.log(obj + 1); // 43let obj2 = {toString: function() { return "2"; }
}console.log(obj2 * 3); // 6let obj3 = {}console.log(obj3 + "hello"); // [object Object]hello

JavaScript 中的隐式转换有时可能会导致出乎意料、不符合预期的结果,特别是当开发人员不熟悉隐式转换规则时。因此,在编写 JavaScript 代码时,需要对隐式转换进行充分的理解和考虑。同时,为了避免因类型转换造成的不必要的麻烦,例如在使用“==”或“!=”进行比较时,会进行隐式转换,应该尽可能的使用严格相等(“===”或“!==”)操作符进行比较。在编写代码时应尽量避免隐式转换,而是显式地进行类型转换。

二、理解js显式转换

在 JavaScript 中,显式转换是指通过代码的明确操作将一个数据类型转换为另一个数据类型。

序号方法解释
1parseInt()将字符串转换为数字
parseInt() 函数用于将整数字符串转换为整数
parseFloat() 函数用于将浮点数字符串转换为浮点数
如果无法转换,则返回 NaN。
2parseFloat()
3Number()将字符串、布尔值、undefined 和 null 转换为数字
4String()将数值、布尔值、对象、数组、null 和 undefined 转换为字符串
5Boolean()函数将任何类型的值转换为布尔值。其中,只有 null、undefined、false、空字符串和数字 0 被转换为 false,其他所有值都被转换为 true
6操作符(+、-、*、/)将数值字符串和布尔值转换为数字
7Object()函数将基本类型的数据转换为对应的对象类型。

显式转换在编程时非常常见,可以使程序更加明确和可读。但是要注意,如果显式转换不当,也可能会在程序运行时产生错误。因此,在进行显式转换时,要仔细考虑转换的类型和转换的方式,以避免潜在的错误。

三、理解js隐式操作

在 JavaScript 中,有很多隐式操作,这些操作是指在执行时自动发生,而不需要显示的操作(即不需要明确调用的操作)。

序号方法解释
1隐式类型转换在进行运算或比较时,JavaScript 会自动将不同类型的值转换成同一类型进行操作。例如,字符串和数字进行运算时,JavaScript 会将字符串转换成数字。
2隐式原型链当使用对象的属性时,如果该属性不在该对象的属性列表中,JavaScript 会沿着原型链向上查找该属性。这是一个自动发生的过程,称为隐式原型链。
3隐式闭包当一个函数内部引用了外部的变量时,JavaScript 会自动创建一个闭包。这个闭包会将被引用的变量保存在内存中,直到该闭包被销毁。
4隐式对象创建当使用对象字面量或 new 关键字创建对象时,JavaScript 会自动为该对象创建一个原型对象。
5隐式函数调用当使用函数调用时,如果函数的调用方式不是以对象方法的形式调用,那么调用的函数会成为全局对象的一个方法,此时 this 指向全局对象。
6变量提升在JavaScript中,变量和函数的声明会在代码执行前进行“提升”,即将声明提前执行,使得在声明之前就可以使用这些变量或函数。
7this关键字this关键字在不同的上下文中会有不同的值,例如在函数内部指向函数的执行上下文,而在对象方法中指向该对象。
8隐式迭代JS中的数组和对象都可以进行迭代操作,例如使用for-in和for-of循环来遍历对象和数组。
9隐式全局变量如果在函数中没有使用var或let关键字,则会隐式创建一个全局变量。
10隐式递归某些函数会在函数内部调用自身来实现递归操作,这种递归操作是隐式的。

四、理解js显式操作

在 JavaScript 中,显式操作是指通过代码的明确操作来实现某种操作或实现某种行为。

序号方法解释
1赋值操作符(=)将一个值赋给一个变量。
2数学操作符(+、-、*、/、%)用于数学计算,例如将两个数字相加或相乘等。
3比较操作符(>、<、>=、<=、==、!=)用于比较两个值的大小或相等性。
4逻辑操作符(&&、||、!)用于逻辑计算,例如判断两个条件是否同时成立、或者取反一个值等。
5条件操作符(?:)用于根据条件返回不同的值。
6函数调用使用函数名称和参数列表来调用一个函数。

通过显式操作,我们可以方便地控制程序运行的过程,实现我们想要的功能。同时,显式操作也常常被用来进行数据类型转换、类型检查等操作,进一步增强程序的健壮性和可维护性。

五、欢迎交流指正。

参考链接

JavaScript中的隐形转换

JS的隐式转换与显式转换_js隐式转换和显式转换_厉飞雨123的博客-CSDN博客

一文带你了解JavaScript的隐式类型转换_javascript隐式转换_ajaxsync的博客-CSDN博客

相关文章:

JavaScript:隐式转换、显示转换、隐式操作、显示操作

一、理解js隐式转换 JavaScript 中的隐式转换是指不需要显式地调用转换函数&#xff0c;而是在执行期间自动发生的数据类型的转换。即在使用不同类型的值进行操作时&#xff0c;JavaScript会自动进行类型转换。这种转换通常发生在不同数据类型之间进行运算或比较时。 序号分类…...

2023全新TwoNav开源网址导航系统源码 | 去授权版

2023全新TwoNav开源网址导航系统源码 已过授权 所有功能可用 测试环境&#xff1a;NginxPHP7.4MySQL5.6 一款开源的书签导航管理程序&#xff0c;界面简洁&#xff0c;安装简单&#xff0c;使用方便&#xff0c;基础功能免费。 TwoNav可帮助你将浏览器书签集中式管理&#…...

Android 12 源码分析 —— 应用层 六(StatusBar的UI创建和初始化)

Android 12 源码分析 —— 应用层 六&#xff08;StatusBar的UI创建和初始化) 在前面的文章中,我们分别介绍了Layout整体布局,以及StatusBar类的初始化.前者介绍了整体上面的布局,后者介绍了三大窗口的创建的入口处,以及需要做的准备工作.现在我们分别来细化三大窗口的UI创建和…...

华为云ROMA Connect亮相Gartner®全球应用创新及商业解决方案峰会,助力企业应用集成和数字化转型

9月13日-9月14日 Gartner全球应用创新及商业解决方案峰会在伦敦举行 本届峰会以“重塑软件交付&#xff0c;驱动业务价值”为主题&#xff0c;全球1000多位业内专家交流最新的企业应用、软件工程、解决方案架构、集成与自动化、API等企业IT战略和新兴技术热门话题。 9月13日…...

虚拟线上发布会带来颠覆性新体验,3D虚拟场景直播迸发品牌新动能

虚拟线上发布会是近年来在数字化营销领域备受关注的形式&#xff0c;而随着虚拟现实技术的不断进步&#xff0c;3D虚拟场景直播更成为了品牌宣传、推广的新选择。可以说&#xff0c;虚拟线上发布会正在以其颠覆性的新体验&#xff0c;为品牌带来全新的活力。 1.突破时空限制&am…...

Linux arm64 pte相关宏

文章目录 一、pte 和 pfn1.1 pte_pfn1.2 pfn_pte 二、其他宏参考资料 一、pte 和 pfn // linux-5.4.18/arch/arm64/include/asm/pgtable.h#define pte_pfn(pte) (__pte_to_phys(pte) >> PAGE_SHIFT) #define pfn_pte(pfn,prot) \__pte(__phys_to_pte_val((phys_addr_t)…...

MVCC:多版本并发控制案例分析(一)

&#xff08;笔记总结自b站马士兵教育课程&#xff09; 一、简介 MVCC&#xff1a;全称multi-version Concurency control&#xff0c;多版本并发控制&#xff0c;是为了解决并发读写问题存在的。MVCC的实现原理由三部分组成&#xff1a;隐藏字段、undolog、readview。 二、概…...

以数据为中心的安全市场快速增长

根据Adroit Market Research的数据&#xff0c;2021年全球以数据为中心的安全市场规模估计为27.6亿美元&#xff0c;预计到2030年将增长至393.48亿美元&#xff0c;2021年至2030年的复合年增长率为30.9%。 研究人员表示&#xff0c;以数据为中心的安全强调保护数据本身&#x…...

AUTOSAR汽车电子嵌入式编程精讲300篇-经典 AUTOSAR 安全防御能力的分析及改善(下)

目录 4.4.2 Security 攻击 4.4.3 Security 要求 4.4.4 SDSA 有效性验证 经典 AUTOSAR 安全防御能力分析...

AI绘图提示词Stable Diffusion Prompt 笔记

基础 提示词分为正向提示词&#xff08;positive prompt&#xff09;和反向提示词&#xff08;negative prompt&#xff09;&#xff0c;用来告诉AI哪些需要&#xff0c;哪些不需要词缀的权重默认值都是1&#xff0c;从左到右依次减弱&#xff0c;权重会影响画面生成结果。AI …...

xml元素值需要保留space

XmlReaderSettings.IgnoreWhitespace 属性 如果忽略空白&#xff0c;则为 true&#xff1b;否则为 false。 默认值为 false。 示例 下面创建一个设置对象&#xff0c;该对象可用于构造一个读取器&#xff0c;该读取器去除处理指令、注释和微不足道的空白。 StreamReader tex…...

Eclipse开源代码下载

当前插件开发&#xff0c;需要修改eclipse源码&#xff0c;如需要修改remote相关的代码&#xff0c;所以需要下载相关源码。网上大多资料都说的不清不楚的&#xff0c;也可能我太小白&#xff0c;不明白&#xff0c;反正就是折腾了一两天才感觉有点思路&#xff0c;改如何找源码…...

python多线程、进程

1、 并行和并发 &#xff08;1&#xff09;并发&#xff1a;一定周期内&#xff0c;多个任务来回切换执行&#xff0c;宏观上形成“该周期内有多个任务在同时进行”&#xff1b;但同一时间点&#xff0c;只有一个任务在执行。 举例&#xff1a; 你想在2小时内同时完成做饭、扫…...

Vue基础之模板语法介绍

前言 上篇我分享了关于Vue的入门&#xff0c;简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。 一、插值 1.1、文本 1.2、html 1.3、属性 1.4、class、style绑定 1.5、表达式 在Vue的模板语法中&#xff0c;插值是一种常用的方式来动态地将数据渲染到视图中。Vue使用双…...

【SLAM】 前端-视觉里程计之特征点

前端-视觉里程计之特征点 参考资料&#xff1a; 以不变应万变&#xff1a;前端-视觉里程计之特征点 视觉SLAM——特征点法 task05 本次了解了特征点是由关键子和描述子组成&#xff0c;并且对比了SIFT、SURF等七种获取特征点的方法&#xff0c;同时对比了SIFT、SURF和ORB方法…...

Android笔记(二十九):利用python自动生成多语言

背景 项目需要支持十几种多语言&#xff0c;而且每个版本的新功能ui都有很多地方需要多语言&#xff0c;如果手动添加非常耗时&#xff0c;于是设计了一个python脚本&#xff0c;通过excel表格转化多语言到项目values/strings文件内 步骤 android工程项目结构 脚本位于langu…...

【C++STL基础入门】list的运算符重载和关于list的算法

文章目录 前言一、list运算符1.1 逻辑运算符1.2 赋值运算符 二、list相关算法2.1 查找函数总结 前言 C标准模板库&#xff08;STL&#xff09;是一组强大而灵活的工具&#xff0c;用于处理数据结构和算法。其中&#xff0c;std::list是STL中的一个重要容器&#xff0c;它实现了…...

查找内轮廓(孔洞)

一 说明 findContours( InputOutputArray image, OutputArrayOfArrays contours,OutputArray hierarchy, int mode,int method, Point offset=Point());参数列表中有个数据结构参数:hierarchy(译层次结构),hierarchy是一个向量,其元素个数与查找到的轮廓总数相同,每一个…...

Git(6)——GitHub

目录 一、简介 二、概要 三、注册 ​四、创建仓库 五、推送本地代码 六、拉取远端代码 一、简介 在Git&#xff08;5&#xff09;中&#xff0c;我们已经对Git分支的概念和用法有了一定了解&#xff0c;对于在本地进行代码版本管理&#xff0c;其实当前所学的东西基本已经…...

【RocketMQ专题】快速实战及集群架构原理详解

目录 课程内容一、MQ简介基本介绍*作用&#xff08;解决什么问题&#xff09; 二、RocketMQ产品特点2.1 RocketMQ介绍2.2 RocketMQ特点2.3 RocketMQ的运行架构 三、RocketMQ快速实战3.1 快速搭建RocketMQ服务3.2 快速实现消息收发3.3 搭建Maven客户端项目3.4 搭建RocketMQ可视化…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

sshd代码修改banner

sshd服务连接之后会收到字符串&#xff1a; SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢&#xff1f; 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...