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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3148 days ago, the information mentioned may be changed or developed.

##最近正在学 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 ？？？萌新望大佬解答

obtn

执行

length

57 replies • 2018-03-27 10:13:05 +08:00

whileFalse

Mar 25, 2018

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

aa6563679

Mar 25, 2018 via iPhone

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

Daoma

Mar 25, 2018

@aa6563679 噢噢，我明白了！

Daoma

Mar 25, 2018

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

AV1

Mar 25, 2018 via Android

短路求值

ntdll

Mar 25, 2018

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

foo = a || b

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

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

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

crysislinux

Mar 25, 2018

弊端就是会挨打

lihongjie0209

Mar 25, 2018

傻逼写法, 不可取

mywaiting

Mar 25, 2018

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

Pastsong

Mar 25, 2018

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

we2ex

Mar 25, 2018 via Android

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

vegito2002

Mar 25, 2018

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

vegito2002

Mar 25, 2018

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

watzds

Mar 25, 2018 via Android

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

xjp

Mar 25, 2018 via iPhone

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

codermagefox

Mar 25, 2018

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

raawaa

Mar 25, 2018

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

raawaa

Mar 25, 2018

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

lihongjie0209

Mar 25, 2018

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

SoloCompany

Mar 25, 2018 via iPhone

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

wee911

Mar 25, 2018

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

noe132

Mar 25, 2018

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

codehz

Mar 25, 2018

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

kotokz

Mar 25, 2018

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

kingwl

Mar 25, 2018 via Android

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

weixiangzhe

Mar 25, 2018 via iPhone

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

shisang

Mar 25, 2018

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

tomychen

Mar 25, 2018

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

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

Hsinchu

Mar 26, 2018 via Android

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

congeec

Mar 26, 2018

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

Mutoo

Mar 26, 2018

举一个栗子

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

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

witcherhope

Mar 26, 2018 via iPhone

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

uolcano

Mar 26, 2018 via Android

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

weixiangzhe

Mar 26, 2018 via iPhone

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

KuroNekoFan

Mar 26, 2018 via iPhone

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

faceRollingKB

Mar 26, 2018

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

baixiangcpp

Mar 26, 2018

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

scofieldpeng

Mar 26, 2018

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

royzxq

Mar 26, 2018

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

codehz

Mar 26, 2018

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

LeungJZ

Mar 26, 2018

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

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

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

LeungJZ

Mar 26, 2018

@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

Mar 26, 2018 via Android

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

codehz

Mar 26, 2018

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

GabrielChen

Mar 26, 2018

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

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

GabrielChen

Mar 26, 2018

如果执行 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

Mar 26, 2018 via Android

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

wangcheng

Mar 26, 2018

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

codehz

Mar 26, 2018

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