前情提要

艾草：「你的炫酷魔法的定义是什麽呀？」

「就是那种一施放後大家看到都会爱上我，觉得我好棒的魔法。」

艾草：「 不需要那种魔法，你就很棒罗！ 」

「... (/ε＼*)」

(咦，总感觉话题被巧妙的带过了 ... )

运算子的优先性与相依性

优先性

我在初学 JavaScript 时因为没有优先性的概念，所以常常会在一行算式有加有乘时，在乘法的地方包覆括号，希望乘法可以先计算，殊不知这原本就有优先性了，而且括号也只是因为优先性比较高！

首先，让我们从很熟悉的加减乘除开始介绍优先性：

let a = 1 + 2 * 3;

因为先乘除後加减的观念，我们应该会希望 a 是 2 先乘 3 在加上 1 得出数字 7，而不会希望 1 先加上 2 再去乘 3 得出数字 9 ，那麽 a 会是什麽呢？

let a = 1 + 2 * 3;
console.log(a)//7

答案是 7 ，而会有这样的结果其实是因为优先性，JavaScript 的运算子都会有优先级，而乘除的优先级会高於加减。

那今天如果我们希望的结果是 1 先加上 2 再去乘 3 得出数字 9 怎麽办呢？

其实可以透过包覆括号的方式：

let a = (1 + 2)* 3;
console.log(a)//9

为什麽括号可以达成这个效果呢？

因为括号的优先级高於乘除，当 JavaScript 看到括号时，会优先去执行括号内的内容。

JavaScript 内会去设定每个运算子的优先程度，再依照优先程度去计算。

相依性

接下来让我们聊聊相依性，相依性是什麽东西呢？

相依性就是当大家的优先性都一样时，会依造相依性去看是要由左至右去计算呢？还是由右至左计算呢？

让我们用 = 号来举例：

let a = 1;
let b = 2;
let c = 3;
a = b = c;
console.log(a)//3
console.log(b)//3
console.log(c)//3

= 号的相依性是从右至左，所以它会先去执行 b = c，而 = 号运算子会回传一个值，我们可以把 b = c 丢进开发人员工具查看。

可以观看到 b = c 会回传数字 3 ，而 b 会去等於回传的那个数字，所以实际上执行起来是：

let a = 1;
let b = 2;
let c = 3;
a = 3;//b = c 回传 3 

所以结果就是 a = 3 ！

总结

知识点：优先性、相依性

• 优先性是执行的先後顺序
• 相依性是优先性相同时，会由右至左执行、或由左至右

了解优先性、相依性，可以避免踩很多雷！

小练习

请问以下 console.log 分别会印出什麽呢？

//优先性
let a = 10 + 9*3;
console.log(a) //?

let b = (10 + 9)*3;
console.log(b) //?

//相依性
let c = 2;
let d = 4;
let e = 12;
c = d = e;
console.log( c , d , e ) //? 

参考文献

JavaScript 全攻略：克服 JS 的奇怪部分(Udemy)
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators