拒绝废话！前端开发中最常用的 10 个 ES6 特性（附极简代码）

摘要：还在写冗长的传统 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 不仅是语法糖，更是提升代码可读性和维护性的利器。赶紧在项目中用起来吧！

喜欢这篇文章的话，欢迎点赞、收藏、关注！