JS 的&&和||在语句中的用法请教

[Daoma]

##最近正在学 JS，找了点练习来做，然后看到如下的代码：
for (var i = 0; i < oBtn.length; i++)
{
oBtn[i].index = i;
oBtn[i].onclick = function ()
{
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
changeStyle(oDiv, oAtt[this.index], oVal[this.index]);
}
}
然后我上网搜了一下明白了 var c=a||b;这种情况时
a && b :如果执行 a 后返回 true，则执行 b 并返回 b 的值；如果执行 a 后返回 false，则整个表达式返回 a 的值，b 不执行。和
a || b :如果执行 a 后返回 true，则整个表达式返回 a 的值，b 不执行；如果执行 a 后返回 false，则执行 b 并返回 b 的值。

但还是不明白这句 this.index == oBtn.length - 1 && (oDiv.style.cssText = "");怎么操作的 index ？？？萌新望大佬解答

[whileFalse]

这种炫技代码是需要被狠狠修理的。

[aa6563679]

js 其实不管什么东西都能往判断语句里塞。那段代码等同与 if(this.index == oBtn.length - 1){
oDiv.style.cssText = "";
}

[Daoma]

@aa6563679 噢噢，我明白了！

[Daoma]

@whileFalse 刚刚搞懂了。。。这种写法除了图省事炫技外有弊端吗？

[DOLLOR]

短路求值

[gam2046]

反正我觉得这样的写法并不好，除了提升逼格，毫无意义。因为令人更难理解了。常见的写法还有

foo = a || b

a 和 b 都是一个对象，表达的意思就是
if( typeof(a) == "undefined"){
foo = b
}else{
foo = a
}

也就是说 b 是一定兜底的值，确保 foo 一定被定义了。

反正自己觉得动态语言真的是写的一时爽，重构火葬场。

[crysislinux]

弊端就是会挨打

[lihongjie0209]

傻逼写法, 不可取

[mywaiting]

&& 相当于 and, || 相当于 or 这样理解就可以了~

[Pastsong]

var a = b && c || d ? e : f

[we2ex]

|| 在 ES6 之前经常被作为实现默认参数的 tricky 手段

[vegito2002]

short circuit. 严格来说并不算是炫技了. 上 OS 的时候的 Pintos 系统的源码里面就有这种写法.

[vegito2002]

至于赋值语句直接当成 boolean 来用这个的话, 除了 C 以外的语言确实推荐少用, 是容易被喷.

[watzds]

|| 在其他语言里也差不多啊，不就是前面不满足就用后面嘛，只是其他语言里要求 bool

[xjp]

&& || 返回的值并不是 boolean

[codermagefox]

@gam2046 说&&炫技我资磁，但是||咋就炫技了？
不用这个，如何确保自己传值的时候每个字段名都有缺省值？

[raawaa]

|| 不算啥，&& 才比较绕。
第一次见到 return a && b 的时候我是懵逼的。
不过弄懂了之后其实也很简单。

[raawaa]

其实很简单啊。
|| 是如果前面的结果是 true，就不运行后面的了。
&& 是如果前面的结果是 false，就不运行后面的了。
许多语言的 boolean 运算不都是这样的嘛。

[lihongjie0209]

@raawaa #18 真的简单的话就不需要你去弄懂了, 也不需要你去解释给我们听了

[SoloCompany]

只要写过 shell 脚本的根本不会存在理解门槛

[wee911]

这种代码人见人恨，一行代码做两件事情，你是爽，其他都不爽

[noe132]

写这种代码的人会被下一个接手的维护者掘地三尺

[codehz]

其实||这种还是可以理解的（如果用于 null 判断，毕竟 js 没有二元的?:/??运算符

[kotokz]

short circuit 这种写法能避免尽量避免吧
多少会导致 cpu 没办法做 branch prediction 优化，从而影响效率
不是一个好的编程习惯

[kingwl]

你们是不是对炫技有什么误解？

[weixiangzhe]

我接触的前端 大都这样写啊

[shisang]

正常写法啊，这有什么不好理解的

[tomychen]

同感，很不喜欢这种写法，不是看不明白，而是看到一半的时候要停下来思考一下这是啥意思的时候，那种不连续感，是极其不舒服的。

而不是所有人都喜欢这种表示法的。

[Hsinchu]

我只说一下我写这种代码的场景。var a = b || {}，把 b 赋值给 a 但如果 b 为空值 a 赋值为一个空对象，var a = b && b.data，把 b 的属性 data 赋值给 a，但 b 可能为 undefined。这两个场景下这样写可以少写一个几乎没实际意义的 if 语句，我也只在这两种场景下使用&&和||的这个特殊用法，没有炫技成分，就是很实在的减少代码长度。

[congeec]

楼上有几个写过 shell 的？我还以为搞前端的学了 node.js ，会顺带学一下 shell 啥的呢

[Mutoo]

举一个栗子

