JavaScript ES6 新特性有哪些

在前端开发的圈子里，“ES6”这个词出现的频率特别高，不少新手刚接触时会觉得它像个神秘的技术门槛，其实它只是JavaScript的第六代语法规范，2015年正式发布，是让代码写得更简洁、更高效的“升级补丁”。很多老开发者习惯用旧语法，却不知道ES6的新特性能帮他们少写很多重复代码，也让新手更容易上手。

变量声明：告别var的“幽灵变量”

之前用var声明变量时，常出现奇怪的bug，比如在函数外也能访问函数内的变量，或者循环里的变量会“串值”。举个例子，以前写循环给按钮绑定点击事件，用var的话，点击任何按钮都会弹出最后一个循环的数字，因为var是“函数级作用域”，变量会被提升到整个函数顶部。

ES6带来了let和const，解决了这个问题：let是“块级作用域”，只在当前代码块（比如一对花括号）里生效；const用来声明常量，声明后不能修改，避免不小心改了不该改的值。同样的循环，用let声明i，每个循环的i都是独立的，点击对应按钮就会弹出正确数字，再也不会出现“幽灵变量”的bug。

箭头函数：让函数写得更短更灵活

之前写函数，尤其是简单的回调函数，代码会显得很繁琐，比如数组排序需要写完整的function，或者定时器的回调要写很多行。箭头函数用“=>”代替function关键字，一行就能写完简单逻辑。比如数组求偶数和，旧语法要写function(item) { return item % 2 === 0; }，用箭头函数简化成item => item % 2 === 0，少写了不少字。

还要注意一点：箭头函数没有自己的this，它的this会继承外层的this，这在处理定时器或事件绑定时特别有用。比如在按钮点击事件里，用箭头函数写定时器，this会指向组件本身，而不是定时器的window，不用再额外写that = this来保存指向，减少了出错的可能。

模板字符串：告别拼接字符串的繁琐

以前拼接字符串时，用加号“+”把变量和文本连起来，特别容易出错，比如少加一个引号就会报错，换行也得手动加“\n”。比如要输出“你好，小明，今天是2024年5月20日，天气晴”，旧语法得写"你好，" + name + "，今天是" + date + "，天气" + weather，长句子看起来乱糟糟。

ES6的模板字符串用反引号` `包裹内容，变量用${变量名}插入，还能直接换行，上面的例子改成模板字符串就是 你好，${name}，今天是${date}，天气${weather} `，一目了然，不用再纠结加号和引号的位置，新手也能快速写对。

解构赋值：一键提取数据里的内容

处理对象或数组时，以前要写很多行代码来提取值，比如从用户对象里拿姓名和年龄，得写const name = user.name; const age = user.age;，如果是嵌套对象，还要一层一层往下取。ES6的解构赋值能直接一键提取，比如const { name, age } = user;，一行就完成了。

数组也能解构，比如交换两个变量的值，以前要借第三个变量let temp = a; a = b; b = temp;，用解构赋值直接写[a, b] = [b, a]，不用额外变量，几行代码就能搞定，特别适合处理临时数据。

这些特性都是ES6里最常用的，不管是新手入门还是老开发者优化代码，学会这些都能让前端开发更顺畅。其实ES6还有不少实用特性，比如模块化、Promise等，先把这些基础特性用熟，再慢慢深入，就能感受到它带来的便利了。