第三節:型別與運算子 == ###### tags: `JavaScript` ## <font color="#3733FF"> 觀念小叮嚀:型別與 JavaScript</font> Dynamic Typing That means that you don't tell the JavaScript engine what type of data a variable holds. JS的型別都是執行時才自動判斷變數型別,沒有關鍵字宣告 ## <font color="#3733FF"> 純值</font> ### Primitive Type | name | description | | -------- | -------- | | Undefined | you should't set a variable to this | | null | you can set a variable to this | | boolean | true or false | | number | floating point number | | string | | symbol | used in ES6 | ## <font color="#3733FF"> 觀念小叮嚀:運算子</font> ```javascript! var a = 3 + 4 console.log(a) //7 ``` 為什麼JavaScript知道要相加? JavaScript engine provides,along with many programming languages, the option for the ability to write in what's called **infix notation(中綴表示法)**. Infix means that the function name, the operator, sits between the two parameters. ==所有的運算子都是function== ## <font color="#3733FF"> 運算子的優先性與相依性</font> [運算子優先序](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Operator_precedence#表格table) 1. Precedence 數字越大,越先被執行 ```javascript! var a = 3 + 4 * 5 console.log(a) //23 ``` 2. 當Precedence一樣,比較 Associativity相依性 ```javascript! var a = 2, b = 3, c = 4; a = b = c console.log(a) //4 ``` 運算子通常需要兩個參數來回傳一個值, 等號是右相依性(right to left),所以會從右邊運算到左邊,從 `b = c ` 開始,回傳右邊的參數,value = 4,然後 a = 4 會被呼叫,所以 a 被設值為4 --- ```javascript! console.log( 1 < 2 < 3) //true ``` 電腦想的和你想的可能不同,< 是左相依性 ```javascript! //執行順序 console.log( 1 < 2) // true console.log( true < 3) // true ``` ```javascript! console.log( 3 < 2 < 1) //true ``` JS會強制轉換型別,false 會被視為 0 ```javascript! //執行順序 console.log( 3 < 2) // flase console.log( false < 1) // true ``` ## <font color="#3733FF"> = 運算子</font> 當我們使用 `==` or `===` or `object.is`的差別 [相等性比較表格](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness) ==always use triple quuals== ![](https://i.imgur.com/N0Mty4L.png) ## <font color="#3733FF">Existence And Booleans </font> 下面這些都表示不存在,這些值都會印出 false, ```javascript! Boolean(undefined) Boolean(null) Boolean("") ``` if () 條件判斷都會轉換成布林值,下方程式碼 a 沒有被賦值 ```javascript! var a // a = undefined -> false if (a) { console.log("There is something") } ``` ```javascript! var a a = 0 // 0 會變成 false if (a || a === 0) { console.log("There is something") } ``` || 的優先度比 === 低,會先執行 a === 0 , 執行順序如下: ```javascript! ( a || true ) ( false || true ) // true ``` ## <font color="#3733FF">Default values 預設值</font> 沒有傳入參數時, name 會變成 undefined,且印出Hello undefined ```javascript! function greet(name) { console.log('Hello' + name ) } greet() //Hello undefined ``` 設定一個預設值給參數 ```javascript! function greet(name) { name = name || '<Your name here>' console.log('Hello' + name ) } greet('Tony') // 'Hello Tony' greet() //Hello <Your name here> ``` JS會優先回傳可以被強制轉型為true的值 ```javascript! true || false // true undefined || 'hello' //hello null || 'hello' //hello '' || 'hellp' //hello 'hi' || 'hello' // hi 0 || 1 //1 ``` `name = name || '<Your name here>` use the or( || ) to say if something does not exist or is an empty string or is a null , give me `<Your name here>` back instead ## <font color="#3733FF">Framework aside 框架小叮嚀</font> 假設有些一些library 匯入專案: lib1 、lib2 ``` <script src="lib1.js"></script> <script src="lib2.js"></script> <script src="app.js"></script> ``` 這三個script不會創造新的執行環境,會把程式碼堆在對方上面,然後執行所有JavaScript檔案,好像他們是在同一個檔案裡,所以這三個檔案互不衝突很重要 ```javascript! window.libraryName = window.libraryName || 'Lib 2' ``` 當看到類似的句子時,其實是在設定,定義框架的物件或函數 要瞭解這是在檢查全域命名空間(global namespace)或全域物件,看是否已經有那個名稱了