[JavaScript] JavaScript 入門


Posted by Nicolakacha on 2020-09-05

第二週主要在學 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)
    • 時間和空間通常兩者不可兼得,需做權衡

#javascript #程式導師計畫







Related Posts

Laravel Homestead 設定

Laravel Homestead 設定

[ wee7 ] DOM 筆記

[ wee7 ] DOM 筆記

React 我不知道的事 & 下半年期許

React 我不知道的事 & 下半年期許


Comments