ES6新特性详解：哪些最值得学【教程】

ES6（ECMAScript 2015）远不止是语法糖的堆砌，而是JavaScript运行逻辑与开发者思维的一次深刻重校准——它用let/const重构作用域与变量生命周期，以箭头函数根治this绑定混乱，借解构赋值和模板字符串让数据提取与字符串拼接回归清晰语义，再通过扩展运算符与剩余参数统一展开与收集的底层逻辑；掌握这四大核心特性，不仅能立即规避日常高频错误（如循环闭包、this丢失、嵌套取值崩溃），更能潜移默化地推动你采用不可变思维、词法作用域意识和函数式数据流组织代码，真正从“能写”迈向“稳写”。

ES6（即 ECMAScript 2015）不是“语法糖合集”，而是 JavaScript 运行逻辑和开发者思维的一次重校准——它把过去靠 var + bind + self = this + 字符串拼接硬凑出来的工程实践，变成了语言原生支持的、有明确语义和边界的行为。

以下四个点，是日常编码中最常触发错误、也最容易立刻见效的核心特性：

let/const 替代 var：块级作用域不是可选，是刚需

你写 for (var i = 0; i console.log(i), 0)，输出三个 3，这不是 bug，是 var 的设计事实。而用 let i 就直接输出 0、1、2。

• let 和 const 在每次循环迭代中创建独立绑定，var 只在函数作用域内共享一个绑定
• 声明前访问 let x 或 const y 会抛 ReferenceError，不是 undefined——这叫“暂时性死区”（TDZ），它强制你按顺序组织逻辑
• const 不等于“不可变对象”，而是“不可重新赋值的引用”：const obj = {}; obj.name = 'a' 合法；obj = {} 报错
• 所有 if、for、{} 块内用 let/const 声明的变量，外部完全不可见

箭头函数（=>）真正解决的是 this 绑定失控，不是少写 function

传统函数的 this 是运行时决定的，箭头函数没有自己的 this，它继承外层词法作用域的 this——这才是它被大量用于事件回调、定时器、Promise 链的根本原因。

• 错误写法：obj.method = function() { setTimeout(function() { console.log(this.val); }, 100); } → this 指向 window 或 undefined（严格模式）
• 正确写法：obj.method = function() { setTimeout(() => console.log(this.val), 100); } → this 仍是 obj
• 箭头函数不能用作构造函数（new fn() 报错），也没有 arguments，要用剩余参数 ...args 替代
• 单参数可省括号：x => x * 2；无参必须写空括号：() => {}；返回对象要加括号：() => ({ a: 1 })

解构赋值 + 模板字符串：让数据提取和拼接回归语义表达

以前从接口取用户姓名要写 user && user.profile && user.profile.name，现在一行解构就能防崩；以前拼 HTML 要靠 + 连七八个变量，现在模板字符串让结构一目了然。

• 对象解构默认值：const { name = 'Anonymous', age: userAge = 18 } = user || {}
• 嵌套解构需谨慎：const { data: { items: [first] } } = response —— 若 response.data.items 是 undefined，会直接报错；建议配合可选链操作符 ?. （ES2020）
• 模板字符串支持换行和表达式：`Hello ${name}, you're ${age > 18 ? 'adult' : 'minor'}.`
• 数组解构可跳过元素：const [, second, , fourth] = ['a', 'b', 'c', 'd'] → second === 'b'，fourth === 'd'

扩展运算符（...）和剩余参数（...rest）：合并与收集成对出现

它们是一体两面：... 在等号右边是“展开”，在函数参数位置是“收集”。别记反。

• 数组合并：const newArr = [...arr1, ...arr2]，比 arr1.concat(arr2) 更直观
• 浅拷贝数组：const copy = [...original]；对象：const clone = { ...original }
• 函数参数收集成数组：function sum(...nums) { return nums.reduce((a, b) => a + b, 0); }
• 传递数组作为参数：Math.max(...[1, 2, 3]) 等价于 Math.max(1, 2, 3)
• 注意：扩展运算符只展开一层，对嵌套对象/数组不做深拷贝

真正难的不是记住这些语法，而是理解它们如何改变你组织代码的方式——比如 const 推动你用不可变思维处理状态，=> 让你开始思考作用域链而非手动绑定，... 和解构让你天然倾向函数式数据流。这些不是“新功能”，是新的约束条件，而约束，恰恰是写出稳定代码的第一步。

今天关于《ES6新特性详解：哪些最值得学【教程】》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！