[JavaScript] JavaScript 入門

第二週主要在學 JavaScript 基礎，以下就是一些 JavaScript 語法的基礎介紹～

運算子

• 數學運算： + 加 - 減 * 乘 / 除 % 取餘數
• 邏輯運算：
  • || OR：若第一個轉換為 true，則回傳第一個數值，否則回傳第二個數值
  • && AND：若第一個轉換為 true，則回傳第二個數值，否則回傳第一個數值
  • !== NOT：唯一真的有判斷 true or false

• 位移運算：

  • << 往左移位：在二進位上往左移位，在十進位上等於 * 2
    0100 << 回傳 1000 ：4 (2^2) → 8 (2^3)
  • >> 往右移位：在二進位上往右移位，在十進位上等於
    1000 >> 回傳 0100 ：8 (2^3) → 4 (2^2)

  • & AND 把數字變成二進位之後，對每一個位數做 AND 的運算

      10 & 15 return ?
              1010 = 10
      and 1111 = 15
      ----------
              1010 = 10
    

  • | OR 把數字變成二進位之後，對每一個位數做 OR 的運算

      10 & 15 return ?
    
              1010 = 10
      or  1111 = 15
      ----------
              1111 = 15
    

  • ^ XOR 把數字變成二進位之後，兩個相同回傳 0，兩個不同則回傳 1

      10 & 15 return ?
    
              1010 = 10
      xor 1111 = 15
      ----------
              0101 = 5
    

  • ~ NOT 把數字變成二進位之後，每一個數字都反轉

      10 & 15 return ?
    
      not 1111 = 15
      ----------
                       = -16
    

  • 判斷奇數偶數 (若第一個為 1，則回傳第二個，否則回傳第一個)

    • A & 1 → 0： A最後一個數字是 0 // 偶數
    • A & 1 → 1： A 最後一個數字是 1 // 奇數

• ++ 和 -- ：a = a + 1、a = a - 1

  • 放後面，先執行在跑運算

      console.log(a++ && 30) // 0
      console.log('a: ', a) // 1
    

  • 放後面，先運算再跑運算

      console.log(++a && 30) // 1
    

• 關於等於：

  • == 會替數字自動轉型，例如某一 string 的數字會自動轉型為 number

    '5' == 5 // true

  • === 不會替數字自動轉型

    '5' === 5 // false

變數

• 一個可以裝東西的箱子
• 把 hello 裝在 box 裡面
• 宣告一個變數 var box = hello ：
• 宣告一個沒有給值的變數 var box ：undefined
• 變數不能以數字開頭，要避開保留字
• 變數的命名方法：
  • api_response
  • apiResponse
• 變數型別：
  • boolean： true or false
  • string： 'this is a string'
  • number 純數字
  • object 物件
  • undefined
  • function 函式

陣列 Array

• 陣列 [ ]
• var arr = [1, 2, 3, 4, 5, 6]
• arr.length：可以取到陣列的長度
• 陣列是從 0 開始，arr[0] = 1
• 同一陣列可以放不同的型別，但不建議混用

物件 Object

• 物件用 { } 括號

var peter = {
    key: 'value'
    name: 'peter'
    score: '100'
}

• 物件取值

  • console.log(peter.key) // value

    用此方法的話不能取到以數字命名的 key

  • console.log(peter['key']) // value

• 變數指去哪？

  • 基本型態是 pass by value
  • 物件和陣列是 pass by sharing，指向同一個記憶體位置

判斷

if ... else

• if 範例

    if (10 > 5) {
        console.log("123")
    }
  

• if ... else 範例

    var score = 50
    if (score > 60) {
        console.log("pass")
    } else {
        console.log("fail")
    }
  

• if ... else if 範例

    var score = 50
    if (score > 80) {
        console.log("good")
    } else if (score > 60){
        console.log("pass")
    } else {
        console.log("fail")
    }
  

switch case

• 範例

    switch(month) {
        case 1:
            console.log('一月')
        break;
        case 2:
            console.log('二月')
        break;
        default:
            console.log('hey')
    }
  

Ternary 三元運算子

condition ? A : B true 回傳 A；false 回傳 B

迴圈

do ... while

do {
    console.log(i)
    i++
} while (i<=100)

//先做再檢查

while

while (i<=100) {
    console.log(i)
    i++
}

//先檢查再做

for loop

for (var i = 1; i<=10; i++){
     console.log(i)
}

函式 function

函式架構

function name(parameter1, parameter2) {
    return parameter1 + parameter2
    console.log(arguments[0]) // arguments 引數的物件
}

// 調用函式
name(argument1, argument2)

函式宣告的方式

function hello() {
    console.log('hello')
}

var hello = function(){
    console.log('hello')
}

立即函式 IIFE

1. 立刻執行
2. 無法在函式外被再次執行
3. 不需要給名稱也可以
4. 透過立即函式來限制變數的作用域
5. 立即函式的後方一定要加分號

(function IIFE(where) {
    console.log(where)
    return where;
})('小明在這'); //傳遞參數

把一個立即函式的值取到另一個立即函式

