17370845950

ES6引入let/const实现块级作用域与暂时性死区，箭头函数简化语法并词法绑定this，模板字符串支持多行文本与嵌入表达式，解构赋值从数组对象中高效提取数据。

ES6（ECMAScript 2015）是JavaScript发展史上的一个重要里程碑，它引入了一系列现代化的语法和功能，极大地提升了开发效率和代码质量。掌握这些核心特性，是现代前端开发的必备技能。

let 与 const：重塑变量声明

ES6 引入了 let 和 const 来替代老旧的 var，解决了长期存在的作用域和变量提升问题。

• 块级作用域：使用 let 和 const 声明的变量只在最近的花括号 {} 内有效，例如在 if、for 或 while 语句中。这避免了 var 的函数级作用域带来的变量泄漏风险。
• 不存在变量提升：与 var 不同，let 和 const 不会自动提升到作用域顶部。在声明之前访问它们会抛出错误，这种机制被称为“暂时性死区”(TDZ)，有助于及早发现编码错误。
• const 的不可变性：const 用于声明常量，必须在声明时初始化，且不能重新赋值。对于对象或数组等引用类型，const 保证的是引用地址不变，其内部的属性或元素仍然可以被修改。

最佳实践是优先使用 const，只有当变量值需要改变时才使用 let，完全避免使用 var。

箭头函数：简洁语法与 this 绑定

箭头函数提供了更简洁的函数写法，并解决了传统函数中 this 指向混乱的经典问题。

• 简洁的语法：省略了 function 关键字和 return 语句（单行表达式时）。例如，(a, b) => a + b 就是一个计算两数之和的箭头函数。
• 词法绑定 this：箭头函数不拥有自己的 this，它的 this 值继承自外层作用域。这在处理事件回调或定时器时非常有用，无需再使用 bind 或缓存 self = this 等技巧。
• 没有 arguments 对象：箭头函数内部没有 arguments 对象，需要使用剩余参数（...args）来获取所有传入的参数。

它们特别适合用作数组方法（如 map、filter、reduce）的回调函数。

模板字符串：告别字符串拼接

模板字符串使用反引号 ` 定义，让字符串操作变得前所未有的简单和直观。

• 多行文本：可以直接在字符串中换行，无需使用 \n 转义符，非常适合编写HTML片段或长段落文字。
• 嵌入表达式：通过 ${expression} 语法，可以将变量、运算甚至函数调用的结果直接嵌入到字符串中，彻底取代了繁琐的加号拼接。

例如：const greeting = `Hello, ${name}! You are ${age} years old.`;

解构赋值：从复杂数据结构中提取数据

解构赋值是一种从数组或对象中高效提取值并赋给变量的语法糖，代码更清晰易读。

• 数组解构：按位置匹配。例如，const [first, second] = ['apple', 'banana']; 会将 'apple' 赋给 first，'banana' 赋给 second。
• 对象解构：按属性名匹配。例如，const { name, age } = user; 会从 user 对象中提取 name 和 age 属性的值。
• 支持设置默认值和使用别名，也能进行嵌套解构，灵活性很高。

这一特性在接收函数参数或从 API 响应中提取数据时非常实用。