javascript

了解ES

1. 全稱: ECMAScript
2. js語言的規範
3. 我們用的js是它的實作
4. js的組成

• ECMAScript(js基礎)
• 擴充-->浏覽器端
  • BOM
  • DOM
• 擴充-->伺服器端
  • Node.js

ES5

1. 嚴格模式

• 運作模式: 正常(混雜)模式與嚴格模式
• 應用上嚴格式: 'strict mode';
• 作用:
  • 使得Javascript在更嚴格的條件下運作
  • 消除Javascript文法的一些不合理、不嚴謹之處，減少一些怪異行為
  • 消除代碼運作的一些不安全之處，保證代碼運作的安全
  • 需要記住的幾個變化
    • 聲明定義變量必須用var
    • 禁止自定義的函數中的this關鍵字指向全局對象
    • 建立eval作用域, 更安全

1. JSON對象

• 作用: 用于在json對象/數組與js對象/數組互相轉換
• JSON.stringify(obj/arr) js對象(數組)轉換為json對象(數組)
• JSON.parse(json) json對象(數組)轉換為js對象(數組)

1. Object擴充

• Object.create(prototype[, descriptors]) : 建立一個新的對象
  • 以指定對象為原型建立新的對象
  • 指定新的屬性, 并對屬性進行描述
    • value : 指定值
    • writable : 辨別目前屬性值是否是可修改的, 預設為true
    • get方法 : 用來得到目前屬性值的回調函數
    • set方法 : 用來監視目前屬性值變化的回調函數
• Object.defineProperties(object, descriptors) : 為指定對象定義擴充多個屬性

1. Array擴充

• Array.prototype.indexOf(value) : 得到值在數組中的第一個下标
• Array.prototype.lastIndexOf(value) : 得到值在數組中的最後一個下标
• Array.prototype.forEach(function(item, index){}) : 周遊數組
• Array.prototype.map(function(item, index){}) : 周遊數組傳回一個新的數組
• Array.prototype.filter(function(item, index){}) : 周遊過濾出一個子數組

1. Function擴充

• Function.prototype.bind(obj)
  • 将函數内的this綁定為obj, 并将函數傳回
• 面試題: 差別bind()與call()和apply()?
  • fn.bind(obj) : 指定函數中的this, 并傳回函數
  • fn.call(obj) : 指定函數中的this,并調用函數

1. Date擴充

• Date.now() : 得到目前時間值

ES6

1. 2個新的關鍵字

• let/const
• 塊作用域
• 沒有變量提升
• 不能重複定義
• 值不可變

1. 變量的解構指派

• 将包含多個資料的對象(數組)一次指派給多個變量
• 資料源: 對象/數組
• 目标: {a, b}/[a, b]

1. 各種資料類型的擴充

• 字元串
  • 模闆字元串
    • 作用: 台灣字元串的拼接
    • 模闆字元串必須用``
    • 變化的部分使用${xxx}定義
  • contains(str) : 判斷是否包含指定的字元串
  • startsWith(str) : 判斷是否以指定字元串開頭
  • endsWith(str) : 判斷是否以指定字元串結尾
  • repeat(count) : 重複指定次數
• 對象
  • 簡化的對象寫法

    let name = 'Tom';
    let age = 12;
    let person = {
        name,
        age,
        setName (name) {
            this.name = name;
        }
    };
               

  • Object.assign(target, source1, source2..) : 将源對象的屬性複制到目标對象上
  • Object.is (v1, v2) : 判斷2個資料是否完全相等
  • __proto__屬性 : 隐式原型屬性
• 數組
  • Array.from(v) : 将僞數組對象或可周遊對象轉換為真數組
  • Array.of(v1, v2, v3) : 将一系列值轉換成數組
  • find(function(value, index, arr){return true}) : 找出第一個滿足條件傳回true的元素
  • findIndex(function(value, index, arr){return true}) : 找出第一個滿足條件傳回true的元素下标
• 函數
  • 箭頭函數
    • 用來定義匿名函數
    • 基本文法:
      • 沒有參數: () => console.log('xxxx')
      • 一個參數: i => i+2
      • 大于一個參數: (i,j) => i+j
      • 函數體不用大括号: 預設傳回結果
      • 函數體如果有多個語句, 需要用{}包圍
    • 使用場景: 多用來定義回調函數
  • 形參的預設值
    • 定義形參時指定其預設的值
  • rest(可變)參數
    • 通過形參左側的...來表達, 取代arguments的使用
  • 擴充運算符(...)
    • 可以分解出數組或對象中的資料

1. set/Map容器結構

• 容器: 能儲存多個資料的對象, 同時必須具備操作内部資料的方法
• 任意對象都可以作為容器使用, 但有的對象不太适合作為容器使用(如函數)
• Set的特點: 儲存多個value, value是不重複 ====>數組元素去重
• Map的特點: 儲存多個key--value, key是不重複, value是可以重複的
• API
  • Set()/Set(arr) //arr是一維數組
  • add(value)
  • delete(value)
  • clear();
  • has(value)
  • size
  • Map()/Map(arr) //arr是二維數組
  • set(key, value)
  • delete(key)
  • clear()
  • has(key)

1. for--of循環

• 可以周遊任何容器
• 僞/類對象
• 可疊代的對象

1. Promise

• 解決

  回調地獄

  (回調函數的層層嵌套, 編碼是不斷向右擴充, 閱讀性很差)
• 能以同步編碼的方式實作異步調用
• 在es6之前原生的js中是沒這種實作的, 一些第三方架構(jQuery)實作了promise
• ES6中定義實作API:

  // 1. 建立promise對象
  var promise = new Promise(function(resolve, reject){ 
    // 做異步的操作 
    if(成功) { // 調用成功的回調
      resolve(result); 
    } else { // 調用失敗的回調
      reject(errorMsg); 
    } 
  }) 
  // 2. 調用promise對象的then()
  promise.then(function(
    result => console.log(result), 
    errorMsg => alert(errorMsg)
  ))
             

1. class類

• 用 class 定義一類
• 用 constructor() 定義構造方法(相當于構造函數)
• 一般方法: xxx () {}
• 用extends來定義子類
• 用super()來父類的構造方法
• 子類方法自定義: 将從父類中繼承來的方法重新實作一遍
• js中沒有方法重載(方法名相同, 但參數不同)的文法

1. 子產品化(後面講)

ES7

• 指數運算符: **
• Array.prototype.includes(value) : 判斷數組中是否包含指定value
• 差別方法的2種稱謂
  • 靜态(工具)方法
    • Fun.xxx = function(){}
  • 執行個體方法
    • 所有執行個體對象 : Fun.prototype.xxx = function(){} //xxx針對Fun的所有執行個體對象
    • 某個執行個體對象 : fun.xxx = function(){} //xxx隻是針對fun對象