【Web】ES6新特性

ECMAScript簡介

ECMAScript6.0 ，簡稱 ES6 。ECMAScript 是一種由 ECMA 國際通過 ECMA-262 標準化的腳本，為 JavaScript 語言的下一代標準， 在 2015 年 6 月正式發佈。

類比於 Java ，經典程度堪比 JDK 1.8 版本。
但是兩者之間的區別， JDK 是具體實現，而 ES 就相當於 JSR 規範。

JSR，是 Java Specification Requests 的縮寫，意思是 Java 規範提案，是指向 JCP(Java Community Process) 提出新增一個標準化技術規範的正式請求。

從層級上看， ECMAScript 是一種規範/介面，JavaScript 是規範的具體實現。

let關鍵字

• let不會作用到 {} 外，var 會越域到 {} 外，且 var 聲明的變數有域提升的特性。
• var 可以多次聲明同一變數，使用 let 則會報錯，只能在作用範圍內聲明一次。
• var 定義之前可以使用，let 定義之前不可使用，關聯域提升特性。
• let 的聲明之後不允許改變，相當於 const 聲明的變數。

解構表達式

解構表達式，是一種可以用來簡化變數賦值的新語法。

• 支持 let arr = [1,2,3]; let [a,b,c] = arr; 語法
  • 該語法的特性，能夠更方便地在變數之間進行值傳遞，屬於數組解構表達式
• 支持對象解析 const { name: abc, age, language } = person; 語法
  • 該語法可以將一個 person 對象其中的 name 屬性賦值給 abc 對象，也就是將 name 屬性值對應賦值給 abc ，而不是需要一定相同的屬性名稱。
  • 這個過程類似於一種 JsonProperty 的轉換功能，但是不同的是 JsonProperty 註解提供的只是給原對象起一個別名，而不像對象解構表達式是將對象欄位賦值給新的語句。

字元串擴展

在 ES6 中，對於字元串新增了一些擴展。主要是新增部分為字元串 API 以及字元串模板、變數值插入。
字元串 API 新增的主要常用的有：str.startsWith("") 、str.endsWith("") 、str.includes("") 幾個。
字元串模板，主要用來輸出一些特定格式的字元串，保留在編輯器中的換行空格等字元。字元串模板的使用方式很簡單，只需要將目標模板使用 包起來即可。
變數值插入，類似於 Java 中的 @Value 註解所需要使用的表達式。格式為 ${} 。我們可以在 { } 中使用變數、表達式、函數，均可以輸出對應的計算結果。

函數優化

在 ES6 中，新增了一些函數的優化。主要有：

• 函數預設值

# 原始的預設值的寫法
function add1(a, b) {
  b = b | 1
  return a + b
}

# ES6 新增的寫法
function add1(a, b = 2) {
  return a + b
}

• 不定參數

function fun(...values) {
	console.log(values.length);
}

• 箭頭函數

var print = obj => console.log(obj);
# 調用
print("abc");

對象優化

對象函數

Object.keys(obj);
Object.values(obj);
Object.entries(obj);
# assign 函數將其他對象添加到目標對象中
Object.assign(target, obj1, obj2);

對象聲明簡寫

# 對象的屬性名和變數名一致，可以直接使用簡寫聲明對象
const obj1 = { age, name };

對象拓展運算符

# 該符號可以將對象的所有屬性取出來，可以用於對象的深拷貝、覆蓋
let person = { name: "Real", age: 20 }
let someone = { ...person}

數組優化

在 ES6 中，數組新增了 Map 和 Reduce 方法。

• map 方法：接收一個函數，將原數組中的所有元素用這個函數處理後放入新數組後返回。

arr = arr.map(item=> item*2);

• reduce 方法：為數組中的每個元素執行回調函數，不包含數組中被刪除或者未被賦值初始化的元素。

/**
* 1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
* 2、currentValue （數組中當前被處理的元素）
* 3、index （當前元素在數組中的索引）
* 4、array （調用 reduce 的數組）
*/
arr.reduce(callback,[initialValue])

