美文网首页
JavaScript浅析 -- 类型转换和比较

JavaScript浅析 -- 类型转换和比较

作者: Da_xiong | 来源:发表于2018-04-07 11:07 被阅读0次

先看看如下几个问题,如果都能答对且知道为什么那么可以不用接着往下看了(当然想要接着看俺是不会拒绝滴哈哈):

console.log('' == 1); // false
console.log(' ' == 1); // false
console.log(true == 1); // true
console.log(true == '1'); // true
console.log(true == '2'); // false
console.log(' ' == true); // false

console.log("0" == true); // false
console.log("0" == false); // true
console.log("00" == false); // true
console.log("0.00" == false); // true

console.log(undefined == null);  // true
console.log(null == 'null'); // false
console.log({} == true);  // false
console.log([] == true);  // false
var obj = { 
  a: 0, 
  valueOf: function(){return 1} 
} 
console.log(obj=='[object Object]');  // false
console.log(obj==1);  // true
console.log(obj==true);  // true
if ("") {
    console.log('empty')
} // 无

if (" ") {
    console.log('blank')
} // blank

if ([0]) {
    console.log('array')
} // array

if('0.00'){
  console.log('0.00')
} // 0.00

相信看了上面的题,一些初学的小伙伴已经开始怀疑人生了,不急不急,我们下面就先讲讲两个知识点,然后最后我们再来一一解析题目,到时候就很好理解了。

一、数据类型的互相转换

1. 其他类型转成Number

数据类型 转为值
String 纯数字的字符串转为对应的数字,空字符串和空格字符串是0,其他字符变成NaN
Boolean true为1,false为0
Object 调用valueOf()的返回结果,没有则返回toString()结果,若对象没有valueOf()和toString()则返回NaN
null 返回0
undefined 返回NaN

*Number([])返回0,Number([3])返回3,Number([1, 2])返回NaN。

2. 其他类型转成String

数据类型 转为值
Number 转为对应数字的字符串形式,NaN是“NaN”
Boolean true为"true",false为"false"
Object 返回toString()的返回值,默认是“[object Object]”
null 返回"null"
undefined 返回"undefined"

3. 其他类型转成Boolean

数据类型 转为true的值 转为false的值
Number 任何非零数字(包括无穷大) 0、-0和NaN
String 任何非空字符 “”(空字符串)
Object 任何对象
null null
undefined undefined

二、数据类型的比较

首先强调一点,这里所讲的是==比较,而不是===比较,因为只有==在互相比较的时候会进行隐式转换再做比较,而具体规则如下:

  1. Number、String、Boolean三者的互相比较,都先转换为数字再进行比较。
  2. Object和其他作比较,调用toPrimitive的返回值进行比较(先尝试调用 .valueOf 方法获取结果。 如果没定义,再尝试调用 .toString方法获取结果)。
  3. null和undefined的比较不做转换,且null==undefined返回true(null===undefined返回false)。
  4. NaN不与任何值相等,即使NaN==NaN返回的也是false。

三、答案解析

好了,根据上面所讲的两点,现在我们再来看看开始的题目,一一解释下:

  1. 首先看这些题目:
console.log('' == 1); // false
console.log(' ' == 1); // false
console.log(true == 1); // true
console.log(true == '1'); // true
console.log(true == '2'); // false
console.log(' ' == true); // false

console.log("0" == true); // false
console.log("0" == false); // true
console.log("00" == false); // true
console.log("0.00" == false); // true

