总结

• 逻辑与(&&)

看左边的值是真还是假,如果是真,返回的是右边的值,如果是假返回的是左边的值
(只有 false 、0、NaN、null、undefined、空字符串为假, 其余都是真)

• 逻辑或(||)

看左边的值是真还是假,如果是真,返回的是左边的值,如果是假返回的是右边的值
(只有 false 、0、NaN、null、undefined、空字符串为假, 其余都是真)

应用

1. 利用逻辑或(||)

• 例子一 操作DOM
  如果变量的值 不是 false, null, NaN ，0 或 undefined 或 ''，则传入该变量；

function addMessage(message){
  message = message || 'default message';
  var el = document.createElement('p');
  el.innerHTML = message;
  document.body.appendChild(el);
}
addMessage(); // 使用默认值
addMessage('hello world'); // 使用传入的参数

• 例子二

function Foo(value){
  value = value || 'default value';
  return value;
}
Foo(); // 'default value' 传递默认参数
Foo('hello world'); // 'hello world'

注意：这里传入 false, null, NaN ，0 或 undefined 或 '' 等值，都会使用第二个默认参数！！！
然而实际上只有 undefined 这一种情况才应该被认为是用户没有指定其值，需要使用后备的默认值。

• 例子二改进版本

function Foo(value){
  value = value != undefined ? value : 'default value';
  return value;
}

通过这种方式给参数设置默认值，只有在传入 undefined，它的值才会被强制替换为默认值

Foo(undefined); // 'default value'
// 以下这些值都不会被强制替换了
Foo(''); // ''
Foo(0); // 0
Foo(NaN); // NaN
Foo(null); // null
Foo(false); // false 

• 例子二 补充 ES6 可以这样给参数设默认值

function Foo(value = 'default value'){
  return value;
}
// 替换默认值
Foo(undefined); // 'default value'
// 没有替换 很安全
Foo(''); // ''
Foo(0); // 0
Foo(NaN); // NaN
Foo(null); // null
Foo(false); // false

2. 综合利用 逻辑与(&&) 和 逻辑或(||)

• 例子一

function whatDoesItDo(mood){
  return mood && 'I like this' || 'I don't like this';
}

当 mood 求值结果为 true, 返回 "I like this"（A来代替）
当 mood 求值结果为 false, 返回 "I dont like this"（B来代替）
当 mood 是对象，其也会显示 A。
有点 升级版三元运算符 的感觉；

• 例子二

...
this.canSeen(imglist[i]) && this.loadImage(imglist[i], i);
...

缩写，相当于if true
当第一个函数返回的布尔值为true，那么调用第二个函数

...
if(this.canSeen(imglis[i])) {
  this.loadImage(imglist[i], i)
}
...

出处

JavaScript 逻辑与(&&) 与 逻辑或(||) 的逻辑运算规则理解

增加一个 && 的妙用，后面可以使用多个执行语句，以逗号分隔开

"21" && (console.log("a"),console.log("b"),console.log("c"))