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

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

一. 目录

本篇只会简单说一下区别,不会深入去讲解。

二. 变量声明

  1. ES5:仅支持 var,变量存在函数作用域和变量提升问题。

    var x = 10;

  2. 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回调会放到微任务队列中回调等等

相关推荐
Cory.眼几秒前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
csbysj20208 分钟前
DTD 元素:XML 与 SGML 文档结构解析指南
开发语言
傻童:CPU21 分钟前
C语言练习题
c语言·开发语言
前端架构师-老李24 分钟前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
极地星光32 分钟前
协程:实战与系统集成(高级篇)
开发语言
拖拉斯旋风39 分钟前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript
0和1的舞者1 小时前
《Git:从入门到精通(八)——企业级git开发相关内容》
大数据·开发语言·git·搜索引擎·全文检索·软件工程·初学者
liulilittle1 小时前
LwIP协议栈MPA多进程架构
服务器·开发语言·网络·c++·架构·lwip·通信
水淹萌龙1 小时前
玩转 Go 表达式引擎:expr 实战指南
开发语言·后端·golang
艾莉丝努力练剑1 小时前
【C++:继承】面向对象编程精要:C++继承机制深度解析与最佳实践
开发语言·c++·人工智能·继承·c++进阶