每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day19

tags: ItIron2021 Javascript

前言

终於用了4天的时间把this相关的题型都跑完了，再次强调，我们涵盖的还是偏表面的理论，实际上this在js还有一些更底层的运作原理，但要完全掌握的成本真的过高，如果你有发现之前谈过的概念不足以应付你的面试欢迎在留言跟我说，我会在针对这部分新增一些篇幅! 今天我们来点开心的主题吧，短短两行的程序码而已!

本日题目与解释

请问下方程序码的输出结果为?

const result = 0 && 1 || 1 && 2
console.log(result)

今天防雷图也换个口味，来看可爱的狗勾呗!

最终的输出结果为以下

2

这个题目要考的概念很单纯，考验你是否了解基本的运算子优先序(operator precedence)，以及你是否真的了解 && 和 ||运算子怎麽运作的。

要解这个题目首先你要知道这两个运算子到底谁的优先序高，你才知道该先处理哪个部分。根据MDN文件的说法，&&运算子优先序为6，||运算子则为5，因此你需要先处理左右两端的判断，可以把它想像成这样。

const result = (0 && 1) || (1 && 2)

接着就是&&以及||运算子底层的原理了，看似复杂但实际上相当的简单，我这边直接列出我常用的结论，你可以自己去探究底层的原理。

• && => 当左边的运算元可以被转为true时就回传右边运算元，反之回传左边运算元
• || => 当左边的运算元可以被转为false时就回传右边运算元，反之回传左边运算元

至於为什麽都是判断左边的运算元呢，原因在於我们之前有稍稍提到的运算子相依性(operator associativity)，这两个运算子都属於左相依性，需要由左往右进行判断。现在你知道规则了，我们一步步来拆解吧! 首先处理0 && 1 和 1 && 2

0 && 1 => 左边无法被转为true，所以回传左边，最终回传0
1 && 2 => 左边可以被转为true，所以回传右边，最终回传2

所以原先的程序玛最终会变为

const result = (0 && 1) || (1 && 2)
             = 0 || 2

最终判断0 || 2

0 || 2 => 左边可以被转为false，所以回传右边，最终回传2

如何? 了解规则之後一点都不难了对吧! 当时跑到这个题目时有几个同学问了一些问题

1. 运算子优先序跟相依性要完全背下来吗?

当然不用，不过你需要知道几个最基本的，比方说Grouping，也就是小括号有着最高的优先序，而赋值的行为优先序很低(3)，然後 &&优於||，这样就足够你应付日常的开发了。

2. &&和||这种不是用在布林值的用法有实际的例子吗?

当然有，我脑中马上想到的就是react中条件渲染的写法，下方的组件会在isAdmin为true的时候才渲染。

isAdmin && <UserEditPanel />

或是有时候你在呼叫函数前须要先确认函数是否存在

callName && callName()

这些都是很常见的应用，当然後者现在有更棒的运算子可以用了，这个我们就以後再谈吧!

本日核心观念与总结

核心观念

运算子优先序、运算子相依性、&&以及||运算子

总结

• 了解基本的运算子优先序及运算子相依性
• 了解&& 以及 ||实际上的判断方式

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!