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 小时前
封装一个vue2的elementUI 表格组件(包含表格编辑以及多级表头)
前端·javascript
Lee川3 小时前
解锁 JavaScript 的灵魂:深入浅出原型与原型链
javascript·面试
swipe4 小时前
从原理到手写:彻底吃透 call / apply / bind 与 arguments 的底层逻辑
前端·javascript·面试
Lee川6 小时前
探索JavaScript的秘密令牌:独一无二的`Symbol`数据类型
javascript·面试
Lee川6 小时前
深入浅出JavaScript事件机制:从捕获冒泡到事件委托
前端·javascript
光影少年6 小时前
async/await和Promise的区别?
前端·javascript·掘金·金石计划
codingWhat6 小时前
如何实现一个「万能」的通用打印组件?
前端·javascript·vue.js
前端Hardy8 小时前
别再无脑用 `JSON.parse()` 了!这个安全漏洞你可能每天都在触发
前端·javascript·vue.js
前端Hardy9 小时前
别再让 `console.log` 上线了!它正在悄悄拖垮你的生产系统
前端·javascript·vue.js
csdn飘逸飘逸9 小时前
Autojs基础-用户界面(ui)
javascript