function example(options /*optional*/ ) {
let paramOne = options && options.p1 || "default";
...

这里 options 为可选参数对象，p1 为可选参数，"default" 为默认值

[witcherhope]

这种用法还是蛮常见的，写 React 组件时候用这个进行短路渲染因为 JSX 不支持 if/else 写法

[uolcano]

@codehz js 里有?: 的，再查查 cheatsheet 吧

[weixiangzhe]

所以最新的草案里有
var a = b?.c
这种写法了

[KuroNekoFan]

这种算是表达式，有的地方会有用，比如 jsx 里面

[faceRollingKB]

我懒，所以经常这么写，比如 this.dispose && this.dispose()，清晰明了

[baixiangcpp]

短路求值成了炫技了，我也是服了

[scofieldpeng]

楼上那些说炫技的，我真的快笑死了，这种最常见的写法难道一样写一堆 if else ？

[royzxq]

是不是对炫技有什么误解。

[codehz]

@uolcano #33 没有二元?: 就是 gcc 扩展里那种 a ?: b 的写法

[LeungJZ]

楼上说炫技的，估计不是写前端的吧？？

data.errors = data.unusual ? data.unusual.map(error => ({
type: errorTypes[error.unusualType],
record: error['unusualRecord'],
time: error['unusualTime']
})) : []

难道我每次都要用 if else 去校验存在不存在？？？？

[LeungJZ]

@Daoma
a && b 的意思是，先执行 a 语句，如果执行结果不是假值（不一定必须是 true ），则执行 b 并返回 b 的执行结果。
多数用于判断 a 是否存在，并执行 b 语句。如根据是否传入回调来判断是否需要执行回调：
function(cb => {
// do sth.
cb && cb(result)
})
a || b 的意思是，先执行 a 语句，如果执行结果不是假值（不一定必须是 true ），则直接返回。否则，则执行 b 并返回 b 的执行结果。
以前多数用来判断是否传参，是否使用默认值。
function (one, two) {
one = one || 'one'
two = two || 'two'
}

[uolcano]

@codehz a?b:c https://devdocs.io/javascript/operators/conditional_operator

[codehz]

@uolcano #43 所以你是没看二元这个词吗，用三元运算符要表达同样的意思就得 a ? a : b 不仅看着长而且如果 a 是一个有副作用的求值表达式就会出问题

[GabrielChen]

这样设置默认值也有 falsy 值问题，这样写比较好
ES6:
```
function fn(opts = {}) {
// ...
}
```

ES5:
```
function fn(opts ) {
opts = (typeof opts !== 'undefined') ? opts : {};
//..
}
```

[GabrielChen]

如果执行 a 后返回 false，则整个表达式返回 a 的值，b 不执行。
应该为如果执行 a 后返回假值，则整个表达式返回 a 的值，b 不执行,所以用来做默认参数是不安全的

```
var a=undefined ,b=true ; a&&b;
//=>undefined
var a=null,b=true ; a&&b;
//=>null
var a=0,b=true ; a&&b;
//=>0
var a="",b=true ; a&&b;
//=>""
var a=false,b=true ; a&&b;
//=>false
var a="1",b=true ; a&&b;
//=>true
var a=1,b=true ; a&&b;
//=>true

```

[uolcano]

@codehz ?:在语言标准里，不都是三元的么？我是直接忽略了你说的“二元”。你说的 gcc 和 js 本就没有可比性，?: 二元是哪个语言的标准，还是插件支持？比较也要将基本法吧。

[wangcheng]

不要写这样的代码，别人看了会骂的。反正最后要 uglify，何必呢？

[codehz]

@uolcano #47 都是 C-like 语言，有何不可比较的？ 二元 ?: 是 GCC 和 clang 支持的扩展，好多项目里都有使用，目的就是提供类似 Csharp 的那种??的语法（以及单次求值的特性） https://gcc.gnu.org/onlinedocs/gcc-5.3.0/gcc/Conditionals.html 我只是随口提了一下，你要较真就看这个链接吧

[SimbaPeng]

写个短路求值就要被骂了？还傻逼写法？真是笑喷。最近爬微信公众号的文章，微信 web 端的 js 代码全是这种写法，某些人没那个实力还喜欢喷人装逼，真是醉了。。。

[SimbaPeng]

一个成语能搞定的事情，非要别人用一段话来描述，到底是谁的问题？

[DOLLOR]

知道 JAVA 语法为何啰嗦冗长么？就是因为想加一点方便的语法就被喷成炫技。
说好的，谁在 JAVA 用 lambda 和 var 谁是小狗。

[grewer]

这也算炫技? 前端工作 1,2 年后只能算基础写法吧
当然 && 这种 1 行最多一个,不然可读性太差

[duzhihao]

我也不理解为什么这么写是"炫技"，自从用了 react 感觉三元表达式和一元表达式太好用了。阅读起来也没什么障碍

[imn1]

其实，我不太明白这问题跟&&||有啥关系

[h1367500190]

其它语言中 a ?: b 是正常的写法，到了 JS 里 a || b 就成了炫技，也是佩服一些人的思维

[zhengxiaowai]

JS 中 || 和 && 还算常用，但是有人和我炫 !!'' 我也是比较无语的