var a = {}
(function(b) {
    b.person = '小明'
})(a)
;(function(c) {
    console.log(c.person)
})(a)

(function(global)) {
    global.person = '小明'
})(window)
;(function(c) {
    console.log(c.person)

})()

IIFE 詳細教學

參數傳遞

深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？

Argument

會自動帶入所有傳入的參數，是一個類陣列，可以用 for 不能用 forEach

This

1. 每個執行環境都有屬於自己的 this 關鍵字
2. this 與函式如何宣告沒有關連性，僅與呼叫方法有關
3. 嚴格模式下，簡易呼叫會有很大的改變
4. 調用方法：
   • 作為物件方法
   • 簡易呼叫
   • bind, apply, call 方法
   • new
   • DOM 事件處理器
   • 箭頭函式
5. 如果是傳統函式，只看呼叫前面那個物件
6. 箭頭函式，是看如何定義的，沒有自己的 this (找外層)
7. 物件下需要使用 this，直接在最前面做定義

simple call

1. 盡可能不要使用 simple 的 this
2. callName()

常用內建函式

Number

• parseInt 轉成整數
• parseFloat 轉成帶小數的數
• parseFloat().toFixed(位數) 取到小數點後哪個位數
• MAX_VALUE 能存的最大值
• MIN_VALUE 能存的最小值

Math

• Math.ceil 自動進位
• Math.floor 自動捨去
• Math.round 四捨五入
• Math.sqrt 開根號
• Math.pow(number, 幾次方) 次方
• Math.random 取 0~1 的隨機數

String

• .toUpperCase 轉大寫
• .toLowerCase 轉小寫
• .charCodeAt(字串位置) 轉成 ASCII code
• String.fromCharCode(數字) 轉成代表字
• str.indexOf('某一個字串') 找某個字串存在 str 字串的哪個位置，若不存在會回傳負數

• .replace('要換掉的字','要換成的字') 只替換第一個

  .replace(/要換掉的字/g,'要換成的字') 用正規表達式把所有的都替換

• .split() 分割一個字串，括號裡面代表以什麼來切，轉成陣列

• .trim 去掉前後空格
• str.length 字串的長度

Array

• .join('!') 把陣列每個空格加一個元素變成字串

• .map() 會新建一個數組，把每一個原陣列元素都帶函式裡做一次後成為新陣列的內容

    var arr = [1, 2, 3]
    console.log(
        arr.map(function(x) {
            return x*-1
        })
    )
  
    // [-1, -2, -3]
  

• .filter() 篩選裡面

    var arr = [1, 2, 3, -1]
    console.log(
        arr.filter(function(x) {
            return x>0
        })
    )
  
    // [1, 2, 3]
  

• .slice 切段

  第一個參數是從哪裡開始切

  第二個參數是切到哪裡 (不包含本身)

    const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
  
    console.log(animals.slice(2));
    // expected output: Array ["camel", "duck", "elephant"]
  
    console.log(animals.slice(2, 4));
    // expected output: Array ["camel", "duck"]
  
    console.log(animals.slice(1, 5));
    // expected output: Array ["bison", "camel", "duck", "elephant"]
  

• .spice 新增或刪除元素

    const months = ['Jan', 'March', 'April', 'June'];
    months.splice(1, 0, 'Feb');
    // inserts at index 1
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "June"]
  
    months.splice(4, 1, 'May');
    // replaces 1 element at index 4
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "May"]
  

• sort 排序

    const months = ['March', 'Jan', 'Feb', 'Dec'];
    months.sort();
    console.log(months);
    // expected output: Array ["Dec", "Feb", "Jan", "March"]
  
    const array1 = [1, 30, 4, 21, 100000];
    array1.sort();
    console.log(array1);
    // expected output: Array [1, 100000, 21, 30, 4]
  

  數字排序怎麼做？

    var arr = [1, 30, 4, 21]
  
    arr.sort(function(a, b)){
        if (a===b) return 0 //不改變位置
        if (b>a) return -1//不換位置回傳 -1
        return 1 // 換位置回傳 1
    }
  
    a b
    1 4
    arr.sort(function(a, b)){
        // 由大排到小
         return b-a
        // 由小排到大
         return a-b
    }
  

回傳和印出的差異

• function 如果沒有回傳值，預設的回傳值是 undefined

Immutable 觀念

var a = 'hello'
a = 'yo'
a: 'hello'  // 0x01
a: 'yo' // 0x02

// 字串數字都不可變，只能宣告一個新的變數，或把這個變數的值蓋掉，才會改變

// 而陣列和物件，就算之後再取用來改變，還是會指向同一個記憶體位置，所以會改動到原本的陣列或物件。

Console.log

可以用來 debugger，放在任何你不確定程式碼對不對的地方，印出來看是不是你想的值。

解題技巧

• 函式填空法：先把架構寫出來再來填細節
• 簡化法；不會輸出 n ，可以先從輸出 1 個開始
• 程式的效率：
  • 執行所需步驟與資料量 n 的關聯
  • 時間複雜度： O(n)
  • 空間複雜度：O(n)
  • 時間和空間通常兩者不可兼得，需做權衡