文章目錄

• • 🌍一. ES6 新特性
  • • ??1. ES6 基本介紹
    • ??2. 基本使用
    • • 2.1 let 聲明變量
      • 2.2 const 聲明常量/只讀變量
      • 2.3 解構賦值
      • 2.4 模板字符串
      • 2.5 對象拓展運算符
      • 2.6 箭頭函數
  • 🌍二. Promise
  • • ??1. 基本使用
    • ??2. 如何解決回調地獄問題
    • • 2.1回調地獄問題
      • 2.2 使用 Promise
      • 2.3Promise 的優勢
  • 🌍三. 模塊化編程
  • • ??1. 基本介紹
    • ??2. CommonJS 模塊編程
    • ??3. ES6 模塊編程
    • • 1. ES6模塊的關鍵特性
      • 2. 實踐中的注意事項

🙋?♂? 作者：@whisperrr.🙋?♂?

👀 專欄：JavaWeb👀

💥 標題：【JavaWeb13】了解ES6的核心特性，對于提高JavaScript編程效率有哪些潛在影響？💥

?? 寄語：比較是偷走幸福的小偷??

🌍一. ES6 新特性

首先給大家推薦倆個學習ES6的網址。

ECMA International 官方網站：這個網站提供了 ES6 的官方文檔，詳細介紹了 ES6 的所有特性和規范。這是一個權威且詳盡的學習資源，適合那些希望深入了解語言規范的開發者。

• 網址：https://262.ecma-international.org/6.0/

阮一峰的 ES6 教程：這是由阮一峰編寫的一本關于 ES6 的入門書籍，廣受前端開發者歡迎。這本書以簡單易懂的方式介紹了 ES6 的各種特性，非常適合初學者和希望快速掌握 ES6 的開發者。

• 網址：https://es6.ruanyifeng.com/#docs/let

??1. ES6 基本介紹

1.ES6 是什么?

1. ECMAScript 6.0(以下簡稱 ES6)是 JavaScript 語言的下一代標準， 2015 年 6 月發布。
2. ES6 設計目標：達到 JavaScript 語言可以用來編寫復雜的大型程序，成為企業級開發語言
3. ECMAScript 和 JavaScript 的關系：ECMAScript 是 JavaScript 的規范/規則，JavaScript 是ECMAScript 的一種實現

??2. 基本使用

2.1 let 聲明變量

在ES6（ECMAScript 2015）中，let 關鍵字被引入用來聲明變量，它的用法與 var 類似，但有以下幾個重要的區別：

1. 塊級作用域：let 聲明的變量只在它所在的代碼塊內有效。
2. 不存在變量提升：let 聲明的變量不會被提升到作用域的頂部。
3. 暫時性死區：在聲明之前就使用 let 聲明的變量會導致ReferenceError錯誤。

下面是 let 聲明變量的幾種基本用法：

基本聲明

let a;
let b = 10;

塊級作用域示例

if (true) {let message = "Hello, World!";console.log(message); // "Hello, World!"
}
// 在這里訪問 message 會報錯，因為 message 是在 if 塊中聲明的

不存在變量提升

console.log(a); // 報錯：ReferenceError: a is not defined
let a = 'I am not hoisted';

只能聲明一次,

let num2 = 600;
let num2 = 900;

num2已經聲明過了，再次使用let聲明會報錯
Uncaught SyntaxError: redeclaration of let num2

暫時性死區示例

var tmp = 123;
if (true) {tmp = 'abc'; // ReferenceError: Cannot access 'tmp' before initializationlet tmp;
}

在這個例子中，盡管 tmp 在 let tmp; 聲明之前已經被聲明為一個全局變量，但在 let 聲明之前訪問 tmp 會導致錯誤，因為在 if 塊中的 tmp 的暫時性死區內，它還未被聲明。
使用 let 可以幫助避免JavaScript中常見的一些錯誤，并且使得代碼更加安全和易于理解。

2.2 const 聲明常量/只讀變量

在ES6（ECMAScript 2015）中，const 關鍵字用于聲明一個只讀的常量。這意味著一旦一個變量被聲明為常量，它的值就不能再被改變。下面是 const 聲明常量的一些基本用法和規則：

基本聲明

const PI = 3.14159;

