1. 程式人生 > >JS基本語法(一)

JS基本語法(一)

在web專案開發的過程中,前端尤為重要的一門語言就是js,雖然作為後端人員js對於我們來說不是特別重要,但是還是有必要會寫的。閒話少說,下面進入正題。那麼什麼是js呢?它有什麼作用呢?它是怎麼用的呢?不要捉急,下面我們就來淺談一下js。
js是JavaScript的簡寫,雖然它有一個java,但是它跟java一毛錢關係都沒有,它和java的關係就像雷鋒和雷峰塔之間的關係,是不是聽上去很不可思議(剛開始學的時候我一直以為js是java的一個庫,想想都很扯淡)。它的名字的由來:NetSpace=>LiveScript,後來與Sun公司有合作,藉助java做推廣,將名字改為JavaScript。它是客戶端(瀏覽器)的指令碼語言,伺服器端的指令碼叫Node.js,還有vue.js……等等。我們可以用它給靜態頁面新增動態屬性,如:修改樣式,新增事件。
js引入方式

  • 方式1:通過頁面任意位置的script標籤,標籤中就可以書寫js程式碼

  • 方式2:通過script標籤載入外部的js檔案

  • 方式3:設定元素的特定屬性或新增特定事件
    每一門語言中變數的定義都是尤為重要的,下面就來講講js的變數定義

  • 數字:number,整數、浮點數

  • 布林:Boolean,true/false

  • 字串:string,單引號、雙引號都行,‘+’可以進行拼接

  • 陣列:array,可以使用[]或new Array()進行定義

  • 空型別:null,只有一個值,型別名仍然是object

  • NaN:not a number。不是一個數字,型別依然是object,判斷是不能使用‘==’進行判斷,使用函式isNaN進行判斷

  • 未定義:undefined
    定義變數不賦值,使用物件不存在的屬性
    直接判斷時與undefined進行比較,型別判斷是需要與字串

  • 物件:
    方式1:先建立物件,然後新增屬性和方法。
    方式2:使用json字串建立
    方式3:使用類似於構造方法的形式

基本運算

  • 賦值運算:=
  • 算數運算:+、-、*、/、%
  • 符號運算:+=、-=、*=、/=、%=
  • 自增自減:++、–
    放在變數前:先自增或自減,然後再參與其他運算
    放在變數後:先參與其他運算,然後再自增或自減
  • 關係運算:>、>=、<、<=、!=
    全等:"===",不但比較數值,還比較資料型別
  • 邏輯運算:&&(與)、||(或)、!(非)
  • 按位運算:&、|、^、`、<<、>>
  • 三目運算:?:
    格式:表示式1?表示式2:表示式3
    流程:首先判斷表示式1的真假,若為真則將表示式2作為整個表示式的返回值,反之返回表示式3的值

流程控制

  • 說明:
    條件必須寫在()中
    程式碼塊必須寫在{}中

  • 分支結構
    if -else if-else

  • 分支結構
    格式

switch(表示式){
  	case 常量1:
  		語句塊1
  		break
  	case 常量2:
  		語句塊2
  		break
  	……
  	default:
  		語句塊1
  		break
}
  • 流程
    當程式執行到switch-case語句時,首先計算表示式的值,然後與所有的case選項匹配,匹配到誰就執行對應的語句塊。直到遇見break跳出語句。若沒有匹配成功,則執行default語句塊。

  • 說明:多個case條件不要相等

迴圈結構

  • while

    • 說明:與Python中的使用幾乎一樣
    • 格式:
      while (表示式){
      迴圈體
      }
  • do-while

    • 格式:
      do{
      迴圈體
      } while(表示式)
    • 說明:
      當程式執行到do-while語句時,首先執行迴圈體,然後判斷表示式的真假。若表示式的值為真,
      則返回繼續執行迴圈體;若表示式的值為假,則執行後面的內容。
    • 對比while:迴圈體至少執行一次,即使表示式一直不成立。
  • for

    • 格式:
      for(表示式1;表示式2;表示式3){
      迴圈體
      }
    • 流程:
      當程式執行到for語句時,首先執行表示式1,然後判斷表示式2的真假,若表示式2的值為真,則執行迴圈體,然後執行表示式3,接著繼續判斷表示式2的真假,若表示式2的值為假,則跳過迴圈(迴圈結束).
    • 說明:
      • 三個表示式可以任意組合的省略
      • 表示式1通常做一些初始化的操作,省略後需要把相關操作放在迴圈之前
      • 表示式2是迴圈條件,省略後一直為真(死迴圈),可以結合break完成相關功能
      • 表示式3通常是使迴圈趨於結束的語句,省略後需要放在迴圈體的末尾
  • for-in

    • 類似於python中的用法,通常用於遍歷陣列或物件

異常處理

  • 說明:與python中的語法相似,可以認為是一種特殊的流程控制語句
  • 示例:
    try{
    //手動丟擲異常
    throw ‘出問題了&_&’
    alert(‘nomal’)
    } catch (e){
    alert(e)
    }

函式使用

  • 定義函式的關鍵字:function
  • 函式的呼叫可以放在定義之前
  • 函式名不能重複,因為後面的會覆蓋前面的
  • 函式可以像普通變數一樣使用,列印時會列印整個函式體
  • 函式引數:
    • 函式的引數多傳或少傳都不會報錯
    • 函式引數可以有預設值
    • 函式的所有引數都會儲存到arguments物件中,可以像陣列一樣操作它
  • 封閉空間
    (function (a,b){
    alert(a+b)
    })(3,5)

變數作用域

  • 全域性變數:定義在函式外的變數,哪裡都可以使用
  • 區域性變數:定義在函式內部的變數,只能在函式內部使用