[偷米騎巴哥] 20180726 (超入門 JavaScript 邏輯判斷) 筆記

tags: 四個壞朋友 偷米騎巴哥

https://www.youtube.com/watch?v=JkhaG3mFN6E 程式 => 流程控制 + 邏輯判斷

判斷式

• if
• for
• while 迴圈判斷，判斷成立才做，do while 先做第一次，之後迴圈判斷
• 三元運算子 a ? a : b

判斷式裡面，會轉為布林值決定要不要進入函式

if(100){ // 100 會轉為 true
    console.log('為什麼看得到我')
}
// 為什麼看得到我

if(0){ // 0 會轉為 flase
    console.log('為什麼看不到我')
}
//

轉的布林值是 true 還是 false？

// 1. `Boolean()` 方法
Boolean(100)  // true

// 2. `!!`
!!100         // true

// 3. 運算式, e.g. `if(true)1` 便執行函式 return 1
if(100)1      // 1 => true 會 return 1
if(0)1           // => false, 不會進入運算式

if() 裡面放什麼？

• 數字：不是 0 都是 true

  • 小數點 => true
  • 負數 => true
  • 0, +0, -0 (正負 0) => undefined => false

• 字串：都轉為 true

  • 只有空字串 if('')1 => flase
  • 空格 e.g. if(' ')1 => true
  • 變化題：if('\t\n')1 => true
    • \t tab 符號 window 代表
    • \n linux / mac 換行符號
    • \r\n windows 的換行符號

• 陣列：(判斷式中會先運算，再將結果轉布林)

  • if([])1 => [] 空陣列 => true // return 1
  • if([].length)1 => [].length = 0 => flase // 不會進入
  • if([1, 2, 3])1 => "有" 陣列 => true // return 1
  • if([1, 2, 3].length)1 => 3 => true // return 1

• 物件 ( js 所有東西都是繼承於物件)

  • if({})1 => true
  • if({1:1})1 => true

• if(null)1 => false

• if(undefined)1 => 未被定義 (e.g. 變數沒有被賦值)
• if(NaN)1 => NaN：非數字的"數字" not a number => false

• if(Infinity)1 無限大，有正負 => true

  • 任何數/0 e.g. 1024/0=> Infinity

• function

  • if( function(){} )1 => js 任何東西都是(繼承)物件 => true
  • if( function(){ return false} )1 => 放一個定義好的函式 => 是否有函式：有 => true
  • if( ( fucntion(){return false} )() )1
    => 放立即函示，函式會先執行，此函式 return false => false

• if(/a/)1 放正規式 => true

判斷式回傳的東西

&&

全部都 true，才是 true 由左到右判斷，只要遇到 false 就停止運算，回傳被轉為 false 的東西。

變化題：

1 && 2         // => 不是 0 的數字都是 true：1 true, 2 true => 2 
2 && 1         // => 2 true, 1 = true => 1
0 && 2         // => 0 flase => 遇到 false 優先回 false，停止運算
NaN && 1       // => NaN 是 false => NaN
1 && NaN       // => 1 true, NaN false => NaN
false && 2     // false
null && 2      // null
undefined && 2 // undefined

&& 優先回傳 false， 回傳被轉換為 false 的東西。 若都 true 就回傳最後一個。

[] && {}   // [] true, {} true => {}
({}) && [] // {} true, [] true => []
// {} && [] => 語法錯誤：大括號 {} 後面不能放 &

如果都是 true，會回傳最後一個

||

只要一個為 true 就為 true 由左到右判斷，只要遇到 true 就停止運算，回傳被轉為 true 的東西。

1 || 2             // 1 true => 1
2 || 1             // 2 true => 2
3 || 0 || 1        // 3 true => 3
0 || 3 || 1        // 0 false, 3 true => 3
0 || NaN || null   // all falses => 回傳最後一個 => null

變化題：

0 && 1 || 2 && 3   // => 3

&& >>> || >

0 && 1 => 0 false 2 && 3 => 2 true, 3 true => 3 0 || 3 => 0 flase, 3 true => 3

0 || 1 && 2 || 3

1 && 2 => 1 true && 2 true => 2 0 || 2 || 3 => 0 flase, 2 true

3 && 2 || 1 && 0 // 2 || 0 => 2
3 || 2 && 1 || 0 // 3 || 1 || 0 => 3

() 內一定會先運算

0 && (1 || 2) && 3 // 0 && 1 && 3 => 0
(0 || 1) && (2 || 3) // 1 && 2 => 2

可 google 運算子優先序

實務應用

自我挑戰：不用到 if 來寫程式!!

&& => if 判斷

3>2 && (function(){
    console.log("run function")
})()
// "run function"

&& 專找 false，不是 flase 就找下一個

3<2 && (function(){
    console.log("function")
})()
// false

|| => 預設值

function run (){
    var n = n || 100 
    // 若 n 為 flase, n = 100
    console.log(n)
}
// 
run()     // 100
run(500)  // 500
run(0)    // 100 // 但我要 0 啊
run(null) // 100

// es6 
function run(n=100){
    console.log(n)
}
run(0) // 0
run(null) // null
run()  // 100
// es6 只判斷 n 是否 undefined

// es5 更細緻：
function run (){
    var n = n !== undefined ? n || 100 
    // 若 n 不是 undefined，可以為 n； 
    // n 是 undefined 則給 100
    console.log(n)
}

QA

babel 檢測器

^ XOR

同性相斥：只判斷是不是 "相同" 布林值 兩相同就是 false 兩不同就是 true

0 ^ 0 // 0 flase, 0 false => (0) false
1 ^ 0 // 1 true, 0 flase => (1) true
0 ^ 1 // 0 flase, 1 true => (1) true
1 ^ 1 // 1 true, 1 true => (0) false

2 ^ 3 // 2 true, 3 true => (1) true 
3 ^ 2 // 3 true, 2 true => (1) true
3 ^ 3 // 3 true, 3 true => (0) false
2 ^ 2 // 2 true, 2 true => (0) false

label

const func()=>{foo:1}
// 他不是 return 物件
// foo: 被解釋為一個 label
// goto 的用法
const func()=>({foo:1})
// () 會優先執行把 { foo:1} 解釋成一個物件

history.pushState(data, title, ?url)

改變該網址列的 url (但是不會送出要求)， 也要後端能 render 該頁的 url 的畫面。

let test = () => {}

var test = function test(){
    console.log(test)
}

// function test 的 test 
// 讓你在函式裡可以呼叫自己較方便

test()
// function test(){
//     console.log(test)
// }
// 
// 像是 arguments.callee 
// callee 在操作的這個 function (嚴格模式下不能用)

>> 位元移位運算

Alex 宅幹嘛

你的 jQuery 我來 VUE 第一集：簡易輪播篇

https://www.youtube.com/watch?v=2iclZL9SUqA

:key 不要隨便綁，要綁獨有的 ex url +, -, *, /, % 百分比, % 取餘數, 整數化

加觸控 computed 和 watch 文件上看不太清楚 computed 有 catch 因為有 catch