什么是ES5、ES6+ ?
ES 全称 ECMAScript,是 JavaScript 的官方语言标准(由 ECMA International 组织制定)。
ES5、ES6 等版本号代表 JavaScript 的重大更新,不同版本引入了新语法、新特性。
1. ES5(ECMAScript 5)
-
发布时间:2009 年
-
特点:
-
基础 JavaScript 功能,广泛支持所有浏览器(包括 IE9+)。
-
主要特性:
// 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
let x = 10; // 块级作用域变量
const PI = 3.14; // 常量(不可重新赋值)
(2)箭头函数(Arrow Functions)
// ES5
var add = function(a, b) { return a + b; };
// ES6
const add = (a, b) => a + b;
(3)模板字符串(Template Literals)
const name = "Alice";
console.log(`Hello, ${name}!`); // 输出 "Hello, Alice!"
(4)解构赋值(Destructuring)
// 数组解构
const [a, b] = [1, 2]; // a=1, b=2
// 对象解构
const { name, age } = { name: "Bob", age: 20 };
(5)Promise 和异步编程
// 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 类(面向对象)
// 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)
// 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 项目)。
学习建议
-
先掌握 ES6+ 核心语法(
let
/const
、箭头函数、Promise
、解构)。 -
再学框架(React/Vue 都依赖 ES6+)。
-
ES5 仅作补充(遇到旧代码时查阅即可)。