快速浏览ES6中的常用功能

1. 为什么每个前端都需要熟练掌握ES6？

1.1 痛点：var的作用域问题

在ES5中，var声明的变量存在变量提升和函数作用域问题。比如：

1
2
3
4
if (true) {
  var x = 10;
}
console.log(x); // 10（x泄漏到全局作用域）

这种问题让我不得不小心翼翼地检查变量作用域，生怕一不小心就踩坑。

1.2 痛点：回调地狱

异步编程是JavaScript的核心，但在ES5中，回调地狱（Callback Hell）让我头疼不已：

1
2
3
4
5
6
7
getData(function(data) {
  processData(data, function(result) {
    saveData(result, function(response) {
      console.log(response);
    });
  });
});

这样的代码不仅难以阅读，还难以维护。

1.3 痛点：冗长的代码

ES5的语法有时显得冗长，比如对象字面量和函数表达式：

1
2
3
4
5
6
7
var person = { name: "Wang", age: 25 };
var name = person.name;
var age = person.age;

var hello = function(name) {
  return "Hello, " + name + "!";
};

2. ES6都增加哪些功能？

2.1 let与const：告别var

ES6引入了let和const，解决了var的作用域问题。

  • let：声明块级作用域的变量。
  • const：声明块级作用域的常量。
1
2
3
4
5
6
if (true) {
  let y = 10;
  const z = 20;
}
console.log(y); // ReferenceError: y is not defined
console.log(z); // ReferenceError: z is not defined

现在，我可以放心地使用let和const，不再担心变量泄漏。

2.2 箭头函数：简化this绑定

箭头函数不仅简化了函数表达式的写法，还解决了this绑定问题。

1
2
3
4
5
6
function Person() {
  this.age = 0;
  setInterval(() => {
    this.age++; // this指向Person实例
  }, 1000);
}

再也不用担心this指向错误了！

2.3 解构赋值：简化数据提取

解构赋值让我从对象或数组中提取数据变得更加轻松。

1
2
3
4
5
const person = { name: "Wang", age: 25 };
const { name, age } = person;

console.log(name); // "Wang"
console.log(age); // 25

代码变得更简洁了！

2.4 模板字符串：告别字符串拼接

模板字符串让字符串拼接变得更直观。

1
2
3
4
const name = "Wang";
const hello = `Hello, ${name}!`;

console.log(hello); // "Hello, Wang!"

再也不用写一堆+了！

2.5 默认参数与剩余参数

默认参数和剩余参数让函数定义更灵活。

1
2
3
4
5
6
7
8
function hellow(name = "Li Fei", ...others) {
  console.log(`Hello, ${name}!`);
  console.log("Others:", others);
}

hello("Wang", "Yu", "Xiang");
// Hello, Wang!
// Others: ["Yu", "Xiang"]

2.6 扩展运算符：简化数组合并与对象合并

扩展运算符让我可以轻松合并数组或对象。

1
2
3
4
5
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];

console.log(combined); // [1, 2, 3, 4]

2.7 类与继承：面向对象编程更简单

ES6的class可以更直观地定义类和继承。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Person {
  constructor(name) {
    this.name = name;
  }
  hello() {
    console.log(`Hello, ${this.name}!`);
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
}

2.8 模块化：代码组织更清晰

ES6的模块化语法让我可以更好地组织代码。

1
2
3
4
5
6
7
8
// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from "./math.js";
console.log(add(1, 2)); // 3

2.9 Promise：告别回调地狱

Promise让异步编程变得更优雅。

1
2
3
4
5
getData()
  .then(processData)
  .then(saveData)
  .then(response => console.log(response))
  .catch(error => console.error(error));

2.10 async/await：异步代码像同步代码

async/await让异步代码看起来像同步代码。

1
2
3
4
5
6
7
8
9
10
11
12
async function main() {
  try {
    const data = await fetchData();
    const result = await processData(data);
    const response = await saveData(result);
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

main();

3. 推荐资源

本文仅列举了部分开发中常用的ES6功能，实际上ES6的新特性还有很多…
下方是我推荐的系统学习和复习ES6的资源。