代码编织梦想

JS隐式转换与类型比较

隐式转换

隐式转换(Implicit Conversion)是指在表达式求值或操作中自动发生的类型转换。当使用不同的数据类型进行操作时,JavaScript 会自动进行类型转换以满足操作的要求。

隐式转换在编写逻辑时经常会出现,特别是在需要进行判断的逻辑场景中。举个例子:

// 字符串和数字
var num = 42;
var str = "The answer is " + num; // 字符串拼接
console.log(str); // 输出 "The answer is 42"
var result = "3" - "1"; // 数字运算
console.log(result); // 输出 2

// 布尔值
if (1) {
console.log("条件为真"); // 1 被隐式转换为 true
}
var bool = !0; // 数字 0 被隐式转换为 false
console.log(bool); // 输出 false

需要注意的是,隐式转换虽然可以简化代码编写,但有时也可能导致意外的行为和错误。因此,当涉及类型转换时,建议使用显式转换(如 Number()、String()、parseInt() 等)来明确表达意图,使代码更加可读和可维护。

类型比较

一、基本数据类型的比较(String/Number/Boolean/undefined/null)

  • 第一步,将当前的变量值转换为Number类型的值
  • 第二步,将转换后的变量值进行比较
'23' == 23; // -> 23 == 23 -> true
'0' == false; // -> 0 == 0 -> true
'0' == undefined; // -> 0 == NaN -> false
'asd' == null; // -> NaN == NaN -> false

需要注意的是,不能转换为数字的值 / undefined / null最终都会变成NaN,而NaN是不等于任何值的,包括它自己。

二、引用数据类型的比较(Object/Array)

此类数据类型的比较通常是判断指针的地址是否指向同一片内存空间,如果是的话则会返回true。

const arr = [1, [2, 3], 4];
const copy1 = arr[1];
const copy2 = arr[1];
const copy3 = [2, 3];

copy1 == copy2; // true
copy1 == copy3; // false

三、基本数据类型和引用数据类型之间的比较

  • 第一步:将引用数据类型的数据转换
  • 第二步:将转换后的数据与基本数据类型进行比较

在第一步中,会先调用引用数据类型变量的valueOf方法,期待返回一个标量,如果没有返回标量,则继续执行数据的toString方法。将执行toString方法后得到的返回值与基本数据类型变量进行比较。

const arr = [1];
arr == 1; // 猜测一下返回什么
// 调用valueOf方法,期待返回标量
arr.valueOf(); // [1]
// 返回的不是标量,继续执行toString方法,获取返回值
arr.toString(); // '1'

// 最后的比较就变成了如下
// 相当于变成了基本数据类型的比较
'1' == 1; // -> 1 == 1 -> true

再来深入理解一下

const arr = [0];
arr == false;

arr.valueOf(); // [0]
arr.toString(); // '0'

'0' == false; // -> 0 == 0 -> true 

再使用对象试试

const obj = { a: 1 };
obj == true;

obj.valueOf(); // { a: 1 }
obj.toString(); // '[object Object]'

// 最后的比较变成了如下代码
'[object Object]' == true; // -> NaN == 1 -> false

当然,如果对象返回了标量,结局就不同了。

const obj = {
  a: 1,
  valueOf: () => 32
};
obj == '32';

// 返回了标量32,不再执行toString方法
obj.valueOf(); // 32

// 最后的比较变成了如下代码
32 == '32'; // -> 32 == 32 -> true

至此,是不是理解的更深了,领悟了以后面对各种类型判断都无需紧张了!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/GonTinyBlack/article/details/131006458

java阶段三day04-爱代码爱编程

Java阶段三Day04 文章目录 Java阶段三Day04Vue框架Vue框架概述如何引入vue.jsVue框架的HelloWorldVue框架执行原理 基本指令文本相关指令属性绑定和双向绑定事件绑

基于vue-cli配置lib-flexible + rem实现移动端自适应-爱代码爱编程

基于vue-cli配置lib-flexible + rem实现移动端自适应 一、前言:二、实现步骤:1. 安装 lib-flexible 插件2. 在 main.js 入口文件中引入 lib-flexible3

vue 获取url地址的参数-爱代码爱编程

  url是一个 URL地址,我们在使用 vue的时候,经常需要获取 url的参数,获取方法有很多种,这里我只介绍一种获取 url参数的方法,那就是使用 Requests. urlset. newContext ()方法。 这个方法就是调用 requests. urlset. newContext ()方法来获取 url的参数。在这个方法中,我们需要

【无标题】-爱代码爱编程

要创建一个Vue 3项目,需要先安装Node.js和Vue CLI。步骤如下: 安装Node.js:从Node.js官网下载安装包,安装过程中一直按照默认选项即可。(可以参考博主这篇文章配置node环境) 安装Vue

【华为od机试真题2023b卷 java&js】阿里巴巴找黄金宝箱(v)_一贫如洗的樵夫阿里巴巴,javascript-爱代码爱编程

华为OD2023(B卷)机试题库全覆盖,刷题指南点这里 阿里巴巴找黄金宝箱(V) 知识点数组哈希表滑窗  时间限制:1s 空间限制:256MB 限定语言:不限 题目描述: 一贫如洗的樵夫阿里巴巴在去砍柴的路上,无意中发现了强盗集团的藏宝地,藏宝地有编号从0~N的箱子,每个箱子上面贴有一个数字。 阿里巴巴念出一个咒语数

vue-爱代码爱编程

效果图  kindeditor 引入     一、去官网下载 kindeditor 包  官方链接            二、在vue里的static文件夹下 创建一个 文件夹名字叫 kindeditor, 把下载好的文件放在这里  三、在 公共组件 components 下 创建kindeditor.vue 文件 <

vue中组件的几个重要点_vue什么时候组件名要加单引号-爱代码爱编程

1 单词命名组件名称 vue推荐的命名组件名称有以下几种: 首先看下组件有几个单词构成 单个单词 如果只有一个单词,那么建议全部小写,用的时候也是全部小写的,或者首字母大写 有人喜欢哪怕只有一个单词也首字母大写