JS中逻辑运算符|| &&的特殊技巧

Author Avatar
Klein 4月 04, 2018

装逼必备。

基本用法

1
2
3
4
5
6
7
8
console.log(true && true);   //true
console.log(true && false);  //false
console.log(false && true);  //false
console.log(false && false); //false
console.log(true || true);   //true
console.log(true || false);  //true
console.log(false || true);  //true
console.log(false || false); //false

JavaScript中的特殊用法

设置默认值

1
2
3
var target,num;
target = undefined || 'defaultValue'; //defaultValue
num = 0 || 1; //1

上面的写法相当于这样写：

1
2
3
var target,num;
target = false || 'defaultValue'; //defaultValue
num = false || 1; //1

不过我现在已经放弃这种写法，因为ES6中有更为简便的写法。

判断参数是否存在，存在则怎样怎样。

eg:判断回调函数是否存在，存在则执行。

1
callback && callback();

为什么会有这样的特殊用法（原理）

  1. 在JavaScript中，Object、Function、非零整数和字符串都为true,而undefined、null和空字符串""为false,而且返回为true表达式的值。

  2. 如果||左侧表达式的值为真值，则返回左侧表达式的值；否则返回右侧表达式的值。

eg:

1
2
console.log('真值' ||'') //真值（这里的真值指的是上面所说的返回true的值）
console.log(undefined || Object); //Object

  1. 如果&&左侧表达式的值为真值，则返回右侧表达式的值；否则返回左侧表达式的值。

eg:

1
2
console.log(1 === 1 && 2); //2
console.log(0 === 1 && 2); //2

小结

  1. 在JavaScript中，Object、Function、非零整数和字符串都为true,而undefined、null和空字符串""为false,而且返回为true表达式的值

  2. 如果||左侧表达式的值为真值，则返回左侧表达式的值，否则返回右侧表达式的值。

  3. 如果&&左侧表达式的值为真值，则返回右侧表达式的值，否则返回左侧表达式的值。

eg:

简化javascript中if else选择结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var n = 1;
((n === 1) && (n = 3)) || ((n === 3) && (n = 6)) || (n = 2);
console.log(n) //3

var n = 3;
((n === 1) && (n = 3)) || ((n === 3) && (n = 6)) || (n = 2);
console.log(n) //6

var n = 9;
((n === 1) && (n = 3)) || ((n === 3) && (n = 6)) || (n = 2);
console.log(n) //2

// ((n === 1) && (n = 3)) || ((n === 3) && (n = 6)) || (n = 2); 相当于：
if(n === 1) {
    n = 3;
} else if(n === 3) {
    n = 6;
} else {
    n = 2;
}

参考文章

使用逻辑运算符 || && 简化javascript中if else选择结构