常量規則

1. 必須初始化：聲明一個常量時，必須同時初始化它的值，否則會報錯。

   const FOO; // SyntaxError: Missing initializer in const declaration
   

2. 不可重新賦值：一旦聲明，常量的值就不能再被改變。

   const MAX_SIZE = 100;
   MAX_SIZE = 200; // TypeError: Assignment to constant variable.
   

2.3 解構賦值

1.基本介紹

1. 解構賦值是對賦值運算符的擴展
2. 是一種針對數組或者對象進行模式匹配，然后對其中的變量進行賦值
3. 主要有兩種形式： 數組解構和對象解構

2.數組解構

ES6（ECMAScript 2016）引入了數組解構（Array Destructuring），它是一種表達式，可以方便地從數組中提取值并賦給變量。數組解構的語法形式是在一個賦值操作符的左側使用一個數組字面量。

以下是數組解構的一些基本用法：

//第一種方式
let arr = [1, 2, 3];
let [a, b, c] = arr;
//第二種方式
let [num1, num2, num3] = [100, 200, 300];

3.對象解構

ES6（ECMAScript 2015）同樣引入了對象解構（Object Destructuring），它允許你將對象中的屬性直接賦值給變量。對象解構的語法是在賦值操作符的左側使用一個對象字面量。

以下是對象解構的一些基本用法：

//第一種方式
let monster = {name: '牛魔王', age: 800};
let {name, age} = monster;
//第二種方式
let {name, age} = {name: '牛魔王', age: 800};//也可以當做形參
function f1({name, age}) {
console.log("f1-name=", name, " ", "f1-age=", age)
}
f1(monster);

1.把 monster 對象的屬性, 賦值給{name,age}
2.{name,age} 的取名 name 和 age 要和 monster 對象的屬性名保持一致
3.使用{} 包括, 不要使用[]
4.{name,age} 順序是無所謂

2.4 模板字符串