根据"Number、String、Boolean三者的互相比较,都先转换为数字再进行比较",所以上面的几个比较全都会先进行数字转换,而Number('')、Number(' ')、Number('0')、Number('00')、Number('0.00)都是0,Number(true)是1、Number(false)是0。这个时候题目实际上就变成下面这样:

console.log(0 == 1); // false
console.log(0 == 1); // false
console.log(1 == 1); // true
console.log(1 == 1); // true
console.log(1 == 2); // false
console.log(0 == 1); // false

console.log(0 == 1); // false
console.log(0 == 0); // true
console.log(0 == 0); // true
console.log(0 == 0); // true

这样做了转换之后的比较是不是就一目了然了?

  1. 根据比较规则的第2点“Object和其他作比较,调用toPrimitive的返回值进行比较(先尝试调用 .valueOf 方法获取结果。 如果没定义,再尝试调用 .toString方法获取结果)”,由于Number({})为NaN,Number([])为0,下面的题目
console.log({} == true);  // false
console.log([] == true);  // false

var obj = { 
  a: 0, 
  valueOf: function(){return 1} 
} 
console.log(obj=='[object Object]');  // false
console.log(obj==1);  // true
console.log(obj==true);  // true

就变成

console.log(NaN == 1);  // false
console.log(0 == 1);  // false

var obj = { 
  a: 0, 
  valueOf: function(){return 1} 
} 
console.log(1 == NaN);  // false
console.log(1 == 1);  // true
console.log(1 == 1);  // true
  1. 根据转换规则第3点“null和undefined的比较不做转换,且null==undefined返回true”,下面就不用解释了吧?
console.log(undefined == null);  // true
console.log(null == 'null'); // false
  1. 而对于这种if的判断,我们可以直接转换成Boolean。由于任何对象和任何非空字符串的布尔值都是true,有Boolean('')为false,Boolean(' ')、Boolean([0])、Boolean({})为true。
if ("") {
    console.log('empty')
} // 无

if (" ") {
    console.log('blank')
} // blank

if ([0]) {
    console.log('array')
} // array

if('0.00'){
  console.log('0.00')
} // 0.00
  1. 最后补充两道题:
console.log(!" " == true);  // false
console.log(!" " == false);  // true

由于“!取反”的优先级高于“==”,所以先做布尔转化,有Boolean(" ")为true,!Boolean(" ")为false。则转化成如下:

console.log(false == true);  // false
console.log(false == false);  // true

此时由于是两个布尔值做比较所以就不用再做转化数字的操作拉~

相关文章

  • JavaScript浅析 -- 类型转换和比较

    先看看如下几个问题,如果都能答对且知道为什么那么可以不用接着往下看了(当然想要接着看俺是不会拒绝滴哈哈): 相信看...

  • Javascript学习笔记——3.8 类型转换

    类型转换是javascript的大坑,也是比较繁琐的一章 Javascript的类型转换非常灵活,程序根据期望可以...

  • JavaScript比较运算符

    JavaScript 语言中有两种比较方式,转换类型比较运算符 == 和严格比较运算符 ===。其中严格比较运算符...

  • JavaScript比较运算符

    JavaScript 语言中有两种比较方式,转换类型比较运算符 == 和严格比较运算符 ===。其中严格比较运算符...

  • 前端常见面试题(十三)@郝晨光

    列举三种强制类型转换和两种隐式类型转换 JavaScript是一门弱类型语言,在JavaScript中声明变量不需...

  • JS基础

    JavaScript概述 、 JavaScript基础语法 、 变量和常量 、 数据类型 数据类型转换 、 运算符...

  • 2018-06-13

    JS类型转换(强制和自动的规则) 显式转换 通过手动进行类型转换,Javascript提供了以下转型函数: 转换为...

  • JavaScript从相等操作符看类型转换

    JavaScript是典型的弱类型语言,如果能很好理解类型转换特别是隐式转换时,比较强类型语言下它将变得非常有趣,...

  • JavaScript 隐性类型转换步骤浅析

    隐性类型转换,是==引起的转换,下面通过本文给大家分享JavaScript 隐性类型转换步骤,写的十分的全面细致,...

  • javascript强制类型转换

    javascript强制类型转换 一、转换为数值类型 Number(参数) 把任何类型转换为数值类型A.如果是布尔...

网友评论

      本文标题:JavaScript浅析 -- 类型转换和比较

      本文链接:https://www.haomeiwen.com/subject/kzlshftx.html