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

相关推荐
2301_800976931 小时前
正则表达式
开发语言·python·正则表达式
故事还在继续吗1 小时前
C++20关键特性
开发语言·c++·c++20
涵涵(互关)2 小时前
GoView各项目文件中的相关语法2
前端·javascript·vue.js
子兮曰2 小时前
别让爬虫白嫖你的导航站了:纯免费,手把手实现加密字体防爬
前端·javascript·后端
青少儿编程课堂2 小时前
2026青少儿信息素养大赛备赛指南!Python/Scratch/C++备考要点
开发语言·c++·python
AIFarmer3 小时前
【无标题】
开发语言·c++·算法
昇腾CANN3 小时前
TileLang-Ascend 算子性能优化方法与实操
开发语言·javascript·性能优化·昇腾·cann
web打印社区3 小时前
2026最新Web静默打印解决方案,无插件无预览,完美替代Lodop
前端·javascript·vue.js·electron·pdf
沐知全栈开发3 小时前
ionic 手势事件详解
开发语言
lsx2024063 小时前
Bootstrap 按钮
开发语言