什么是ES5、ES6+ ？

ES 全称 ECMAScript，是 JavaScript 的官方语言标准（由 ECMA International 组织制定）。
ES5、ES6 等版本号代表 JavaScript 的重大更新，不同版本引入了新语法、新特性。

---

1. ES5（ECMAScript 5）

• 发布时间：2009 年

• 特点：

  • 基础 JavaScript 功能，广泛支持所有浏览器（包括 IE9+）。

  • 主要特性：

    javascript

     

    // 1. 严格模式（"use strict"）
    "use strict";
    x = 10; // 报错（未声明变量）
    
    // 2. JSON 支持（JSON.parse / JSON.stringify）
    var obj = JSON.parse('{"name": "John"}');
    
    // 3. 数组新增方法（forEach、map、filter）
    [1, 2, 3].forEach(function(item) {
      console.log(item);
    });
    
    // 4. 函数绑定（Function.prototype.bind）
    var logName = function() { console.log(this.name); };
    logName.bind({ name: "Alice" })(); // 输出 "Alice"

---

2. ES6（ES2015）及 ES6+

• ES6（2015 年发布） 是 JavaScript 的重大升级，之后每年发布一个小版本（ES2016/ES7、ES2017/ES8…），统称 ES6+。

• 核心改进：

  • 更简洁的语法

  • 更强的功能

  • 更好的异步编程支持

ES6+ 主要新特性

（1）变量声明：let / const

javascript

 

let x = 10; // 块级作用域变量
const PI = 3.14; // 常量（不可重新赋值）

（2）箭头函数（Arrow Functions）

javascript

 

// ES5
var add = function(a, b) { return a + b; };

// ES6
const add = (a, b) => a + b;

（3）模板字符串（Template Literals）

javascript

 

const name = "Alice";
console.log(`Hello, ${name}!`); // 输出 "Hello, Alice!"

（4）解构赋值（Destructuring）

javascript

 

// 数组解构
const [a, b] = [1, 2]; // a=1, b=2

// 对象解构
const { name, age } = { name: "Bob", age: 20 };

（5）Promise 和异步编程

javascript

 

// ES5 回调地狱（Callback Hell）
getData(function(data) {
  processData(data, function(result) {
    displayResult(result);
  });
});

// ES6 Promise
getData()
  .then(data => processData(data))
  .then(result => displayResult(result))
  .catch(error => console.error(error));

// ES2017 Async/Await（更直观）
async function fetchData() {
  try {
    const data = await getData();
    const result = await processData(data);
    displayResult(result);
  } catch (error) {
    console.error(error);
  }
}

（6）Class 类（面向对象）

javascript

 

// ES5 构造函数
function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log("Hello, " + this.name);
};

// ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, ${this.name}`);
  }
}

（7）模块化（Modules）

javascript

 

// ES5 无模块化（依赖全局变量或 CommonJS）
// ES6 原生模块化
import { fetchData } from './api.js';
export const name = "Alice";

---

3. ES5 vs ES6+ 对比

特性	ES5	ES6+
变量声明	var（函数作用域）	let / const（块级作用域）
函数写法	function() {}	箭头函数 () => {}
字符串拼接	"Hello, " + name	模板字符串 `Hello, ${name}`
异步编程	回调函数（Callback Hell）	Promise / Async/Await
面向对象	构造函数 + prototype	class 语法
模块化	无原生支持（依赖 CommonJS）	import / export

---

4. 如何判断代码是 ES5 还是 ES6+？

• ES5：使用 var、function、回调函数、无 class/let/const。

• ES6+：使用 let/const、箭头函数、Promise、class、模板字符串等。

---

5. 现在应该学 ES5 还是 ES6+？

• 直接学 ES6+：现代前端开发（React/Vue/Angular）都基于 ES6+。

• 了解 ES5：维护旧代码时可能需要（如 jQuery 项目）。

学习建议

1. 先掌握 ES6+ 核心语法（let/const、箭头函数、Promise、解构）。

2. 再学框架（React/Vue 都依赖 ES6+）。

3. ES5 仅作补充（遇到旧代码时查阅即可）。