js中bool值的转换及“&&”、“||”、 “!!”详解

前言

首先需要知道的是，js中有6个值为false，分别是: 0, '', null, undefined, NaN 和 false, 其他(包括{}, [], Infinity)为true.

可以使用Boolean()函数或是两次取非就能获得对象的布尔值，例如Boolean(undefined)和!!undefined同样能取得布尔值false,

对于0, '', null, undefined, NaN，{}, [], Infinity求布尔值，分别是false false false false false true true true.

因此我们知道的一点是：对象的布尔值是true，即使是对象{}。

bool值转换

数据类型 bool值转化
undefined undefined 转化为 false
Object null 转化为false，其他为 true
Boolean false 转化为 false，true 转化为 true
Number 0，NaN 转化为false，其他为 true
String "" 转化为 false，其他为 true

"&&"

javascript中“&&”运算符运算法则如下：

如果&&左侧表达式的值为真值，则返回右侧表达式的值；否则返回左侧表达式的值。多个&&表达式一起运算时，返回第一个表达式运算为false的值，如果所有表达式运算结果都为true，则返回最右侧一个表达式运算的值。

const aa = {'name': 'xx'};
const bb = aa && aa.age; // bb输出为undefined;
let cc;
const dd = cc && cc.name ? cc.name : undefined; // dd输出为undefined
const dd = cc && cc.name; // dd输出为undefined;

上面两句代码的执行结果是一样的，之前写代码的时候一直用上面的方式，但是发现有些单测覆盖不到，导致单测分支覆盖率很低，换下面的方式就可以很好的解决这个问题，这两句的效果是一样的。

"||"

javascript中"||"运算符的运算法则如下：

如果"||"左侧表达式的值为真值，则返回左侧表达式的值；否则返回右侧表达式的值。多个"||"表达式一起运算时，返回第一个表达式运算结果为true的值，如果所有表达式运算结果都为false，否则返回最右侧的表达式的值。

const aa = false || 'xx'; // aa输出为'xx'

"!!"

"!!"将表达式进行强制转化为bool值的运算，运算结果为true或者false。