• 模板字符串使用反引號 ` 字符串包裹
• 可作為普通字符串
• 可用來定義多行字符串，即可以將換行字符串原生輸出
• 字符串插入變量和表達式, 使用 ${}
• 字符串中調用函數

let str1 = `for(int i = 0;i < 10;i++){
System.out.println("i="+i);
}`;let str2 = `教育名稱=${name}`;
let str3 = `1+2=${1 + 2}`;

2.5 對象拓展運算符

對象擴展運算符（Spread Operator），用三個點（…）表示，允許你將一個對象的可枚舉屬性復制到另一個對象中。這在合并對象、傳遞參數等場景中非常有用。

合并對象,你可以使用擴展運算符來合并兩個或多個對象。

const obj1 = { a: 1, b: 2 }; 
const obj2 = { b: 3, c: 4 }; 
const mergedObj = { …obj1, …obj2 }; 
console.log(mergedObj); // { a: 1, b: 3, c: 4 }

在這個例子中，obj2 的屬性 b 覆蓋了 obj1 中的 b 屬性。

2.6 箭頭函數

1.基本介紹

1. 箭頭函數提供更加簡潔的函數書寫方式。
2. 基本語法是：(參數列表) => { 函數體 }
3. 箭頭函數沒有參數或有多個參數，要用 () 括起來,箭頭函數只有一個參數, 可以省略()
4. 箭頭函數函數體有多行語句，用 {} 包裹起來，表示代碼塊
5. 函數體只有一行語句，并且需要返回結果時，可以省略 {}, 結果會自動返回
6. 箭頭函數多用于匿名函數的定義

let f2 = (n, m) => {
var res = 0
for (var i = n; i <= m; i++) {
res += i
}
return res
};

🌍二. Promise

??1. 基本使用

1.Promise 基本介紹

1. 傳統的 Ajax 異步調用在需要多個操作的時候，會導致多個回調函數嵌套，導致代碼不夠直觀，就是常說的 Callback Hell
2. 為了解決上述的問題，Promise 對象應運而生，在 EMCAScript 2015 當中已經成為標準
3. Promise 是異步編程的一種解決方案。
4. 從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息
5. 一句話: Promise 是異步編程的一種解決方案, 可以解決傳統 Ajax 回調函數嵌套問題

2.需求分析/圖解

3.執行效果

??2. 如何解決回調地獄問題

下面讓我們詳細探討一下如何使用 Promise 來解決傳統 Ajax 請求中的嵌套回調問題。

2.1回調地獄問題

在傳統的異步編程模式中，如果需要按順序執行多個異步操作（比如多個 Ajax 請求），通常會寫出如下嵌套回調的代碼：

// 假設我們使用的是 jQuery 的 $.ajax 方法
$.ajax({url: 'url1',success: function(response1) {// 處理 response1$.ajax({url: 'url2',success: function(response2) {// 處理 response2$.ajax({url: 'url3',success: function(response3) {// 處理 response3// 如果還有更多操作，繼續嵌套...},error: function(error3) {// 處理 error3}});},error: function(error2) {// 處理 error2}});},error: function(error1) {// 處理 error1}
});

這種代碼結構被稱為“回調地獄”，因為隨著異步操作數量的增加，代碼變得越來越難以閱讀和維護。

2.2 使用 Promise

Promise 提供了一種更加優雅的方式來處理異步操作。以下是使用 Promise 改寫上述代碼的步驟：

1. 創建 Promise 對象：對于每個異步操作，創建一個返回 Promise 對象的函數。

function fetchUrl(url) {return new Promise((resolve, reject) => {$.ajax({url: url,success: function(response) {resolve(response);},error: function(error) {reject(error);}});});
}

2. 鏈式調用 .then() 方法：使用 .then() 方法來處理每個 Promise 的成功結果，并在每個 .then() 方法中返回一個新的 Promise，以便鏈式調用。

fetchUrl('url1').then(response1 => {// 處理 response1// 可以返回新的 Promise 或值return fetchUrl('url2');}).then(response2 => {// 處理 response2// 繼續返回新的 Promisereturn fetchUrl('url3');}).then(response3 => {// 處理 response3}).catch(error => {// 處理任何在執行過程中出現的錯誤});

在上面的代碼中，每個 fetchUrl 函數調用都返回一個新的 Promise 對象。當這個 Promise 成功解決（resolved）時，.then() 方法會被調用，并傳入解決值。如果 Promise 被拒絕（rejected），.catch() 方法會被調用，并傳入拒絕的原因。

2.3Promise 的優勢

• 代碼扁平化：Promise 通過鏈式調用來避免嵌套回調，使代碼更加扁平化。
• 更好的錯誤處理：.catch() 方法可以捕獲鏈中任何 Promise 的錯誤，而不是在每個回調中分別處理。
• 可讀性和可維護性：鏈式調用使得異步代碼的流程更加清晰，易于理解和維護。
  通過使用 Promise，我們可以編寫更加清晰和結構化的異步代碼，避免了回調地獄，并提供了更強大的錯誤處理機制。

🌍三. 模塊化編程

??1. 基本介紹

1. 傳統非模塊化開發有如下的缺點：(1)命名沖突 (2)文件依賴
2. Javascript 代碼越來越龐大，Javascript 引入模塊化編程，開發者只需要實現核心的業務邏輯，其他都可以加載別人已經寫好的模塊
3. Javascript 使用"模塊"（module）的概念來實現模塊化編程, 解決非模塊化編程問題

2.模塊化編程原理示意圖

??2. CommonJS 模塊編程

• 每個 js 文件就是一個模塊，有自己的作用域。在文件中定義的變量、函數、類/對象，都是私有的，對其他 js 文件不可見
• CommonJS 使用 module.exports={} / exports={}導出 模塊 , 使用 let/const 名稱 =require("xx.js")導入模塊
  

CommonJS 是一種模塊規范，最初被用于服務器端的 JavaScript 環境，尤其是 Node.js。它定義了一種簡單的方式來創建和消費模塊。以下是 CommonJS 模塊編程的基本概念和用法：

1.模塊定義

在 CommonJS 中，一個模塊是一個文件。模塊可以通過 module.exports 對象來導出值，也可以通過 exports 變量來導出多個成員。以下是導出一個函數的例子：

// myModule.js
function myFunction() {// ...
}
module.exports = myFunction;

或者，如果你想要導出多個函數或對象：

// myModule.js
function myFunction() {// ...
}
function anotherFunction() {// ...
}
exports.myFunction = myFunction;
exports.anotherFunction = anotherFunction;

2.模塊引用
要使用一個模塊，你可以使用 require 函數來引入它。require 函數會返回模塊導出的對象。

// main.js
const myModule = require('./myModule');
myModule.myFunction();

如果模塊導出的是一個函數或單個值，你可以直接使用它：

// main.js
const myFunction = require('./myModule');
myFunction();

3.模塊緩存
Node.js 會緩存通過 require 加載的模塊。這意味著每次調用 require 時，如果模塊已經被加載過，它會返回緩存的模塊，而不是重新加載。

特點

• 同步加載：CommonJS 模塊是同步加載的，這意味著模塊加載時會阻塞后續代碼的執行，直到模塊加載完成。
• 循環依賴：CommonJS 可以處理模塊間的循環依賴，但是需要小心處理，因為可能會出現只部分加載的情況。

以下是一個簡單的 CommonJS 模塊化編程的例子：

// math.js
exports.add = function(a, b) {return a + b;
};
exports.subtract = function(a, b) {return a - b;
};
// main.js
const math = require('./math');
console.log(math.add(1, 2)); // 輸出 3
console.log(math.subtract(5, 2)); // 輸出 3

在這個例子中，math.js 模塊導出了兩個函數，main.js 通過 require 引入了這個模塊，并使用了它的功能。
CommonJS 模塊規范在 Node.js 和一些瀏覽器環境中得到了廣泛的支持，但是在瀏覽器環境中，通常使用 ES6 Modules 或 AMD 作為模塊化的解決方案。

??3. ES6 模塊編程

• ES6 使用
  (1)export {名稱/對象/函數/變量/常量}
  (2) export 定義=
  (3) export default {}導出模塊
• 使用 import {} from "xx.js" / import名稱 form "xx.js" 導入模塊
  
  ES6模塊化編程是JavaScript語言的一個重要進步，它為開發者提供了一種官方的、標準化的方式來組織和重用代碼。在此之前，JavaScript社區已經嘗試了多種模塊化方案，如AMD、CommonJS等，但它們都是非標準的，或者在某些環境中有限制。ES6模塊的引入，標志著JavaScript在語言層面上對模塊化的正式支持。

1. ES6模塊的關鍵特性

1. 導出（Export）與導入（Import）
   ES6模塊通過export和import關鍵字來管理模塊的對外接口和依賴關系。這使得模塊之間的交互變得直觀且易于理解。你可以導出單個變量、函數、類或者整個模塊對象，也可以導入一個模塊中的特定部分或者整個模塊。
2. 默認導出（Default Export）
   默認導出允許一個模塊導出一個沒有名字的值，這在使用模塊時提供了更大的靈活性。每個模塊只能有一個默認導出，但可以與多個命名導出共存。
3. 編譯時加載
   與CommonJS的運行時加載不同，ES6模塊是在編譯時進行加載的。這意味著模塊的依賴關系在代碼執行之前就已經確定，這有助于提高性能并允許進行更多的編譯時優化。
4. 樹搖（Tree Shaking）
   由于ES6模塊的靜態結構，未使用的導出可以在打包過程中被移除，這個過程被稱為“樹搖”。這有助于減少最終打包文件的體積，提高應用的加載速度。
5. 命名空間導出（Namespace Export）
   ES6模塊還支持命名空間導出，允許你將多個導出聚合到一個對象中。這對于組織大量導出非常有用，可以避免命名沖突。

2. 實踐中的注意事項

• 瀏覽器支持：雖然現代瀏覽器支持ES6模塊，但在使用時可能需要設置正確的MIME類型，并在<script>標簽中使用type="module"。
• 服務器端渲染：在Node.js等服務器端環境中，可能需要使用特定的模塊解析策略或轉換工具，如Babel，來兼容ES6模塊。
• 打包工具：在實際開發中，通常會使用Webpack、Rollup等打包工具來處理模塊依賴，優化生產環境下的代碼。
  ES6模塊化編程不僅提升了代碼的可維護性和可重用性，也為JavaScript的生態系統帶來了標準化和一致性。隨著現代前端框架和工具鏈的發展，ES6模塊已經成為編寫現代JavaScript應用程序的基石。