随缘

Appearance

隐式转换 ​

先来见见这些题目(以下会返回啥?) ​

js
[]==""
1 + null
1 + undefined
1 + "0"
1 - "0"
true + false
1+[0]
!NaN
![]
[]+![]
[]+[]

然后我们再来看看一道经典试炼 ​

需求:输出 true

js
let a = ?
if(a==1&&a==2&&a==3){
    console.log(true)
}

以上答案将在最后揭晓

好了,现在开始进入这次的核心:隐式转换

首先我们要对隐式转换的规则要明确,那么 js 有什么隐式转换的规则呢?

javascript 隐式转换规则 ​

js 数据类型之间转换的基本规则，比如数字、字符串、布尔型、数组、对象之间的相互转换。

1. ToString，ToNumber，ToBoolean，ToPrimitive ​

这四个到底表示 什么呢 ?

1.1ToString ​

这里所说的ToString可不是对象的toString方法，而是指其他类型的值转换为字符串类型的操作。

这里我们讨论null、undefined、布尔型、数字、数组、普通对象转换为字符串的规则。

  • null：转为"null"

  • undefined：转为"undefined"

  • 布尔类型：true和false分别被转为"true"和"false"

  • 数字类型：转为数字的字符串形式，如10转为"10"

  • 数组：转为字符串是将所有元素按照","连接起来，相当于调用数组的Array.prototype.join()方法，如[1, 2, 3]转为"1,2,3"，空数组[]转为空字符串，数组中的null或undefined，会被当做空字符串处理

  • 普通对象：转为字符串相当于直接使用Object.prototype.toString()，返回"[object Object]"

    js
    String(null); // 'null'
String(undefined); // 'undefined'
String(true); // 'true'
String(10); // '10'
String([1, 2, 3]); // '1,2,3'
String([]); // ''
String([null]); // ''
String([1, undefined, 3]); // '1,,3'
String({}); // '[object Objecr]'

上面所说的规则是在默认的情况下，如果修改默认的toString()方法，会导致不同的结果

1.2ToNumber ​

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

null： 转为0

undefined：转为NaN

字符串：如果是纯数字形式，则转为对应的数字，空字符转为0, 否则一律按转换失败处理，转为NaN

布尔型：true和false被转为1和0

数组：数组首先会被转为原始类型，也就是ToPrimitive，然后在根据转换后的原始类型按照上面的规则处理，关于ToPrimitive，会在下文中讲到

对象：同数组的处理

js
Number(null); // 0
Number(undefined); // NaN
Number("10"); // 10
Number("10a"); // NaN
Number(""); // 0
Number(true); // 1
Number(false); // 0
Number([]); // 0
Number(["1"]); // 1
Number({}); // NaN

1.3ToBoolean ​

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

js 中的假值只有false、null、undefined、空字符("")、0和NaN，其它值转为布尔型都为true。

js
Boolean(null); // false
Boolean(undefined); // false
Boolean(""); // flase
Boolean(NaN); // flase
Boolean(0); // flase
Boolean([]); // true
Boolean({}); // true
Boolean(Infinity); // true

1.4ToPrimitive ​

ToPrimitive 指对象类型类型（如：对象、数组）转换为原始类型的操作。

转换为数值型

会先调用 valueOf()方法 ,如果不行然后才会调用 toString()方法

转换为字符串型

会先调用 toString()方法 ,如果不行然后才会调用 valueOf()方法

js
Number([])， 空数组会先调用valueOf，但返回的是数组本身，不是原始类型，所以会继续调用toString，得到空字符串，相当于Number('')，所以转换后的结果为"0"

Number(['10'])相当于Number('10')，得到结果10

二.触发隐式转换 ​

既然了解了隐式转换了,我们还需要知道怎么 触发隐式转换

常见的触发隐式转换 == + ! if()...

1.== ​

== 俩边转换相同类型去比较

2.+ ​

+操作符有三种情况

一种是数字相加

一种是字符串拼接

一种是转化数字

那么什么时候是数字相加,什么时候是字符串拼接呢 ?

当俩边都是数字的时候 =>数字相加

当有一边是字符串 =>字符串拼接

3.! ​

非操作符会转化为布尔值.例如 !1=> false

4.if() ​

if 里面的条件要么是 false 要么是 true.

三.解题 ​

1.题 1 ​

js
[]==""  //true

1 + null //1
1 + undefined //NaN
1 + "0" //"10"
1 - "0" //1
true + false //1
!NaN  //true
![] //false
[]+![] //"false" 字符串false

emm? 有点简简单单了,是不是???.....下面来解决第二题

2.题 2 ​

js
let a = ?
if(a==1&&a==2&&a==3){
    console.log(true)
}

a = {
    i:1,
    toString(){
        return a.i++;
    }
}

首先看题: => 需求:输出 true

分析:

如果 我们想要 输入 true 的话 ,那么 我们的 a 就要等于 1 然后等于 2 然后等于 3 =>if(true)....

emm?想一下,没想到,没关系~~~~

那么我们如何实现呢?

看了一下 == 如果我们每次隐式转换的时候让 a+1 不就好啦...

说干就干

js
let a = {
  i: 1,
  toString() {
    return a.i++;
  },
};

if (a == 1 && a == 2 && a == 3) {
  console.log(a);
  console.log(true);
}

四.场景应用 ​

1.场景一.判断这个值是否拥有 ​

js
if(val)....

2.场景二,转换类型... ​

js
//我需要将这个数字字符串转化为数字
"100"
+"100" =>100
//其他方法省略...

3.其他场景....后续...... ​


⭐️⭐️⭐️ 好啦！！！本文章到这里就结束啦。⭐️⭐️⭐️

✿✿ ヽ(°▽°)ノ ✿

撒花 🌸🌸🌸🌸🌸🌸

上次更新于: