js中if判断语句执行原因--数据类型转换原理

RyanQ 发布于2019-08-23 17:02 / 2489人阅读

前言：

相信我们程序员平时写代码用的最多的逻辑就是if语句了吧，可你知道他的原理是什么吗，其实这跟Boolean()这个方法有关，此方法为自动执行（在需要判定Boolean的语句中中自动执行），这些转换规则对理解if控制语句自动执行相应的Boolean转换非常重要，

这是我们平时所写的代码

    var a = "auto"
    if(a){
        console.log("执行")
    }

其实执行起来是这样，理解一下

    var a = "auto"
    if(Boolean(a)){
        console.log("执行")
    }

这样其实就好理解了，每个类型的值其实都可以转换为Boolean值，有一定的规则，接下来我们看看具体操作

取证

将需要转换的数据传递给Boolean()函数

Boolean: 毋庸置疑true就是true，false就是false，但是new Boolean这里有坑

  var boolean1 = true;  // true;  
  var boolean2 = false; // false; 
  console.log(Boolean(boolean1));
  console.log(Boolean(boolean2));

// 这里坑来了 Boolean()是返回布尔值，new Boolean()是返回布尔对象（对象里面的值为false，）

  var x = Boolean(false);
  if (x) {
    // 这里的代码不会被执行
  }
  
  var x = new Boolean(false);
  if (x) {
    // 这里的代码会被执行
  }

注意不要将基本类型中的布尔值 true 和 false 与值为 true 和 false 的 Boolean 对象弄混了。不要在应该使用基本类型布尔值的地方使用 Boolean 对象。

    var x = Boolean(expression);     // 推荐（Boolean值）
    var x = new Boolean(expression); // 不推荐，Boolean对象里的值不管是true还是false，只要对象有值都会判定为true，if语句中都会执行、

String: 只要不是空字符串(没有任何内容),任何非空字符串(包含空格) 都会转换为true

    var str1 = "";  // "" --> false
    var str2 = " "; // " " --> true;
    var str3 = "abc"; // " " --> true;
    console.log(Boolean(str1));
    console.log(Boolean(str2));
    console.log(Boolean(str3));

Number: 只有0和NaN会转换为false，其他都会转换为true

    var num1 = 0;  //false
    var num2 = -1; //true
    var num3 = 1;  //true
    var num4 = NaN; //false
    console.log(Boolean(num1));        
    console.log(Boolean(num2)); 
    console.log(Boolean(num3));

null、undefined：都会转换为false

    var n = null;  //false
    var u = undefined;  //false
    console.log(Boolean(n)); 
    console.log(Boolean(u));

总结:

false / "" / NaN / 0 / null / undefined 都会转换为 false

注意 Boolean() 和 new Boolean()的区别
前者生成布尔值，后者生成布尔对象，后者不推荐使用

参考：

大部分取经于js高程红宝书26页，3.4.4章节（Boolean类型的介绍）
new Boolean()的坑取经于MDN中Boolean的描述

云服务器私有云 js的if判断语句 js中判断数据类型 js中数据类型转换 asp中数据类型转换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103719.html

JavaScript 基础知识 - 入门篇(一)

摘要：如图意义位用来表示符号位位用来表示指数位表示尾数浮点数，比如无限循环无限循环此时只能模仿十进制进行四舍五入了，但是二进制只有和两个，于是变为舍入。这即是计算机中部分浮点数运算时出现误差，丢失精度的根本原因。 showImg(http://ww1.sinaimg.cn/large/9c47d583gy1fmtw1ma9g4j21hc0u0ach.jpg); 前言最近一直有小伙伴跟我说J...

sarva 2019-08-21 17:58 评论0 收藏0
javascript基础

摘要：一弹窗和输出执行顺序是从上到下执行控制浏览器弹出一个警告框让计算机在页面中输出一个内容在中写一个内容写可以向中输出一个内容看我出不出来向控制台输出一个内容作用是向控制台输出一个内容你猜我在哪出来二编写位置可以将代码编写到外部文件中，然后通过一.弹窗和输出 **javascript执行顺序是从上到下执行** 1.控制浏览器弹出一个警告框 alert(HelloWord); 2.让计...

XFLY 2019-08-23 17:55 评论0 收藏0
分析 JavaScript 的数据类型与变量

摘要：基本数据类型在中，基本数据类型有种，即数值字符串布尔值。两个布尔值转为数值进行比较。对于对象和布尔值，调用它们的方法得到对应的字符串值，然后进行字符串相加。减法对于字符串布尔值或者，自动调用，转换结果若为，那么最终结果为。这篇文章，来聊聊 JS 中的数据类型与变量。这是在学习 JS 时最基础的一类问题，但却很重要。希望我的分享有帮助到你。文章开头，我先提几个面试中遇到的问题：比如...

Mike617 2019-08-23 13:13 评论0 收藏0
JavaScript基本语法（一）

摘要：目录语句变量小结基本语法一是核心知识点的基本语法的第一部分，主要介绍了语句表达式变量和数据类型不包括函数类型的基本知识点，函数类型将在下一章函数二中详细探讨语句程序的执行是由一条条语句组成的每一条语句是为完成特定任务而执行的操作语句当中可以目录 1. 语句 2. 变量 3. 小结 JavaScript基本语法（一）是JavaScript核心知识点（ECMAScript）的基本语法的...

shiina 2019-08-21 11:19 评论0 收藏0