ES6 (ES2015) 全知识
·
ES6 是前端开发的 “现代语法基石”，Vue3、TS、工程化开发都基于 ES6 语法构建。以下按「核心语法→实战技巧→避坑指南」梳理，覆盖所有高频知识点，贴合 Vue3+TS 实际开发场景。
一、核心语法全解析（按使用频率排序）
1. 变量声明：let/const（替代 var）
核心知识点
表格
|
特性 |
let |
const |
var（废弃） |
|
作用域 |
块级作用域 |
块级作用域 |
函数级作用域 |
|
重复声明 |
不允许 |
不允许 |
允许 |
|
变量提升 |
存在（暂时性死区） |
存在（暂时性死区） |
存在 |
|
赋值 |
可修改 |
不可修改（引用类型内部可改） |
可修改 |
实战技巧
javascript
运行
// 1. 优先用 const，需要修改时用 let（减少变量突变）
const BASE_URL = 'https://api.crm.com'; // 常量大写
let pageNum = 1; // 变量小写
// 2. 避免块级作用域陷阱（if/for 内声明的变量外部不可访问）
if (true) {
const name = '张三';
}
console.log(name); // 报错（块级作用域隔离）
// 3. const 引用类型的“不可改”是指引用，内部属性可改（Vue3 响应式常用）
const user = { name: '张三' };
user.name = '李四'; // 合法（常用：Pinia/React 状态修改）
// user = {}; // 报错（引用不可改）2. 解构赋值（简化数据提取）
核心知识点
- 数组解构：按位置提取；对象解构：按键名提取；支持默认值、剩余运算符。
- 支持嵌套解构、函数参数解构、重命名。
实战技巧
javascript
运行
// 1. 数组解构（Vue3 组合式 API 常用）
const [a, b, ...rest] = [1, 2, 3, 4]; // a=1, b=2, rest=[3,4]
const [, y] = [10, 20]; // 只取第二个值（常用：坐标/尺寸提取）
// 2. 对象解构（接口数据/组件 Props 常用）
const { name, age = 18, address: addr = '未知' } = { name: '张三' };
// name=张三, age=18, addr=未知
// 3. 函数参数解构（Vue 组件 Props/请求参数常用）
const getUser = ({ id, name }) => console.log(id, name);
getUser({ id: 1, name: '张三' });
// 4. 嵌套解构（后端返回的嵌套数据）
const res = { data: { list: [1,2,3], total: 100 } };
const { data: { list, total } } = res; // 直接提取嵌套属性
// 5. 解构交换变量（无需临时变量）
let x = 1, y = 2;
[x, y] = [y, x]; // x=2, y=13. 模板字符串（`）
核心知识点
- 支持多行字符串、变量插值
${}、表达式嵌入。 - 避免拼接字符串的繁琐，减少语法错误。
实战技巧
javascript
运行
// 1. 多行字符串（Vue 模板/配置文件常用）
const html = `
<div class="customer">
<p>${name}</p>
<p>${age} 岁</p>
</div>
`;
// 2. 表达式嵌入（避免 + 拼接）
const price = 100;
const desc = `总价：${price * 1.08} 元（含8%税）`;
// 3. 函数调用嵌入（动态内容）
const formatTime = (time) => new Date(time).toLocaleString();
const log = `操作时间：${formatTime(Date.now())}`;4. 箭头函数（=>）
核心知识点
- 简化函数写法，没有自己的 this（继承外层 this）；
- 没有 arguments、不能作为构造函数（不能 new）；
- 单参数可省略 ()，单返回值可省略 {} 和 return。
实战技巧
javascript
运行
// 1. 简化回调函数（数组方法/异步操作常用）
const arr = [1,2,3];
const double = arr.map(item => item * 2); // 简洁写法
// 2. 解决 this 指向问题（Vue 组件/定时器常用）
// 错误示例（普通函数 this 丢失）
const obj = {
name: '张三',
fn: function() {
setTimeout(function() {
console.log(this.name); // undefined
}, 1000);
}
};
// 正确示例（箭头函数继承外层 this）
const obj2 = {
name: '张三',
fn: function() {
setTimeout(() => {
console.log(this.name); // 张三
}, 1000);
}
};
// 3. 避免滥用：对象方法/原型方法不能用箭头函数（this 指向错误）
const user = {
name: '张三',
sayHi: () => console.log(this.name) // 错误：this 指向 window
};5. 扩展运算符（...）
核心知识点
- 数组扩展：展开数组、合并数组、转伪数组为真数组；
- 对象扩展：展开对象、合并对象（浅拷贝）；
- 函数参数扩展：接收剩余参数、传递多个参数。
实战技巧
javascript
运行
// 1. 数组扩展（Vue 列表操作常用）
const arr1 = [1,2];
const arr2 = [3,4];
const newArr = [...arr1, ...arr2]; // 合并数组：[1,2,3,4]
const copyArr = [...arr1]; // 浅拷贝数组（替代 slice()）
// 2. 对象扩展（Vue Props/状态合并常用）
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const newObj = { ...obj1, ...obj2, a: 3 }; // 合并并覆盖：{a:3, b:2}
const copyObj = { ...obj1 }; // 浅拷贝对象（替代 Object.assign）
// 3. 伪数组转真数组（DOM 操作/arguments 常用）
const nodes = document.querySelectorAll('div');
const nodeArr = [...nodes]; // 转数组后可使用 map/filter 等方法
// 4. 函数剩余参数（接收任意数量参数）
const sum = (...args) => args.reduce((a, b) => a + b, 0);
sum(1,2,3); // 66. 类（class）
核心知识点
- 语法糖，底层仍是原型继承；
- 包含构造函数
constructor、实例方法、静态方法、继承extends/super； - TS 中强化类型，支持私有属性
#、访问器get/set。
实战技巧
javascript
运行
// 1. 基础类定义（封装工具类/请求类常用）
class Request {
constructor(baseURL) {
this.baseURL = baseURL;
}
get(url) {
return fetch(`${this.baseURL}${url}`);
}
static create(baseURL) { // 静态方法：工厂模式
return new Request(baseURL);
}
}
const request = Request.create('https://api.crm.com');
// 2. 继承（扩展通用类）
class AdminRequest extends Request {
constructor() {
super('https://admin.crm.com'); // 调用父类构造器
}
getAdminData(url) {
return this.get(`/admin${url}`); // 复用父类方法
}
}
// 3. TS 私有属性（封装内部逻辑）
class User {
#password; // 私有属性：外部不可访问
constructor(name, pwd) {
this.name = name;
this.#password = pwd;
}
checkPwd(pwd) {
return this.#password === pwd;
}
}7. 模块化（import/export）
核心知识点
- ES 模块规范，替代 CommonJS（require/module.exports）；
- 支持默认导出
export default、命名导出export const、按需导入import { xx }； - Vue3+Vite 天然支持，Tree-Shaking 依赖模块化。
实战技巧
javascript
运行
// 1. 导出（utils/request.ts）
// 命名导出（多个值）
export const BASE_URL = 'https://api.crm.com';
export const formatDate = (time) => new Date(time).toLocaleString();
// 默认导出（单个值）
export default class Request {}
// 2. 导入（组件中）
import Request, { BASE_URL, formatDate } from './utils/request';
// 按需导入 + 重命名
import { formatDate as fDate } from './utils/request';
// 动态导入（路由懒加载/Vue 异步组件）
const UserComponent = () => import('./components/User.vue');
// 3. 导入整个模块
import * as utils from './utils/request';
utils.formatDate(Date.now());8. 异步编程：Promise
核心知识点
- 解决回调地狱，支持链式调用
then/catch/finally； - 状态：pending（进行中）、fulfilled（成功）、rejected（失败）；
- 静态方法：
Promise.all/Promise.race/Promise.resolve/Promise.reject。
实战技巧
javascript
运行
// 1. 基础用法（封装异步请求）
const getCustomer = (id) => {
return new Promise((resolve, reject) => {
fetch(`/api/customer/${id}`)
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err));
});
};
// 2. 链式调用（避免回调地狱）
getCustomer(1)
.then(data => getOrder(data.orderId))
.then(order => console.log(order))
.catch(err => console.error(err));
// 3. Promise.all（并行请求，全部成功才返回）
const [customers, orders] = await Promise.all([
getCustomerList(),
getOrderList()
]);
// 4. Promise.race（竞速：第一个完成的结果）
const requestWithTimeout = (fn, timeout) => {
return Promise.race([
fn(),
new Promise((_, reject) => setTimeout(() => reject('超时'), timeout))
]);
};9. 其他高频语法
表格
|
语法 |
核心用法 |
实战场景 |
|
|
Set：去重数组；Map：键值对（键可任意类型） |
数组去重、缓存数据 |
|
|
遍历可迭代对象（数组 / Set/Map），支持 / |
替代 forEach（需中断遍历） |
|
|
合并对象（浅拷贝） |
对象合并、默认配置覆盖 |
|
|
判断数组是否包含某值（替代 indexOf） |
权限判断、标签存在性检查 |
|
|
安全访问嵌套属性（ES2020，归为 ES6 生态） |
|
|
|
仅当值为 null/undefined 时返回默认值（ES2020） |
|
二、ES6 实战技巧（Vue3+TS 开发必用）
1. 简化状态管理（Pinia/Vuex）
javascript
运行
// 解构 + 扩展运算符简化状态更新
const useUserStore = defineStore('user', {
state: () => ({ name: '', age: 0 }),
actions: {
updateUser(newData) {
// 扩展运算符合并新数据（避免逐个赋值）
this.$state = { ...this.$state, ...newData };
}
}
});2. 组件 Props 解构
vue
<script setup lang="ts">
import { defineProps } from 'vue';
// 解构 + 默认值简化 Props 处理
const props = defineProps({
name: { type: String, default: '未知' },
age: { type: Number, default: 18 }
});
const { name, age } = props;
</script>3. 异步请求封装（Promise + class）
javascript
运行
class Api {
// 通用请求方法
async request(url, options = {}) {
const defaultOptions = { method: 'GET', headers: { 'Content-Type': 'application/json' } };
const finalOptions = { ...defaultOptions, ...options };
const res = await fetch(url, finalOptions);
const data = await res.json();
if (!res.ok) throw new Error(data.msg);
return data;
}
// 业务方法
getCustomer(id) {
return this.request(`/api/customer/${id}`);
}
}4. 数组处理优化
javascript
运行
// 去重 + 筛选 + 映射（链式操作）
const data = [1,2,2,3,4,5];
const result = [...new Set(data)] // 去重
.filter(item => item > 2) // 筛选
.map(item => item * 2); // 映射
// result: [6,8,10]
// for...of 替代 forEach（支持中断）
for (const item of data) {
if (item > 3) break;
console.log(item);
}5. 模块化最佳实践
javascript
运行
// 1. 按功能拆分模块（避免大文件）
// src/utils/index.ts（入口）
export * from './date'; // 导出所有日期工具
export * from './validator'; // 导出所有验证工具
export { default as request } from './request'; // 导出默认值
// 2. 按需导入（减少包体积）
import { formatDate } from '@/utils'; // 只导入需要的函数三、避坑指南（高频错误）
- 箭头函数 this 指向错误：对象方法、原型方法不能用箭头函数，否则 this 指向 window/undefined；
- const 不是 “常量”：引用类型（对象 / 数组）内部属性可修改，仅引用不可改；
- 解构赋值默认值生效条件：仅当属性为
undefined时生效（null/''/0不生效）； - 扩展运算符浅拷贝：仅拷贝第一层，嵌套对象仍共享引用；
- Promise 未捕获错误：未加 catch 的 Promise 错误会导致控制台报错，需全局捕获；
- 模块化导入路径错误：相对路径 / 绝对路径区分，Vite 中
@指向 src 需配置。
四、总结
核心要点回顾
- 变量 / 解构 / 模板字符串：简化基础数据操作，是日常开发的 “语法糖”；
- 箭头函数 / 扩展运算符：大幅减少代码量，Vue 组件 / 数据处理高频用；
- class / 模块化：工程化开发的核心，封装通用逻辑、拆分代码模块；
- Promise：异步编程基础，是 async/await（ES2017）的前置；
- 实战原则：优先用 const/let、箭头函数简化回调、模块化拆分代码、class 封装通用逻辑。
ES6 是前端从 “原生开发” 到 “工程化开发” 的分水岭，掌握以上知识点 + 技巧，能覆盖 Vue3+TS 开发 90% 以上的场景，剩余可结合 ES2020+ 语法（可选链、空值合并、BigInt 等）补充
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)