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>

详细注释：