14
2020
04

内置类型之间如何进行类型转换?

首先,我们先看几个例子。


第一个例子:


const a = 1;

const b = '1';

if(a==b){

 console.log('true') //true

}


第二个例子:


const x = 1+'1';

console.log(x); // 11

const y = 1*'1'; 

console.log(y); // 1


第三个例子:


const array = [];

if (array) {

 console.log('true'); // 返回true

} else {

 console.log('false');

}


第四个例子:


if([] == false) {

console.log('true'); //返回true

} else {

console.log('false');

}


如果你还不是不相信第四个例子的操作,那么我们实际操作一下。果不其然,还是返回true。

20200209130503136.png

我们先不着急,想它为什么会返回true。我们需要知道这两点。


四则运算转化: 


 1. 当遇到和字符串做 “加法” 时,会先将其转化为字符串,然后再进行字符串相加。

 2. 当遇到“减法”、“乘法”、“除法”时,则会将其转化为数字,然后再进行运算。



对比转化(==):


 - 布尔值、字符串转化为数字 ;

 - 对象转化为字符串(绝大多数);

 - null、undefined、symbol、NaN;


我们先看下对比转化中的第三点。


null == undefined ,但是不等于其他。

1352db12f8cdb3aa03cf0f043935a692.jpg

20200209132312171.png

symbol 不等于其他。

20200209132649834.png

NaN 不等于其他,关键是和自己都不相等。

20200209132833590.png

好了,转为正题。第四个例子为什么会返回ture。因为[]先转化为字符串(对比转化中说过)。使用toString()方法转化,也就是'',然后''转化为数字0,最后false转化为0。0与0当然相等。

说了这么多,我们仔细来讲讲对象的数据类型转换。


对象的数据类型转换


valueOf

toString

Symbol.toPrimitive

我们先来个例子:


   let obj = {

        valueOf(){

            return 1

        },

        toString(){

            return '字符'

        }

    };

    console.log(obj+1);


你是不是会觉得会是[object Object]1。告诉你,不是哦!而是2。因为valueOf、toString是对象内置的方法。这里我们只是自定义了一下。我们先来证明一下是不是真的是内置的方法。

20200209153527375.png

valueOf方法是转换原始值,也就是自身。toString方法是转换为字符。

对了,为什么是2呢?这就是对象的数据转换的灵活性,它会根据自身环境的适应性。转换自身,这里我们使用obj+1,会优先使用数字相加。那么我们换成alert(obj)


    let obj = {

        valueOf(){

            return 1

        },

        toString(){

            return '字符'

        }

    };

    alert(obj); 


这里则会打印出字符。因为alert方法会优先使用字符类型。


最后,我们来讲下最后的一个属性Symbol.toPrimitive。


    let obj = {

        valueOf(){

            return 1

        },

        toString(){

            return '字符'

        },

        [Symbol.toPrimitive](){

            return 10

        }

    }

    console.log(obj+1) // 11

    alert(obj); //10 


不论是相加操作,还是alert弹出。都是执行Symbol.toPrimitive。因为它的权重最高。

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。