【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)，那么，结果是||操作符后面的操作数；

最后

😂