JavaScript里,经常听到“表达式”这个词,它听起来有点学术,但说白了,它就是一段能算出个结果的代码。你想啊,咱写代码不就是为了得到点啥吗?要么是计算结果,要么是让页面动起来。这个“能算出结果”的代码片段,就是表达式。比如最经典的2 + 2,它一运行,就麻溜地给你返回个4。这玩意儿,就是JS里最基础也最核心的玩意儿。
主表达式,最基础的砖头
数字、字符串这些老熟人
最简单的表达式,就是那些直接写出来的值,比如数字3,字符串"hello"。这玩意儿叫主表达式。你把它往控制台一扔,它就原封不动地给你吐出来,绝不含糊。这就像盖房子的砖头,虽然看着普通,但后面所有复杂的结构,都是靠它们堆起来的。
console.log(3);
// 输出: 3括号大法,让计算按咱的规矩来
数学里有括号先算括号,JS里也一样。这玩意儿叫分组操作符,就是一对小括号()。它能强制让括号里的东西先算,或者单纯就是为了让代码读起来更清楚。
// 没有括号,乘除优先
console.log(2 + 2 * 3);
// 输出: 8
// 加上括号,先算加法
console.log((2 + 2) * 3);
// 输出: 12
// 就算运算顺序没问题,加个括号也方便一眼看懂
console.log(2 + (2 * 3));
// 输出: 8玩代码的时候,括号还有个大用处:消除歧义。比如你直接在控制台敲一个对象{ "value": true },JS会懵逼,它觉得这是代码块,不是对象,直接报错。这时候,给它套个括号({ "value": true }),JS就懂了:“哦,这哥们儿是要一个对象表达式啊。” 这招在写一些高级技巧(比如立即执行函数)时,也经常用到。
带点副作用的表达式,干活儿还返回值
赋值就是干两件事
有些表达式,不光能算出值,还能干点别的事儿,比如改变环境。这叫有副作用的表达式。最典型的就是赋值。你把theIdentifier = 3扔进控制台,它会打印出3,但同时,它也悄悄在内存里创建了一个叫theIdentifier的变量,并把3塞了进去。这不就是干活儿的同时,还顺手把结果给你了吗?
函数调用,干活儿才是正经事
函数调用也是表达式。它调用后,会执行函数里面的代码,然后返回一个值。如果函数没写return,那就返回undefined。
function theFunction() {
console.log("函数被调用了!");
return 3;
}
// 这行代码会先调用函数,打印出那句话,然后返回3,最后把3打印出来
console.log(theFunction());
// 输出:
// 函数被调用了!
// 3
// 甚至可以用在两个地方
console.log(theFunction() + theFunction());
// 输出:
// 函数被调用了!
// 函数被调用了!
// 6你看,这里的console.log本身也是个函数调用,它的副作用是在控制台打印东西,然后返回undefined。所以当你调用它时,控制台会先打印你让它打印的内容,然后显示一个undefined,告诉你这个表达式的结果是undefined。这波操作,绝绝子。
逗号操作符,一种“虽然但是”的玩法
它到底是个什么鬼
JS里有个比较奇葩的操作符——逗号操作符。。它会先算左边的东西,然后把结果扔掉,再算右边的东西,最后返回右边的结果。听着是不是有点脱裤子放屁?
// 左边的1被无情抛弃,右边的5+20算出25并返回
console.log((1, 5 + 20));
// 输出: 25注意那个括号,没有它,逗号就变成了给console.log传两个参数,结果会打印出1和25两个值。
真香现场,用它来精简代码
这种“扔掉左边”的特性,在特定场景下能写出很优雅的代码。比如有个函数,根据条件要干两件事:一个是调用某个函数(我们只关心它干不干活,不关心它返回啥),另一个是返回一个特定的字符串。
看下面这个例子,常规写法可能有点啰嗦:
function validateResult(theValue) {
function whenValid() {
console.log("通过验证");
}
function whenInvalid() {
console.warn("验证不通过");
}
// 这里必须写两次判断
if (theValue === true) {
whenValid();
} else {
whenInvalid();
}
return theValue === true ? "好使!" : "不行。";
}
const message = validateResult(true);
// 控制台打印: 通过验证
console.log(message);
// 输出: 好使!上面的代码里,判断逻辑写了两次,如果哪天验证条件变了,得改俩地方,贼麻烦。这时候逗号操作符就能派上用场,把“调用函数”和“返回值”这俩动作,在一个表达式里搞定。
function validateResult(theValue) {
function whenValid() {
console.log("通过验证");
}
function whenInvalid() {
console.warn("验证不通过");
}
// 利用逗号操作符,左边调用函数(干活),右边返回结果值
return theValue === true ? (whenValid(), "好使!") : (whenInvalid(), "不行。");
}
const message = validateResult(true);
// 控制台打印: 通过验证
console.log(message);
// 输出: 好使!代码瞬间变得紧凑多了。不过得说一句,这玩意儿虽然看着很酷,但就像吃螺蛳粉,有人觉得香,有人觉得味儿大。用的时候得想想,后面接盘的兄弟能不能一眼看懂。毕竟,代码是给人看的,顺便让机器跑一跑。
