Vue3 學習教程，從入門到精通，vue3學習中的JavaScript ES6 特性詳解與案例（5）

vue3學習中的JavaScript ES6 特性詳解與案例

ES6（ECMAScript 2015）是 JavaScript 的一個重要版本，引入了許多新特性，極大地提升了語言的表達能力和開發效率。本文將詳細介紹 ES6 的主要特性，包括 let 和 const 命令、變量的解構賦值、箭頭函數、Map 數據結構、模塊化語法以及 Promise 對象，并結合具體案例代碼，幫助您全面掌握 ES6 的應用。

一、`let` 和 `const` 命令

1. `let` 命令

特點：

塊級作用域：let 聲明的變量具有塊級作用域，只在所在的代碼塊內有效。
不存在變量提升：let 聲明的變量不會在作用域頂部被提升。
暫時性死區：在變量聲明之前使用變量會報錯。

語法：

let variableName = value;

案例代碼：

// 示例1：塊級作用域
function example() {if (true) {let x = 10;console.log(x); // 輸出: 10}console.log(x); // 報錯: x is not defined
}example();

詳細注釋：

let x = 10：在 if 代碼塊內聲明變量 x。
塊級作用域：變量 x 僅在 if 代碼塊內有效，外部無法訪問。

2. `const` 命令

特點：

常量聲明：聲明的變量為常量，必須在聲明時初始化，且不能重新賦值。
塊級作用域：與 let 一樣，const 也具有塊級作用域。
引用類型：對于對象和數組，const 聲明的變量引用不可改變，但對象或數組的內容可以修改。

語法：

const PI = 3.14159;

案例代碼：

// 示例1：常量聲明
const MAX_USERS = 100;
console.log(MAX_USERS); // 輸出: 100// 嘗試重新賦值
MAX_USERS = 200; // 報錯: Assignment to constant variable.// 示例2：對象和數組
const person = {name: '張三',age: 25,
};
person.age = 26; // 允許修改屬性
console.log(person.age); // 輸出: 26const numbers = [1, 2, 3];
numbers.push(4); // 允許修改數組內容
console.log(numbers); // 輸出: [1, 2, 3, 4]

詳細注釋：

const MAX_USERS = 100：聲明一個常量 MAX_USERS。
不可重新賦值：嘗試重新賦值會報錯。
對象和數組：可以修改對象屬性和數組內容，但無法重新賦值整個對象或數組。

3. 上機訓練

練習1：使用 let 和 const 聲明變量

// 練習1
function checkScope() {if (true) {let a = 'let變量';const b = 'const變量';console.log(a); // 輸出: let變量console.log(b); // 輸出: const變量}console.log(a); // 報錯: a is not definedconsole.log(b); // 報錯: b is not defined
}checkScope();

練習2：嘗試修改 const 聲明的變量

// 練習2
const greeting = 'Hello';
greeting = 'Hi'; // 報錯: Assignment to constant variable.const person = { name: '李四', age: 30 };
person.age = 31; // 允許修改屬性
console.log(person.age); // 輸出: 31

二、變量的解構賦值

1. 數組的解構賦值

語法：

let [a, b, c] = [1, 2, 3];

案例代碼：

// 示例1：基本用法
let [x, y, z] = [10, 20, 30];
console.log(x, y, z); // 輸出: 10 20 30// 示例2：默認值
let [a, b, c = 5] = [1, 2];
console.log(a, b, c); // 輸出: 1 2 5// 示例3：嵌套解構
let [first, [second, third]] = [1, [2, 3]];
console.log(first, second, third); // 輸出: 1 2 3

2. 對象的解構賦值

語法：

let { name, age } = { name: '張三', age: 25 };

案例代碼：

// 示例1：基本用法
let { name, age } = { name: '李四', age: 30 };
console.log(name, age); // 輸出: 李四 30// 示例2：默認值
let { city, country = '中國' } = { city: '北京' };
console.log(city, country); // 輸出: 北京 中國// 示例3：嵌套解構
let { name: userName, address: { street, city: userCity } } = { name: '王五', address: { street: '中山路', city: '上海' } };
console.log(userName, street, userCity); // 輸出: 王五 中山路 上海

3. 上機訓練

練習1：數組解構賦值

// 練習1
function getCoordinates() {return [10, 20];
}let [x, y] = getCoordinates();
console.log(x, y); // 輸出: 10 20

練習2：對象解構賦值

// 練習2
function getUser() {return {username: 'zhangsan',email: 'zhangsan@example.com',age: 28,};
}let { username, email, age } = getUser();
console.log(username, email, age); // 輸出: zhangsan zhangsan@example.com 28

三、使用箭頭函數

1. 箭頭函數起因

箭頭函數是 ES6 引入的一種更簡潔的函數定義方式，旨在簡化函數語法，并解決傳統函數中 this 綁定的問題。

2. 箭頭函數定義

語法：

const func = (參數) => {// 函數體
};

案例代碼：

// 示例1：基本用法
const add = (a, b) => a + b;
console.log(add(2, 3)); // 輸出: 5// 示例2：單參數
const square = x => x * x;
console.log(square(4)); // 輸出: 16// 示例3：多行函數體
const multiply = (a, b) => {const result = a * b;return result;
};
console.log(multiply(3, 4)); // 輸出: 12

3. 和普通函數的區別

語法更簡潔：箭頭函數省略了 function 關鍵字和 {}（如果函數體只有一行）。
this 綁定：箭頭函數不會創建自己的 this，它會捕獲其定義時的 this 值。
沒有 arguments 對象：箭頭函數沒有自己的 arguments 對象。
不能用作構造函數：不能使用 new 調用箭頭函數。

案例代碼：

// 示例1：`this` 綁定
const person = {name: '張三',greet: function() {setTimeout(() => {console.log(`Hello, ${this.name}`);}, 1000);},
};person.greet(); // 輸出: Hello, 張三// 使用普通函數
const person2 = {name: '李四',greet: function() {setTimeout(function() {console.log(`Hello, ${this.name}`);}, 1000);},
};person2.greet(); // 輸出: Hello, undefined

4. 箭頭函數不適用場景

需要動態 this：例如事件處理器、對象的方法。
需要 arguments 對象：需要訪問函數參數時。
作為構造函數：不能使用 new 調用箭頭函數。

案例代碼：

// 示例1：事件處理器
const button = document.querySelector('button');
button.addEventListener('click', () => {console.log(this === window); // 輸出: true// `this` 不指向按鈕元素
});

四、Map 數據結構

1. Map 數據結構的特點

鍵值對存儲：類似于對象，但鍵可以是任何類型，而不僅僅是字符串或符號。
有序：Map 中的元素按照插入順序排列。
支持迭代：可以使用 for...of 循環進行迭代。
鍵的唯一性：每個鍵都是唯一的，重復的鍵會覆蓋之前的值。

2. 如何創建 Map

語法：

const map = new Map();

案例代碼：

// 示例1：基本用法
const map = new Map();
map.set('name', '張三');
map.set('age', 25);
console.log(map.get('name')); // 輸出: 張三
console.log(map.size); // 輸出: 2// 示例2：使用對象作為鍵
const key = { id: 1 };
map.set(key, '對象作為鍵');
console.log(map.get(key)); // 輸出: 對象作為鍵

3. Map 常用屬性及方法

set(key, value)：添加或更新鍵值對。
get(key)：獲取指定鍵的值。
has(key)：判斷是否存在指定鍵。
delete(key)：刪除指定鍵。
clear()：清空 Map。
size：返回 Map 中鍵值對的數量。
keys()：返回所有鍵的迭代器。
values()：返回所有值的迭代器。
entries()：返回所有鍵值對的迭代器。

案例代碼：

// 示例1：常用方法
const map = new Map();
map.set('name', '李四');
map.set('age', 30);console.log(map.has('name')); // 輸出: true
console.log(map.size); // 輸出: 2map.delete('age');
console.log(map.size); // 輸出: 1map.clear();
console.log(map.size); // 輸出: 0

4. 迭代 Map

案例代碼：

// 示例1：迭代鍵值對
const map = new Map();
map.set('name', '王五');
map.set('age', 22);
map.set('city', '北京');for (const [key, value] of map) {console.log(`${key}: ${value}`);
}
// 輸出:
// name: 王五
// age: 22
// city: 北京

五、Module 的語法

1. 概述

模塊化是現代 JavaScript 開發中不可或缺的特性。ES6 引入了模塊化系統，通過 export 和 import 關鍵字實現模塊的導出和導入。

2. `export` 和 `import` 命令

導出語法：

// 導出變量
export const name = '張三';// 導出函數
export function greet() {console.log('Hello');
}// 導出對象
export const person = {name: '李四',age: 25,
};// 默認導出
export default function() {console.log('默認導出');
}

導入語法：

// 導入單個導出
import { name, greet } from './module.js';// 重命名導入
import { person as user } from './module.js';// 導入默認導出
import defaultFunc from './module.js';// 導入所有導出
import * as module from './module.js';

案例代碼：

module.js

// module.js
export const name = '張三';
export function greet() {console.log('Hello');
}export const person = {name: '李四',age: 25,
};export default function() {console.log('默認導出');
}

main.js

// main.js
import { name, greet, person, default as defaultFunc } from './module.js';console.log(name); // 輸出: 張三
greet(); // 輸出: Hello
console.log(person); // 輸出: { name: '李四', age: 25 }
defaultFunc(); // 輸出: 默認導出

3. `export default` 命令

說明： 每個模塊可以有一個默認導出，使用 export default 導出。

案例代碼：

module.js

// module.js
export default function() {console.log('默認導出');
}

main.js

// main.js
import myFunc from './module.js';
myFunc(); // 輸出: 默認導出

4. 模塊加載順序

靜態加載：模塊的導入在編譯時解析，模塊依賴關系在運行前確定。
循環依賴：ES6 模塊支持循環依賴，但需要謹慎處理以避免錯誤。

六、Promise 對象

1. Promise 的含義

Promise 是 ES6 引入的一種用于處理異步操作的對象。它代表一個異步操作的最終完成或失敗，并返回其結果。

2. 基本用法

語法：

const promise = new Promise((resolve, reject) => {// 異步操作if (/* 成功 */) {resolve(value);} else {reject(error);}
});

案例代碼：

// 示例1：基本用法
const promise = new Promise((resolve, reject) => {setTimeout(() => {const success = true;if (success) {resolve('操作成功');} else {reject('操作失敗');}}, 1000);
});promise.then((message) => {console.log(message); // 輸出: 操作成功},(error) => {console.log(error);}
);

3. Promise 鏈式調用

案例代碼：

// 示例2：鏈式調用
const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve(10);}, 1000);
});promise.then((value) => {console.log('初始值:', value); // 輸出: 初始值: 10return value + 5;}).then((value) => {console.log('加5后:', value); // 輸出: 加5后: 15return value * 2;}).then((value) => {console.log('乘2后:', value); // 輸出: 乘2后: 30});

4. `Promise.all` 和 `Promise.race`

案例代碼：

// 示例3：`Promise.all`
const promise1 = Promise.resolve('成功1');
const promise2 = Promise.resolve('成功2');
const promise3 = Promise.reject('失敗3');Promise.all([promise1, promise2, promise3]).then((values) => {console.log(values);}).catch((error) => {console.log('其中一個 Promise 失敗:', error); // 輸出: 其中一個 Promise 失敗: 失敗3});// 示例4：`Promise.race`
const promiseA = new Promise((resolve, reject) => {setTimeout(() => {resolve('A');}, 500);
});
const promiseB = new Promise((resolve, reject) => {setTimeout(() => {resolve('B');}, 300);
});Promise.race([promiseA, promiseB]).then((value) => {console.log('第一個完成的 Promise:', value); // 輸出: 第一個完成的 Promise: B});

七、綜合性案例

1. 綜合 ES6 特性應用

目標： 結合 let, const, 解構賦值, 箭頭函數, Map, 模塊化, Promise 等特性，實現一個簡單的用戶管理系統。

案例代碼：

module.js

// module.js
export const users = [{ id: 1, name: '張三', age: 25 },{ id: 2, name: '李四', age: 30 },{ id: 3, name: '王五', age: 22 },
];export const getUserById = (id) => {return new Promise((resolve, reject) => {setTimeout(() => {const user = users.find(user => user.id === id);if (user) {resolve(user);} else {reject('用戶不存在');}}, 1000);});
};

main.js

// main.js
import { getUserById, users } from './module.js';const userId = 2;// 使用解構賦值獲取用戶信息
getUserById(userId).then(({ name, age }) => {console.log(`用戶姓名: ${name}, 年齡: ${age}`);}).catch((error) => {console.log(error);});// 使用 Map 存儲用戶信息
const userMap = new Map();
users.forEach(user => {userMap.set(user.id, user);
});console.log(userMap.get(userId)); // 輸出: { id: 2, name: '李四', age: 30 }

詳細注釋：

模塊化導出：在 module.js 中導出 users 數組和 getUserById 函數。
Promise 使用：調用 getUserById 方法獲取用戶信息，并使用 Promise 處理異步結果。
解構賦值：在 then 中使用解構賦值獲取用戶姓名和年齡。
Map 數據結構：使用 Map 存儲用戶信息，并獲取特定用戶。
箭頭函數：使用箭頭函數簡化代碼。

2. 結合 Vue 3 和 Axios 使用 ES6 特性

目標： 在 Vue 3 應用中使用 ES6 特性，結合 Axios 進行網絡請求。

案例代碼：

UserStore.js

// UserStore.js
import { defineStore } from 'pinia';
import axios from 'axios';export const useUserStore = defineStore('user', {state: () => ({users: [],loading: false,error: null,}),actions: {async fetchUsers() {this.loading = true;this.error = null;try {const response = await axios.get('/api/users');this.users = response.data;} catch (err) {this.error = '獲取用戶列表失敗';console.error(err);} finally {this.loading = false;}},},
});

UserList.vue

<!-- UserList.vue -->
<template><div><h1>用戶列表</h1><p v-if="userStore.loading">加載中...</p><div v-else><ul><li v-for="user in userStore.users" :key="user.id">{{ user.name }} - {{ user.age }}</li></ul></div><p v-if="userStore.error">{{ userStore.error }}</p><button @click="loadUsers">加載用戶</button></div>
</template><script setup>
import { useUserStore } from '@/stores/UserStore';const userStore = useUserStore();const loadUsers = () => {userStore.fetchUsers();
};
</script><style scoped>
button {padding: 10px 20px;margin-top: 10px;
}
</style>

詳細注釋：