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

相关推荐
越来越无动于衷1 小时前
JAVA包装类
java·开发语言
GanGuaGua2 小时前
CSS:盒子模型
开发语言·前端·css·html
忘梓.2 小时前
从父类到子类:C++ 继承的奇妙旅程(2)
java·开发语言·c++
IT信息技术学习圈2 小时前
Python程序打包为EXE文件的全面指南
开发语言·python
进取星辰2 小时前
23、Next.js:时空传送门——React 19 全栈框架
开发语言·javascript·react.js
究极无敌暴龙战神X2 小时前
hot100-子串-JS
javascript·数据结构·算法
云和数据.ChenGuang4 小时前
人工智能 机器学习期末考试题
开发语言·人工智能·python·机器学习·毕业设计
星空寻流年6 小时前
css3伸缩盒模型第二章(侧轴相关)
javascript·css·css3
lllsure7 小时前
Python基础语法
开发语言·python
GalenWu8 小时前
对象转换为 JSON 字符串(或反向解析)
前端·javascript·微信小程序·json