javascript ES6带来了什么_哪些新特性最值得学习【教程】

ES6是JavaScript运行逻辑与思维的重校准，核心特性包括：①let/const提供块级作用域与TDZ；②箭头函数继承词法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，会直接报错；建议配合可选链操作符 ?. （ES2025）
• 模板字符串支持换行和表达式：`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 推动你用不可变思维处理状态，=> 让你开始思考作用域链而非手动绑定，... 和解构让你天然倾向函数式数据流。这些不是“新功能”，是新的约束条件，而约束，恰恰是写出稳定代码的第一步。

# 的是  # 就能  # 自己的  # 可选  # 让你  # 绑定  # win  # 循环  # 对象  # javascript  # java  # if  # html  # 编码  # 构造函数  # 字符串  # 接口  # console  # 报错  # function  # 仍是  # 事件  # red  # var  # this  # bug  # 继承  # 作用域  # 运算符  # for  # 这不是  # const  # promise  # undefined  # copy  # 严格模式  # es6  # math  # ecmascript 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】