JS—ES5与ES6：2分钟掌握ES5与ES6的区别

个人博客：haichenyi.com。感谢关注

一. 目录

• 一–目录
  
• 二–变量声明
  
• 三–箭头函数（Arrow Functions）​
  
• 四–模板字符串（Template Literals）
  
• 五–解构赋值（Destructuring）​
  
• 六–默认参数和剩余参数​
  
• 七–类（Class）​
  
• 八–模块化（Modules）​
  
• 九–Promise 和异步处理​
  
• 十–新增数据布局​
  
• 十一–迭代器和生成器​
  
• 十二–对象字面量加强​
  
• 十三–Proxy 和 Reflect​
  

本篇只会简朴说一下区别，不会深入去解说。
二. 变量声明

• ES5：仅支持 var，变量存在函数作用域和变量提升问题。
  

1. var x = 10;

复制代码

• ES6：引入 let 和 const，支持块级作用域，克制变量提升。
  

1. let a = 1;
2. const PI = 3.14; // 常量不可重新赋值

复制代码

三. 箭头函数（Arrow Functions）

ES6 简化函数语法，自动绑定外层 this（无自己的 this）。

1. // ES6
2. const add = (a, b) => a + b;
3. // ES5
4. var add = function(a, b) { return a + b; };

复制代码

四. 模板字符串（Template Literals）

ES6 支持多行字符串和变量插值。

1. const name = "Alice";
2. console.log(`Hello, ${name}!`); // ES6

复制代码

五. 解构赋值（Destructuring）

​ES6 可直接从对象或数组中提取值。

1. // 对象解构
2. const { name, age } = user;
3. // 数组解构
4. const [a, b] = [1, 2];

复制代码

六. 默认参数和剩余参数

ES6 支持参数默认值和 … 语法。

1. function greet(name = "Guest", ...args) {}

复制代码

七. 类（Class）

​ES6 提供更清晰的面向对象语法，虽然底层实现还是原型实现的。

1. class Person {
2.   constructor(name) { this.name = name; }
3.   sayHello() { console.log(`Hello, ${this.name}!`); }
4. }

复制代码

八. 模块化（Modules）

ES6 原生支持模块导入导出，可以代替部分闭包的场景。

1. // 导出
2. export const pi = 3.14;
3. // 导入
4. import { pi } from './math.js';

复制代码

九. Promise 和异步处理

ES6 引入 Promise 解决回调地狱。

1. new Promise((resolve, reject) => {
2.   if (success) resolve(data);
3.   else reject(error);
4. });

复制代码

十. 新增数据布局​

ES6 支持 Set、Map、Symbol 等。

1. const set = new Set([1, 2, 3]);
2. //全局唯一
3. const sym = Symbol('unique');

复制代码

十一. 迭代器和生成器

ES6 提供 for…of 和生成器函数。

1. for (const num of [1, 2, 3]) {}
2. function* gen() { yield 1; }

复制代码

十二. 对象字面量加强​

ES6 简化对象属性和方法定义。

1. const obj = {
2.   name,          // 属性简写（name: name）
3.   sayHi() {},    // 方法简写
4.   [key]: 'value' // 计算属性名
5. };

复制代码

十三. Proxy 和 Reflect​

​ES6 支持元编程，拦截对象操作。

1. const proxy = new Proxy(target, handler);

复制代码

总结：
​- ES6 解决了 ​ES5 的诸多痛点（如作用域、异步、代码冗余），引入了当代语言特性。
​- 兼容性：旧欣赏器大概不支持ES6，通常需通过Babel等工具转译为ES5。
​- 开发体验：ES6使代码更简便、可维护性更高，是当前开发的主流选择。
根本上前面博客都或多或少提到过这些不同点的内容。比方说异步处理，前面一篇就说过了异步编程的原理。Promise回调会放到微任务队列中回调等等

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。