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

相关推荐
4***14908 小时前
Rust系统工具开发实践指南
开发语言·后端·rust
心随雨下8 小时前
typescript中Triple-Slash Directives如何使用
前端·javascript·typescript
2501_940943918 小时前
体系课\ Python Web全栈工程师
开发语言·前端·python
低保和光头哪个先来8 小时前
场景2:Vue Router 中 query 与 params 的区别
前端·javascript·vue.js·前端框架
rafael(一只小鱼)8 小时前
AI运维开发平台学习
java·开发语言
b***74888 小时前
C++在系统中的内存对齐
开发语言·c++
散峰而望8 小时前
C++数组(三)(算法竞赛)
开发语言·c++·算法·github
q***95228 小时前
SpringMVC 请求参数接收
前端·javascript·算法
4***14908 小时前
C++在系统中的编译优化
开发语言·c++
田姐姐tmner8 小时前
Python切片
开发语言·python