【Tips】JS中的&&、|| 运算符

前言

今天在看React Native的教程时,有个栗子是讲关于TextInput的,将输入的内容,按空格分隔替换为一个emoji表情,用到的代码如下:

{this.state.text.split(' ').map((word) => word && '😂').join(' ')}

开始我不知道为什么两个字符串进行逻辑与操作,为什么返回的是后面的字符串?

然后

后来写了一些栗子如下:

var a = 3 && 'Hello';   // a -> 'Hello'
var a = 'Hello' && 'World'; // a -> 'World'
var a = 'Hello' && null; // a -> null
var a = 0 && 'Hello'; // a-> 0
var a = 'Hello' && ''; // a -> ""
var a = null &&  0; // a -> null
var a = 0 &&  null; // a-> 0

于是根据栗子结果猜想:var a = x && y

如果&&的结果为ture(两个操作数都为true),那么,结果是&&操作符后面的操作数;
如果&&的结果为false(两个操作数一个为true一个为false),那么,结果是&&操作符中为false的操作数;
如果&&的结果为false(两个操作数都false),那么,结果是&&操作符前面的操作数;

下面是试了下逻辑或的栗子:

var a = 3 || 'Hello';   // a -> 3
var a = 'Hello' || 'World'; // a -> 'Hello'
var a = 'Hello' || null; // a -> 'Hello'
var a = 0 || 'Hello'; // a-> 'Hello'
var a = 'Hello' || ''; // a -> 'Hello'
var a = null ||  0; // a -> 0
var a = 0 ||  null; // a-> null

同样根据栗子结果猜想:var a = x || y

如果||的结果为ture(两个操作数都为true),那么,结果是||操作符前面的操作数;
如果||的结果为true(两个操作数一个为true一个为false),那么,结果是||操作符中为true的操作数;
如果||的结果为false(两个操作数都false),那么,结果是||操作符后面的操作数;

最后

😂

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,252评论 19 139
  • 表达式和运算符 程序中最简单的表达式就是,程序中的常量 变量名也是一种简单的表达式 复杂的表达式是由简单的表达式组...
    zhaolion阅读 1,679评论 3 12
  • 表达式 表达式是由数字、运算符、数字分组符号(如括号)、自由变量和约束变量等以能求得数值的有意义排列方法所得的组合...
    劼哥stone阅读 599评论 0 4
  • 什么是 JavaScript 语言? JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script...
    oWSQo阅读 1,837评论 0 1
  • 人生中圈子会换了一个又一个,只希望所在乎的你们一直都在,随时间退场的不在乎、不挽留!
    平凡的小宋同学阅读 141评论 0 0