ES6核心语法特性详解
变量声明机制的演进：let、const 与 var 的差异
ES6引入了块级作用域的变量声明方式，彻底改变了传统函数作用域的局限性。
var：存在变量提升，允许重复声明，作用域为函数级别。let：禁止重复声明，不支持变量提升，作用域为块级。const：用于定义常量，必须初始化，引用不可更改（但对象属性可变）。
// let 示例
{
let count = 10;
console.log(count); // 10
}
// console.log(count); // 报错：count 未定义
// const 示例
const API_URL = "https://api.example.com";
// API_URL = "https://new-api.com"; // 错误：不能重新赋值
const config = { timeout: 5000 };
config.timeout = 8000; // 允许修改属性
// config = {}; // 错误：不能改变引用
解构赋值：从数据结构中提取信息
通过简洁语法直接从数组或对象中获取所需值。
// 数组解构
const colors = ['red', 'green', 'blue'];
const [primary, secondary, tertiary] = colors;
// 对象解构
const user = {
fullName: '李明',
age: 25,
hobbies: ['读书', '编程']
};
const { fullName, age } = user;
const [firstHobby, secondHobby] = hobbies;
模板字面量：增强字符串表达能力
使用反引号包裹字符串，支持换行和变量插值。
// 基本用法
const name = '小华';
const greeting = `你好，${name}！今天是星期几？`;
// 多行文本
const htmlTemplate = `
<div class="card">
<h3>用户信息</h3>
<p>姓名：${name}</p>
</div>
`;
箭头函数：更简洁的函数写法
采用 => 语法，简化函数定义，并具有隐式返回和上下文继承特性。
// 简化形式
const add = (a, b) => a + b;
const square = x => x * x;
// 无参/单参省略括号
const logHello = () => console.log('Hello');
const double = n => n * 2;
// 返回对象需加外层括号
const createUser = (name) => ({ name, role: 'user' });
关键特性：
- 不绑定自身
this，捕获外部上下文的this值。 - 不能作为构造函数，无
prototype属性。 - 没有
arguments对象，推荐使用...参数。
异步处理优化：摆脱回调嵌套
通过 Promise 实现链式调用，避免"回调地狱"问题。
// 传统嵌套回调（难以维护）
setTimeout(() => {
console.log('第一步完成');
setTimeout(() => {
console.log('第二步完成');
setTimeout(() => {
console.log('第三步完成');
}, 1000);
}, 2000);
}, 1000);
// 使用 Promise 链式调用
new Promise(resolve => {
setTimeout(() => {
console.log('第一步完成');
resolve();
}, 1000);
})
.then(() => new Promise(resolve => {
setTimeout(() => {
console.log('第二步完成');
resolve();
}, 2000);
}))
.then(() => new Promise(resolve => {
setTimeout(() => {
console.log('第三步完成');
resolve();
}, 1000);
}));
模块系统：标准的代码组织方式
ES6原生支持模块化开发，实现文件级作用域隔离。
导出方式：
// 命名导出
export const PI = 3.14159;
export function calculateArea(radius) {
return PI * radius ** 2;
}
// 默认导出（每个模块仅一个）
export default class Calculator {
constructor() {}
add(a, b) { return a + b; }
}
导入方式：
// 导入命名成员
import { PI, calculateArea } from './math.js';
// 导入全部内容
import * as mathUtils from './math.js';
// 导入默认导出
import Calculator from './calculator.js';
// 混合导入
import Calculator, { PI, calculateArea } from './module.js';
// 重命名导入
import { PI as piValue } from './constants.js';
