『新手日記』Day-8 JavaScript 運算式與運算子

運算子在我剛學到時，我以為只是在迴圈裡面會使用到東西。但當我在學期2的電影網站碰到**const list = JSON.parse(localStorage.getItem(“favoriteMovies”)) || [];**我整個大傻眼，原來運算子還能這樣用喔！！！

今天這一篇算是補坑吧(請問一下，哪一篇不是補坑啊???)

基礎先來

JavaScript 的語法可以分為兩大類：

1.Statement（敘述句）

執行某個動作，例如：變數的宣告、賦值，迴圈和if的判斷式

let foo;

2.Expression（運算式）

他會產生一個值。例如：呼叫function時的參數，或是賦值時，在=右側的部分。

1	let a = 10 * 10;

在運算式中，會透過提供一些數值給『運算子』進行運算，運算子依照性質分類可以分為以下幾種：

算術運算子（Arithmetic Operators）

算數運算子包含了最基本的數學四則運算的符號，讓你可以對兩組（value）進行加（+）、減（-）、乘（＊）、除（/），此外，還有比較特別的：

Remainder（%)

//取餘數12 % 5//回傳2

Increment（＋＋）/ Decrement（- -）

//增加x = 3x++ //回傳3，但回傳後會自動加1變成4++x //會先＋1然後回傳4

Exponentiation （也可以寫成＾）

//次方x = 3 x ** 2 //回傳9

賦值運算子（Assignment Operators)

我們一直使用的 = 符號，就是一種賦值運算子。除此之外，還有搭配算數運算的 +=、-=、*=⋯⋯等運算子

x += y //等同 x = x + yx -= y //等同 x = x - y以此類推

比較運算子（Comparison Operators）

比較運算子陳述的是邏輯關係，他會對前後的 value 進行比較，然後回傳 boolean 值，也就是 true 或是 false。（有===、！==、大於、小於、大於等於、小於等於）

💡 因為兩個等於（==）會對被判別的變數做轉換型別的動作（coercion又稱為implicit type conversion）。所以在JavaScript我們都會使用 === 來代替 ==; ！== 來代替！=

邏輯運算子（Logical Operators）

&& 而且的意思，如果前後的 value 都是 true，則回傳 true

|| 「或者」；只要有一邊為 true，則為 true

! 「非」，將後面接的 boolean 轉成相反的值

💡 在很多code 我們都會看到類似 if (!class) {…}之類的程式語言，之所以可以這樣打是因為，其實他的概念很簡單，只要記* 會是 , 其餘的都是。

字串運算子（String Operators)

運算子 (+) 也能用於字串，將兩字串接在一起，並回傳接在一起後的結果。

簡化的設定運算子 += 也能用於串接字串。

console.log('我的 ' + '字串'); // 會印出字串 "我的字串"。let mystring = '字'; mystring += '母'; // 得到 "字母" 並賦與給變數 mystring.

特殊運算子（Special Operators)

其他沒列入的都可以算在裡面。

短路求值(Short-circuit evaluation)

進入今天重點，短路求值(Short-circuit evaluation)也有人翻譯為最小化求值

先講結論好了，我認為使用Short-circuit evaluation 可以幫助 code 變得更符合邏輯外也減少了code

為什麼這麼說？請聽我娓娓道來：

Logical OR Operator

The logical OR (||) operator (logical disjunction) for a set of operands is true if and only if one or more of its operands is true.It is typically used with boolean (logical) values. When it is, it returns a Boolean value.

語法：anything || anything

OR 表達式是從左計算到右，符號是 || ，如果在符號左邊的值為 true，那麼符號右邊的值將不會被考慮或是被執行。

Logical AND Operator

The logical AND(&&) expression is a short-circuit operator. As each operand is converted to a boolean, if the result of one conversion is found to be false, the AND operator stops and returns the original value of that falsy operand;

語法：anything && anything

AND 表達式是從左計算到右，符號是 &&，只要有false 就回傳false的值，如果都是true就會返回最後一個值。

另外，如果 AND 跟 OR 混著用的話就會先做AND

Nil-Coalescing Operator

老實說這個語法我完全沒碰過，只能到網路上找尋資料。

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.This can be seen as a special case of the logical OR (||) operator, which returns the right-hand side operand if the left operand is any falsy value, not only null or undefined.

語法：leftExpr ?? rightExpr

??的用法與||的用法非常相似，都能用作預設值，差異之處是：

??會返回第一個defined的值
||會返回第一個truthy的值

**何為defined? 除了undefined和null**，其他都屬於defined。以下例子一目了然：

1
2
3

let price = 0;
console.log(price || 100);//100
console.log(price ?? 100);//0

在??的世界中，只要不是null或undefined，條件就能成立。

轉載至：https://ithelp.ithome.com.tw/articles/10243261

三元運算子(條件運算子)

這個也是我特別想拉出來說的，他在部分時候真的很好用。

條件運算子是 JavaScript 中唯一需要三個運算元的運算子，因此被稱為三元運算子。

語法：條件？值1：值2

解釋：條件為 true，運算子回傳 值 1， 否則回傳 值 2。

let status = {
	name: 'Jeff',
	age: 20,
	adult: null
}
status.adult = status.age >= 18 ? '成人' : '小孩';
// 如果是用if迴圈
let status = {
	name: 'Jeff',
	age: 20,
	adult: null
}
if(status.age >= 18){
    status.adult = '成人'
}else{
    status.adult = '小孩'
}

是不是非常快速可以打完^U^

結語

複習到這邊剛好滿一個禮拜(剛剛發現今天是第8天哈哈)，其實在過程中確實有想過我這樣做是不是在浪費時間，為什麼不用練習代替這些複習過程，看到同學都開始預讀學期三的內容我卻還在用這些。

但堅持到現在，我慢慢看到堅持這樣想發的優點，看到了很多之前沒讀到或是已經沒印象的地方，也了解了一些之前不太清楚的地方，重點還整理好了之後可以重複閱讀的筆記。因此我想我又可以繼續堅持下去，只是速度真的要加快一點就是了～～～