ES6 語法小摘

CodeFarmer發表於2021-11-16

塊作用域構造 let 和 const

  1. let 宣告，用法與 var 相同，不過用 let 宣告的變數不會被提升，可以將變數的作用域限制在當前程式碼塊中。
  2. 使用 let 宣告變數，還可以防止變數的重複宣告。
  3. 如果用 const 宣告物件，物件本身的繫結不能修改，但物件的屬性和值是可以修改的。
  4. 在全域性作用域中使用 var 宣告的變數或物件，將作為瀏覽器環境中的 window 物件的屬性，這意味著使用 var 很可能無意中覆蓋一個已經存在的全域性屬性
  5. 如果在全域性作用域下使用 let 和 const，則會在全域性作用域下建立一個新的繫結，但該繫結不會成為 window 物件的屬性

模板字面量

  1. 模板字面量的基礎語法就是用反引號 (`) 替換字串的單、雙引號
  2. 模板字面量如果需要在字串中新增新行，只需要在程式碼中直接換行
  3. 佔位符由一個左側的 ${ 和右側的 } 符號構成

預設引數

  1. 在 ES6 中，簡化了為形參提供預設值的過程，可以直接在引數列表中為形參指定預設值

rest 引數

  1. 在函式的命名引數前新增 3 個點，就表明這是一個 rest 引數，rest 引數是一個陣列，包含自它之後傳入的所有引數

展開運算子

  1. 展開運算子在語法上與 rest 引數相似，也是 3 個點，它可以將一個陣列轉換為各個獨立的引數，也可以取出物件的所有可遍歷屬性
  2. 展開運算子可以用來複制陣列
let arr1 = [1, 2, 3];
# arr2 與 arr1 是同一個陣列物件
let arr2 = arr1;    
# arr3 與 arr1 是兩個不同的陣列物件
let arr3 = [...arr1];
  1. 展開運算子也可以用來合併陣列
let arr1 = ['a'];
let arr2 = ['b', 'c'];
console.log([...arr1, ...arr2]);
  1. 展開運算子也可以用於取出物件的所有可遍歷屬性，複製到當前物件中
let book ={
    title: "Vue.js 從入門到實踐",
    price: 98
}

let bookDetail = {...book, desc: "a fine book"}
console.log(bookDetail);

物件字面量語法擴充套件

  1. 定義物件方法時可以省略冒號和 function 關鍵字
var car = {
    color: "red",
    doors: 4,
    showColor(){
        console.log(this.color);
    }
}
car.showColor();
console.log(car.showColor.name);
  1. 在 Javascript 中，訪問物件的屬性，可以通過點號(.) 或方括號（[]），如果屬性名包含了特殊字元或中文，或者需要通過計算得到屬性名，則只能使用方括號。

解構函式

  1. 如果使用 var、let 或 const 宣告解構變數，則必須提供初始化程式，即等號右側必須提供值
  2. 如果變數之前已經宣告，之後想要用解構語法給變數賦值，那麼需要用圓括號包裹整個解構賦值語句
let book = {
    title: "Vue.js 從入門到實踐",
    isbn: "987677898",
    price: 98
}
let title, isbn, price;
({title, isbn, price} = book);
  1. 當 book 物件中沒有 salesVolumn 屬性，或者該屬性值為 undefined 時，則使用預設的預設值。如果希望在使用解構賦值時，使用與物件屬性名不同的區域性變數名，那麼可以採用“屬性名：區域性變數名”的語法形式
let book = {
    title: "Vue.js 從入門到實戰",
    isbn: "98787733",
    price: 98
}
let {title: bookTitle, isbn: bookIsbn='test'} = book;
console.log(bookTitle);
console.log(bookIsbn);
  1. 與物件解構不同，如果為已經宣告過的變數進行陣列解構賦值，不需要使用圓括號包裹解構賦值語句
let arr = [1, 2, 3];
let a, b, c;
[a, b, c, d = 0] = arr;

模組

  1. 匯出可以分別匯出，也可以將匯出語句集中書寫在模組的尾部。當匯出內容較多時，採用後者會更加清晰；
  2. 沒有新增 export 關鍵字而定義的變數和類在模組外是不允許訪問的。
  3. 一個模組可以匯出且只能匯出一個預設值，預設值是通過使用 default 關鍵字指定的單個變數、函式或類。

Promise

  1. 每個 Promise 都會經歷一個短暫的生命週期，先是處於進行中（pending）的狀態，此時操作尚未完成，所以它也是未處理的（unsettled），一旦非同步操作執行結束，Promise 則變為已處理（settled）的狀態
  2. Promise 物件的狀態改變，只有兩種可能：從 pending 變為 fulfilled，或者從 pending 變為 rejected
  3. 通常是將 then() 方法和 catch() 方法一起使用來對非同步操作的結果進行處理，這樣能更清楚地指明操作結果是成功還是失敗
promise.then(function(value){
    //完成
    console.log(value);
}).catch(function(err){
    //拒絕
    console.error(err.message);
}
  1. Promise 鏈式呼叫時，有一個重要特性就是可以為後續的 Promise 傳遞資料
  2. 與 Javascript 中的 try/catch 程式碼塊不同，如果沒有使用 catch() 方法指定錯誤處理的回撥函式，那麼 Promise 物件丟擲的錯誤不會傳遞到外層程式碼，即不會有任何反應。
本作品採用《CC 協議》，轉載必須註明作者和本文連結
CodeFarmer

相關文章