个人博客:haichenyi.com。感谢关注
一. 目录
- 一--目录
- 二--变量声明
- [三--箭头函数(Arrow Functions)](#三–箭头函数(Arrow Functions))
- [四--模板字符串(Template Literals)](#四–模板字符串(Template Literals))
- 五--解构赋值(Destructuring)
- 六--默认参数和剩余参数
- 七--类(Class)
- 八--模块化(Modules)
- [九--Promise 和异步处理](#九–Promise 和异步处理)
- 十--新增数据结构
- 十一--迭代器和生成器
- 十二--对象字面量增强
- [十三--Proxy 和 Reflect](#十三–Proxy 和 Reflect)
本篇只会简单说一下区别,不会深入去讲解。
二. 变量声明
-
ES5:仅支持 var,变量存在函数作用域和变量提升问题。
var x = 10;
-
ES6:引入 let 和 const,支持块级作用域,避免变量提升。
let a = 1;
const PI = 3.14; // 常量不可重新赋值
三. 箭头函数(Arrow Functions)
ES6 简化函数语法,自动绑定外层 this(无自己的 this)。
// ES6
const add = (a, b) => a + b;
// ES5
var add = function(a, b) { return a + b; };
四. 模板字符串(Template Literals)
ES6 支持多行字符串和变量插值。
const name = "Alice";
console.log(`Hello, ${name}!`); // ES6
五. 解构赋值(Destructuring)
ES6 可直接从对象或数组中提取值。
// 对象解构
const { name, age } = user;
// 数组解构
const [a, b] = [1, 2];
六. 默认参数和剩余参数
ES6 支持参数默认值和 ... 语法。
function greet(name = "Guest", ...args) {}
七. 类(Class)
ES6 提供更清晰的面向对象语法,虽然底层实现还是原型实现的。
class Person {
constructor(name) { this.name = name; }
sayHello() { console.log(`Hello, ${this.name}!`); }
}
八. 模块化(Modules)
ES6 原生支持模块导入导出,可以代替部分闭包的场景。
// 导出
export const pi = 3.14;
// 导入
import { pi } from './math.js';
九. Promise 和异步处理
ES6 引入 Promise 解决回调地狱。
new Promise((resolve, reject) => {
if (success) resolve(data);
else reject(error);
});
十. 新增数据结构
ES6 支持 Set、Map、Symbol 等。
const set = new Set([1, 2, 3]);
//全局唯一
const sym = Symbol('unique');
十一. 迭代器和生成器
ES6 提供 for...of 和生成器函数。
for (const num of [1, 2, 3]) {}
function* gen() { yield 1; }
十二. 对象字面量增强
ES6 简化对象属性和方法定义。
const obj = {
name, // 属性简写(name: name)
sayHi() {}, // 方法简写
[key]: 'value' // 计算属性名
};
十三. Proxy 和 Reflect
ES6 支持元编程,拦截对象操作。
const proxy = new Proxy(target, handler);
总结:
- ES6 解决了 ES5 的诸多痛点(如作用域、异步、代码冗余),引入了现代语言特性。
- 兼容性:旧浏览器可能不支持ES6,通常需通过Babel等工具转译为ES5。
- 开发体验:ES6使代码更简洁、可维护性更高,是当前开发的主流选择。
基本上前面博客都或多或少提到过这些不同点的内容。比方说异步处理,前面一篇就说过了异步编程的原理。Promise回调会放到微任务队列中回调等等