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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2445 天前的主题，其中的信息可能已经有所发展或是发生改变。

##最近正在学 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 条回复 • 2018-03-27 10:13:05 +08:00

whileFalse

2018-03-25 09:33:09 +08:00

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

aa6563679

2018-03-25 09:37:11 +08:00 via iPhone

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

Daoma

2018-03-25 09:50:43 +08:00

@aa6563679 噢噢，我明白了！

Daoma

2018-03-25 09:51:53 +08:00

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

DOLLOR

2018-03-25 10:01:07 +08:00 via Android

短路求值

gam2046

2018-03-25 10:16:36 +08:00

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

foo = a || b

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

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

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

crysislinux

2018-03-25 10:18:54 +08:00

弊端就是会挨打

lihongjie0209

2018-03-25 10:32:26 +08:00

傻逼写法, 不可取

mywaiting

2018-03-25 10:35:49 +08:00

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

Pastsong

2018-03-25 10:40:36 +08:00

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

we2ex

2018-03-25 11:02:55 +08:00 via Android

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

vegito2002

2018-03-25 11:56:19 +08:00

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

vegito2002

2018-03-25 11:57:35 +08:00

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

watzds

2018-03-25 12:36:20 +08:00 via Android

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

xjp

2018-03-25 12:42:10 +08:00 via iPhone

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

codermagefox

2018-03-25 13:42:25 +08:00

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

raawaa

2018-03-25 14:12:12 +08:00

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

raawaa

2018-03-25 14:14:15 +08:00

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

lihongjie0209

2018-03-25 18:27:19 +08:00

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

SoloCompany

2018-03-25 18:54:21 +08:00 via iPhone

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

wee911

2018-03-25 20:06:32 +08:00

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

noe132

2018-03-25 20:44:08 +08:00

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

codehz

2018-03-25 21:23:21 +08:00

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

kotokz

2018-03-25 21:42:12 +08:00

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

kingwl

2018-03-25 21:45:40 +08:00 via Android

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

weixiangzhe

2018-03-25 21:47:19 +08:00 via iPhone

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

shisang

2018-03-25 22:01:01 +08:00

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

tomychen

2018-03-25 22:41:53 +08:00

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

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

Hsinchu

2018-03-26 01:48:00 +08:00 via Android

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

congeec

2018-03-26 02:26:22 +08:00

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

Mutoo

2018-03-26 07:54:27 +08:00

举一个栗子

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

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

witcherhope

2018-03-26 08:03:30 +08:00 via iPhone

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

uolcano

2018-03-26 08:12:26 +08:00 via Android

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

weixiangzhe

2018-03-26 08:43:03 +08:00 via iPhone

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

KuroNekoFan

2018-03-26 09:32:20 +08:00 via iPhone

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

faceRollingKB

2018-03-26 09:34:59 +08:00

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

baixiangcpp

2018-03-26 09:58:37 +08:00

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

scofieldpeng

2018-03-26 10:08:51 +08:00

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

royzxq

2018-03-26 10:12:10 +08:00

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

codehz

2018-03-26 10:30:34 +08:00

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

LeungJZ

2018-03-26 10:35:38 +08:00

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

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

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

LeungJZ

2018-03-26 10:42:13 +08:00

@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

2018-03-26 11:26:41 +08:00 via Android

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

codehz

2018-03-26 11:40:57 +08:00

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

GabrielChen

2018-03-26 12:36:19 +08:00

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

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

GabrielChen

2018-03-26 12:42:27 +08:00

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

2018-03-26 12:44:40 +08:00 via Android

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

wangcheng

2018-03-26 12:47:38 +08:00

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

codehz

2018-03-26 13:27:40 +08:00

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