const aa = 'xx';
const bb = !!aa; // bb输出为true
const cc = !!(NaN || undefined || null || 0 || '' ); // cc为false;

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • JavaScript 布尔操作符解析 && || ！

    1.逻辑非 逻辑非用!表示,可以应用与ECMAScript的任何类型的值,逻辑非操作返回的是一个布尔值(true/false).该操作符首先会将它的操作数转换为一个布尔值,然后再对其求反. 下面说明下Boolean()转型函数的一组规则. 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 ""(空字符串) Number 任何非零数字值(包括无穷大) 0和NaN Object 任何对象 null Undefined  

  • javascript &&和||运算法的另类使用技巧

    &&和||在JQuery源代码内尤为使用广泛,由于本人没有系统的学习js,所以只能粗略的自我理解出来,希望大家指点下. 粗略理解如下: a() && b() :如果执行a()后返回true,则执行b()并返回b的值:如果执行a()后返回false,则整个表达式返回a()的值,b()不执行: a() || b() :如果执行a()后返回true,则整个表达式返回a()的值,b()不执行:如果执行a()后返回false,则执行b()并返回b()的值: && 优先

  • 利用JScript中运算符"||"和"&&"的特殊特性实现代码精简第1/2页

    利用JScript中运算符"||"和"&&"的特殊特性实现代码精简第1/2页

    在JScript的众多运算符里,提供了三个逻辑运算符&&.||和!,噢?! 是高级语言都提供的.按我们对逻辑运算的正常认识,逻辑运算的结果因该是ture或者false.但是JScript的逻辑运算却不完全是这么定义的,这里只有!运算符总是返回true|false,而||和&&运算比较的好玩. JScript对于逻辑运算的true|false是这么定义的: 所有对象都被认为是 true. 字符串当且仅当为空(""或'')时才被认为是 false. null

  • js 与或运算符 || && 妙用

    js 与或运算符 || && 妙用

    首先出个题:如图: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头: 成长速度为12显示3个箭头: 成长速度为15显示4个箭头: 其他都显示都显示0各箭头. 用代码怎么实现? 差一点的if,else: Js代码 复制代码 代码如下: var add_level = 0; if(add_step == 5){ add_level = 1; } else if(add_step == 10){ add_level = 2; } else if(add_step

  • js的Boolean对象初始值示例

    Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false). 创建 Boolean 对象 使用关键词 new 来定义 Boolean 对象.下面的代码定义了一个名为 myBoolean 的逻辑对象: var myBoolean=new Boolean() 注释:如果逻辑对象无初始值或者其值为 0.-0.null."".false.undefined 或者 NaN,那么对象的值为 false.否则,其值为 true(即使当自变量为字符串 "false&q

  • Javascript 中的 && 和 || 使用小结

    普通情况下的 && 和 || 比较简单,这里不进行讨论. 准备两个对象用于下面的讨论. 复制代码 代码如下: var alice = { name: "alice", toString: function () { return this.name; } } var smith = { name: "smith", toString: function () { return this.name; } } 在 javascript 中,对于 &

  • Javascript表达式中连续的 && 和 || 之赋值区别

    代码如下: 复制代码 代码如下: function write(msg){ for(var i = 0; i < arguments.length; i ++){ document.write(arguments[i] + '<br />'); } } //关于 '&&' test1 = 1 && 2 && 3 && 4; test2 = '0' && 2 && 3 && 4;

  • js中bool值的转换及“&&”、“||”、 “!!”详解

    前言 首先需要知道的是,js中有6个值为false,分别是: 0, '', null, undefined, NaN 和 false, 其他(包括{}, [], Infinity)为true. 可以使用Boolean()函数或是两次取非就能获得对象的布尔值,例如Boolean(undefined)和!!undefined同样能取得布尔值false, 对于0, '', null, undefined, NaN,{}, [], Infinity求布尔值,分别是false false false fa

  • Vue.js中 v-model 指令的修饰符详解

    Vue.js中 v-model 指令的修饰符详解

    1 .lazy v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外).我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据. html: <div id="app"> <input type="text" v-model.lazy="content" placeholder="请输入" value="初始值&quo

  • Node.js中参数传递的两种方式详解

    目录 参数传递方式 GET方式 POST方式 动态网页 参数传递方式 在Node.js中,参数传递常见的共两种方式: GET方式:通过地址栏键=值的方式进行传递. POST方式:通过表单的方式传递请求数据. GET方式 GET方式通常是在请求地址中以[?参数1=值1&参数2=值2]的格式进行传递,在Node.js中可以通过获取url然后进行获取参数,如下所示: //1.引入http模块 var http = require('http'); //2.创建服务 var server = http.

  • node.js中grunt和gulp的区别详解

    node.js中grunt和gulp的区别详解 自nodeJS登上前端舞台,自动化构建变得越来越流行.目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不多,不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地,有着她独到的优点. 易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码. 高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件. 高质量 Gulp的每个插件只完成一个功能

  • 基于js中this和event 的区别(详解)

    今天在看javascript入门经典-事件一章中看到了 this 和 event 两种传参形式.因为作为一个初级的前端开发人员平时只用过 this传参,so很想弄清楚,this和event的区别是什么,什么情况下用什么比较合适. onclick = changeImg(this)       vs     onclick = changeImg(event) <img src='usa.gif' onclick="changeImg(event)" /> <scrip

  • 基于Java中进制的转换函数详解

    十进制转成十六进制: Integer.toHexString(int i) 十进制转成八进制 Integer.toOctalString(int i) 十进制转成二进制 Integer.toBinaryString(int i) 十六进制转成十进制 Integer.valueOf("FFFF",16).toString() 八进制转成十进制 Integer.valueOf("876",8).toString() 二进制转十进制 Integer.valueOf(&qu

  • Vue.js 中的 v-cloak 指令及使用详解

    先来看下vue.js 中的v-cloak 指令 可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码.我们可以使用 v-cloak 指令来解决这一问题. html: <div id="app"> {{context}} </div> js: <script> var app = new

  • Vue.js 中的 v-show 指令及用法详解

    1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

  • 对node.js中render和send的用法详解

    大多数情况下,渲染内容用res.render(),将会根据views中的模板文件进行渲染.如果不想使用views文件夹,想自己设置文件夹名字,那么app.set("views","aaaa"); 如果想写一个快速测试页,当然可以使用res.send().这个函数将根据内容,自动帮我们设置了Content-Type头部和200状态码.send()只能用一次,和end一样.和end不一样在哪里?能够自动设置MIME类型. 如果想使用不同的状态码,可以: res.stat

  • Node.js中Express框架的使用教程详解

    Node.js中Express框架的使用教程详解

    目录 Express简介 Express生成器 1. 什么是Express生成器 2. 安装Express生成器 创建Express项目 安装项目依赖 运行Express项目 Express目录结构说明 创建一个新路由模块 1. 创建ejs模块文件 2. 创建路由文件 3. 在app.js中引入路由 4. 运行项目 经过前面几天对Node.js的学习,基本的开发知识已经逐渐掌握,所谓工欲善其事必先利其器,今天进一步学习Node.js的开发框架Express.利用Express框架可以快速的进行W

随机推荐