登录
拒绝废话！前端开发中最常用的 10 个 ES6 特性（附极简代码）
2026年1月16日 09:34
摘要：还在写冗长的传统 JS 代码吗？本文精选了 ES6+ 中最常用的 10 个特性，通过极简的代码对比，助你快速提升代码逼格与开发效率。建议收藏！
标签：#前端 #JavaScript #ES6 #Web开发 #新手入门
1. 变量声明 (let & const)
告别 var 的变量提升困扰，拥抱块级作用域。
- let: 用于变量，可重新赋值。
- const: 用于常量，不可重新赋值（引用的对象属性除外）。
// 旧写法
var a = 1;
// ES6
let count = 10;
const API_URL = '[https://api.com](https://api.com)';
// count = 11; // OK
// API_URL = '...'; // Error
2. 模板字符串 (Template Literals)
再也不用痛苦地用 + 号拼接字符串了。
const name = 'Jack';
const age = 18;
// 旧写法
const str = 'My name is ' + name + ' and I am ' + age + ' years old.';
// ES6
const str = `My name is ${name} and I am ${age} years old.`;
3. 箭头函数 (Arrow Functions)
语法更简洁，且自动绑定当前上下文的 this。
// 旧写法
var sum = function(a, b) {
return a + b;
};
// ES6
const sum = (a, b) => a + b; // 单行自动 return
// 配合数组方法更是绝配
[1, 2, 3].map(x => x * 2);
4. 解构赋值 (Destructuring)
从数组或对象中提取值，爽到飞起。
const user = { name: 'Alice', age: 25 };
// 旧写法
var name = user.name;
var age = user.age;
// ES6
const { name, age } = user; // 对象解构
const [first, second] = [10, 20]; // 数组解构
5. 扩展运算符 (Spread Operator ...)
数组合并、对象复制，三个点全搞定。
const arr1 = [1, 2];
const obj1 = { a: 1 };
// 数组合并
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
// 对象浅拷贝/合并
const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }
6. 数组新方法 (Array Methods)
查找元素从未如此简单，告别 for 循环。
const arr = [1, 2, 3, 4];
// find: 返回第一个匹配的值
const found = arr.find(x => x > 2); // 3
// Array.from: 将类数组对象转为数组
const newArr = Array.from('foo'); // ["f", "o", "o"]
7. 字符串新方法 (String Methods)
判断字符串包含关系，不再需要 indexOf() !== -1。
const str = 'Hello World';
// includes: 是否包含
str.includes('Hello'); // true
// startsWith / endsWith: 开头/结尾判断
str.startsWith('He'); // true
str.endsWith('ld'); // true
8. Promise (异步编程)
解决回调地狱（Callback Hell）的神器，异步操作更优雅。
// 模拟异步请求
const getData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('Data Loaded'), 1000);
});
};
// 使用
getData().then(res => console.log(res));
9. 模块化 (Modules - Import/Export)
组件化开发的基础，彻底告别全局变量污染。
// lib.js (导出)
export const pi = 3.14;
export const add = (a, b) => a + b;
// main.js (导入)
import { pi, add } from './lib.js';
console.log(add(pi, 1));
10. 类 (Classes)
虽然 JS 本质是原型继承，但 Class 写法让面向对象编程（OOP）更直观。
// ES6
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
const dog = new Animal('Doggy');
dog.speak();
总结
掌握这 10 个特性，足以应对 90% 的日常前端开发场景。ES6 不仅是语法糖，更是提升代码可读性和维护性的利器。赶紧在项目中用起来吧！
喜欢这篇文章的话，欢迎点赞、收藏、关注！