promise非同步編排

<script>
  //1、查出當前用戶信息
  //2、按照當前用戶的id查出他的課程
  //3、按照當前課程id查出分數
  // $.ajax({
  //     url: "mock/user.json",
  //     success(data) {
  //         console.log("查詢用戶：", data);
  //         $.ajax({
  //             url: `mock/user_corse_${data.id}.json`,
  //             success(data) {
  //                 console.log("查詢到課程：", data);
  //                 $.ajax({
  //                     url: `mock/corse_score_${data.id}.json`,
  //                     success(data) {
  //                         console.log("查詢到分數：", data);
  //                     },
  //                     error(error) {
  //                         console.log("出現異常了：" + error);
  //                     }
  //                 });
  //             },
  //             error(error) {
  //                 console.log("出現異常了：" + error);
  //             }
  //         });
  //     },
  //     error(error) {
  //         console.log("出現異常了：" + error);
  //     }
  // });


  //1、Promise可以封裝非同步操作
  // let p = new Promise((resolve, reject) => { //傳入成功解析，失敗拒絕
  //     //1、非同步操作
  //     $.ajax({
  //         url: "mock/user.json",
  //         success: function (data) {
  //             console.log("查詢用戶成功:", data)
  //             resolve(data);
  //         },
  //         error: function (err) {
  //             reject(err);
  //         }
  //     });
  // });

  // p.then((obj) => { //成功以後做什麼
  //     return new Promise((resolve, reject) => {
  //         $.ajax({
  //             url: `mock/user_corse_${obj.id}.json`,
  //             success: function (data) {
  //                 console.log("查詢用戶課程成功:", data)
  //                 resolve(data);
  //             },
  //             error: function (err) {
  //                 reject(err)
  //             }
  //         });
  //     })
  // }).then((data) => { //成功以後乾什麼
  //     console.log("上一步的結果", data)
  //     $.ajax({
  //         url: `mock/corse_score_${data.id}.json`,
  //         success: function (data) {
  //             console.log("查詢課程得分成功:", data)
  //         },
  //         error: function (err) {
  //         }
  //     });
  // })

  function get(url, data) { //自己定義一個方法整合一下
    return new Promise((resolve, reject) => {
      $.ajax({
        url: url,
        data: data,
        success: function (data) {
          resolve(data);
        },
        error: function (err) {
          reject(err)
        }
      })
    });
  }

get("mock/user.json")
  .then((data) => {
    console.log("用戶查詢成功~~~:", data)
    return get(`mock/user_corse_${data.id}.json`);
  })
  .then((data) => {
    console.log("課程查詢成功~~~:", data)
    return get(`mock/corse_score_${data.id}.json`);
  })
  .then((data)=>{
    console.log("課程成績查詢成功~~~:", data)
  })
  .catch((err)=>{ //失敗的話catch
    console.log("出現異常",err)
  });

</script>

模塊化

模塊化就是把代碼進行拆分，方便重覆利用。類似於 Java 中的 import 導包；要使用一個包，必須先導入進來。而 JS 中沒有包的概念，對應的是模塊。
模塊功能主要由兩個命令構成：export 和 import

• export 命令用於規定模塊的對外介面
• import 命令用於導入其他模塊提供的功能

export 不僅可以導出對象，還可以導出變數、函數、數組等等一切 JS 中的變數。

• user.js

var name = "jack"
var age = 21
function add(a,b){
  return a + b;
}
// 導出變數和函數
export {name,age,add}

• hello.js

// export const util = {
//     sum(a, b) {
//         return a + b;
//     }
// }

// 導出後可以重命名
export default {
  sum(a, b) {
    return a + b;
  }
}
// export {util}

//`export`不僅可以導出對象，一切JS變數都可以導出。比如：基本類型變數、函數、數組、對象。

• main.js

import abc from "./hello.js"
import {name,add} from "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);