现代 JavaScript ES6 核心语法指南
变量声明与作用域管理
在 ECMAScript 2015 之前，开发者主要依赖 var 进行变量声明，但这容易导致作用域污染和变量提升问题。现代开发中推荐使用 let 和 const 来增强代码的可读性与安全性。
// 传统 var 存在函数级作用域与变量提升现象
function legacyScope() {
console.log(id); // undefined (未报错但值为空)
var id = 100;
}
// let 提供块级作用域，避免外部访问
function modernScope() {
if (true) {
let secretKey = "auth_token_123";
}
// console.log(secretKey); // ReferenceError: secretKey is not defined
}
// const 定义常量，绑定后不可重新赋值
const MAX_RETRY_COUNT = 3;
// MAX_RETRY_COUNT = 5; // TypeError: Assignment to constant variable.
let dynamicConfig = {};
dynamicConfig.theme = "dark"; // 对象属性修改是被允许的
模板字符串的应用
模板字符串（Template Literals）允许使用反引号（`）定义多行字符串，并直接嵌入表达式。相比传统的字符串拼接方式，它显著减少了语法噪音并提高了可维护性。
<div id="userProfile">
</div>
<script>
const currentUser = {
name: "张三",
level: "Senior Developer"
};
const container = document.getElementById('userProfile');
// 利用模板字符串直接嵌入对象属性
container.innerHTML = `
<section class="profile-card">
<h3>${currentUser.name}</h3>
<p>职称：${currentUser.level}</p>
<ul>
<li>前端架构设计</li>
<li>性能优化实战</li>
<li>团队技术分享</li>
</ul>
</section>
`;
</script></div>
箭头函数与上下文指向
箭头函数提供了一种更简洁的函数书写形式，且拥有独特的 this 绑定机制。不同于普通函数依赖于调用上下文，箭头函数的 this 始终指向定义时所在的词法环境。
// 普通函数 this 指向调用者
const dataManager = {
id: 42,
printInfo: function() {
console.log(this.id); // 42
}
};
// 在定时器或回调中使用普通函数会丢失 this 上下文
dataManager.printInfo();
setTimeout(function() {
// console.log(this.id); // undefined (在严格模式下)
}, 100);
// 箭头函数继承外层 this
const fetchData = () => {
setTimeout(() => {
console.log(this.id); // 如果在全局或特定类方法内，保持原 this 指向
}, 100);
};
// 简短写法示例
const add = (a, b) => a + b;
console.log(add(10, 20)); // 30
解构赋值简化数据提取
解构赋值是一种强大的语法糖，可以从数组或对象中快速提取需要的值，避免了繁琐的属性链访问，常用于 API 响应数据处理。
// 对象解构
const serverConfig = {
host: 'api.example.com',
port: 8080,
protocol: 'https',
timeout: 5000
};
const { host, protocol, timeout } = serverConfig;
// 等同于单独获取 host = serverConfig.host...
console.log(`连接地址：${protocol}://${host}:${port || '默认端口'}`);
// 数组解构
const colorPalette = ['#FF5733', '#33FF57', '#3357FF'];
const [primary, secondary, accent] = colorPalette;
// 带有默认值的解构
const { username = "Guest", role } = { username: undefined, role: "Admin" };
console.log(username); // Guest
面向对象编程：Class 与继承
ES6 引入了类的概念，使 JavaScript 更接近传统面向对象语言。通过 extends 关键字实现继承，使用 super 调用父类构造器。
class ElectronicDevice {
constructor(manufacturer) {
this.manufacturer = manufacturer;
this.isPowerOn = false;
}
turnOn() {
this.isPowerOn = true;
console.log(`${this.manufacturer} 设备已开启`);
}
}
// 子类继承父类
class SmartPhone extends ElectronicDevice {
constructor(manufacturer, screenSize) {
super(manufacturer); // 必须先调用 super
this.screenSize = screenSize;
}
turnOn() {
super.turnOn();
console.log(`屏幕尺寸：${this.screenSize}英寸`);
}
}
const phone = new SmartPhone("TechCorp", 6.7);
phone.turnOn();
/*
输出:
TechCorp 设备已开启
屏幕尺寸：6.7 英寸
*/
