ES5 vs ES6：JavaScript 演进之路

news2025/3/12 10:40:39

ES5 vs ES6：JavaScript 演进之路

  • JavaScript版本演进
    • ES5 (ECMAScript 5)
    • ES6 (ECMAScript 2015)
    • 版本演进时间线
    • 为什么ES6如此重要？
  • ES5 vs ES6
    • 1. 变量声明对比
    • 2. 函数特性对比
    • 3. 类和对象
    • 4. 模块化
    • 5. 解构和展开
    • 6. 字符串和模板字面量
    • 7. 数组和对象新方法
    • 8. Promise和异步编程
    • 9. 其他新特性
  • 总结

JavaScript版本演进

ECMAScript是JavaScript的标准规范。
JavaScript是ECMAScript的一个实现，包含了ECMAScript以及DOM和BOM等额外的功能。

ES5 (ECMAScript 5)

  • 发布时间：2009年12月
  • 主要目标：提高语言的可靠性、安全性和表现力
  • 重要特性：
    1. strict模式：更严格的语法检查
    2. JSON支持：JSON.parse()和JSON.stringify()
    3. 数组方法：forEach, map, filter, reduce, some, every等
    4. 对象属性：getter/setter
    5. Object方法：Object.create(), Object.defineProperty()等

ES6 (ECMAScript 2015)

  • 发布时间：2015年6月
  • 又称：ES2015（开始采用年份命名）
  • 是JavaScript历史上最重要的版本更新
  • 重要意义：
    1. 使JavaScript更适合编写复杂的大型应用程序
    2. 提供更好的模块化支持
    3. 引入类的概念，使面向对象编程更简单
    4. 增强的异步编程能力

版本演进时间线

版本发布年份重要特性
ES11997第一个版本
ES21998细微更新
ES31999正则表达式、try/catch
ES4放弃过于激进，未发布
ES52009strict模式、JSON支持、新增数组方法
ES6/ES20152015类、模块、箭头函数、Promise等
ES20162016Array.prototype.includes, 指数运算符
ES20172017async/await, Object.values/entries
ES20182018Rest/Spread属性、异步迭代
ES20192019Array.prototype.flat, Object.fromEntries
ES20202020可选链操作符、空值合并运算符
ES20212021String.prototype.replaceAll, Promise.any
ES20222022Top-level await, Class Fields

为什么ES6如此重要？

  1. 开发效率：

    • 简洁的语法（箭头函数、解构赋值）
    • 更好的变量作用域控制（let/const）
    • 模板字符串提高字符串处理效率

  2. 代码质量：

    • 类的支持使面向对象更规范
    • 模块化支持使代码组织更清晰
    • Promise让异步代码更易维护

  3. 性能提升：

    • 更好的内存管理（块级作用域）
    • 优化的数组和对象操作
    • 改进的字符串处理

  4. 生态系统：

    • 统一的模块化标准
    • 更好的工具支持
    • 框架开发的基础

ES5 vs ES6

1. 变量声明对比

特性ES5ES6
变量声明varlet, const
变量提升有无
暂时性死区无有
块级作用域无有
重复声明允许不允许

示例代码：

// ES5变量声明和提升示例
console.log(x); // 输出: undefined (变量提升，但值未定义)
var x = 1;
var x = 2; // 允许重复声明
console.log(x); // 输出: 2

// ES6变量声明
// console.log(y); // 错误：暂时性死区，不能在声明前访问
let y = 1;
// let y = 2; // 错误：不能重复声明
console.log(y); // 输出: 1

// 块级作用域示例
{
    let blockScoped = 'only available in this block';
    const CONSTANT = 'cannot be reassigned';
    console.log(blockScoped); // 输出: "only available in this block"
    console.log(CONSTANT);    // 输出: "cannot be reassigned"
}
// console.log(blockScoped); // 错误：blockScoped未定义
// console.log(CONSTANT);    // 错误：CONSTANT未定义

// const声明后不能修改引用，但可以修改对象属性
const person = { name: 'John' };
person.name = 'Jane'; // 允许
console.log(person.name); // 输出: "Jane"
// person = {}; // 错误：不能重新赋值

2. 函数特性对比

特性ES5ES6
默认参数需手动检查直接在参数列表定义
箭头函数无有
this绑定动态绑定词法绑定
参数处理arguments对象剩余参数(…rest)

示例代码：

// ES5默认参数
function greetES5(name) {
    // 使用逻辑或运算符设置默认值
    name = name || 'Guest';
    return 'Hello ' + name;
}
console.log(greetES5());      // 输出: "Hello Guest"
console.log(greetES5('John')); // 输出: "Hello John"

// ES6默认参数和箭头函数
const greetES6 = (name = 'Guest') => `Hello ${name}`;
console.log(greetES6());      // 输出: "Hello Guest"
console.log(greetES6('Jane')); // 输出: "Hello Jane"

// ES5 this绑定问题示例
function Counter() {
    var self = this; // 保存this引用
    this.count = 0;
    setInterval(function() {
        self.count++;
        console.log(self.count); // 每秒输出递增的数字
    }, 1000);
}

// ES6箭头函数自动绑定this
class CounterES6 {
    constructor() {
        this.count = 0;
        setInterval(() => {
            this.count++;
            console.log(this.count); // 每秒输出递增的数字
        }, 1000);
    }
}

// 剩余参数示例
// ES5使用arguments
function sumES5() {
    var args = Array.prototype.slice.call(arguments);
    return args.reduce(function(sum, num) {
        return sum + num;
    }, 0);
}
console.log(sumES5(1, 2, 3)); // 输出: 6

// ES6使用剩余参数
const sumES6 = (...numbers) => numbers.reduce((sum, num) => sum + num, 0);
console.log(sumES6(1, 2, 3)); // 输出: 6

3. 类和对象

特性ES5ES6
类定义构造函数class关键字
继承实现原型链extends关键字
静态方法手动添加static关键字
构造函数同名函数constructor方法

示例代码：

// ES5方式定义类
function Animal(name) {
    // 构造函数内定义实例属性
    this.name = name;
}

// 在原型上定义实例方法
Animal.prototype.speak = function() {
    return this.name + ' makes a sound';
};

// ES5方式创建和使用实例
var dog = new Animal('Dog');
console.log(dog.name);        // 输出: "Dog"
console.log(dog.speak());     // 输出: "Dog makes a sound"

// ES6方式定义类
class AnimalES6 {
    // constructor是类的构造方法
    constructor(name) {
        // 定义实例属性
        this.name = name;
    }
    
    // 类方法直接定义在类中，无需使用prototype
    speak() {
        return `${this.name} makes a sound`;
    }
    
    // static关键字定义静态方法，只能通过类本身调用，不能通过实例调用
    static create(name) {
        return new AnimalES6(name);
    }
}

// ES6方式创建和使用实例
const cat = new AnimalES6('Cat');
console.log(cat.name);        // 输出: "Cat"
console.log(cat.speak());     // 输出: "Cat makes a sound"

// 使用静态方法创建实例
const bird = AnimalES6.create('Bird');
console.log(bird.speak());    // 输出: "Bird makes a sound"

// 继承示例
// ES5继承
function Dog(name, breed) {
    // 调用父类构造函数
    Animal.call(this, name);
    this.breed = breed;
}
// 设置原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
// 添加子类特有方法
Dog.prototype.bark = function() {
    return this.name + ' barks!';
};

// ES6继承
class DogES6 extends AnimalES6 {
    constructor(name, breed) {
        // 调用父类构造函数
        super(name);
        this.breed = breed;
    }

    // 子类特有方法
    bark() {
        return `${this.name} barks!`;
    }
}

// 使用继承类
const husky = new Dog('Max', 'Husky');
console.log(husky.speak());   // 输出: "Max makes a sound"
console.log(husky.bark());    // 输出: "Max barks!"

const golden = new DogES6('Buddy', 'Golden Retriever');
console.log(golden.speak());  // 输出: "Buddy makes a sound"
console.log(golden.bark());   // 输出: "Buddy barks!"

4. 模块化

特性ES5ES6
模块定义CommonJS/AMDES Modules
导出语法module.exportsexport/export default
导入语法require()import
动态导入无原生支持dynamic import()

示例代码：

// ES5 (CommonJS)
// math.js
module.exports = {
    add: function(a, b) {
        return a + b;
    }
};
// main.js
var math = require('./math');

// ES6
// math.js
export const add = (a, b) => a + b;
export default class Calculator {};
// main.js
import { add } from './math';
import Calculator from './math';

5. 解构和展开

ES6新增特性：

// 数组解构
const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a);    // 输出: 1
console.log(b);    // 输出: 2
console.log(rest); // 输出: [3, 4, 5]

// 对象解构
const person = { name: 'John', age: 30, city: 'New York' };
const { name, age, city: location = 'Unknown' } = person;
console.log(name);     // 输出: "John"
console.log(age);      // 输出: 30
console.log(location); // 输出: "New York"

// 展开运算符 - 数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出: [1, 2, 3, 4, 5]

// 展开运算符 - 对象
const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };
const clonedObj = { ...obj1 };
const mergedObj = { ...obj1, ...obj2 };
console.log(clonedObj);  // 输出: { foo: 'bar', x: 42 }
console.log(mergedObj);  // 输出: { foo: 'baz', x: 42, y: 13 }

// 函数参数中使用展开
const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // 输出: 3

6. 字符串和模板字面量

特性ES5ES6
多行字符串使用\n和+连接模板字符串
字符串插值字符串拼接${expression}
Unicode支持有限完整支持

示例代码：

// ES5字符串拼接
var name = 'John';
var age = 30;
var message = 'My name is ' + name + ' and I am ' + age + ' years old.\n' +
              'This is a multi-line string.';
console.log(message);

// ES6模板字符串
const name = 'John';
const age = 30;
const message = `My name is ${name} and I am ${age} years old.
This is a multi-line string.`;
console.log(message);

// 模板字符串中的表达式
const a = 10;
const b = 20;
console.log(`Sum is: ${a + b}`); // 输出: "Sum is: 30"
console.log(`${a} is ${a < b ? 'less than' : 'greater than'} ${b}`);
// 输出: "10 is less than 20"

// 带标签的模板字符串
function myTag(strings, ...values) {
    let result = '';
    strings.forEach((string, i) => {
        result += string;
        if (i < values.length) {
            result += values[i].toUpperCase();
        }
    });
    return result;
}
const name = 'john';
console.log(myTag`Hello ${name}!`); // 输出: "Hello JOHN!"

7. 数组和对象新方法

示例代码：

// Array.from() - 将类数组对象转换为数组
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = Array.from(arrayLike);
console.log(arr); // 输出: ['a', 'b', 'c']

// Array.of() - 创建新数组
console.log(Array.of(1, 2, 3)); // 输出: [1, 2, 3]
console.log(Array(3));          // 输出: [empty × 3]

// find() 和 findIndex()
const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(num => num > 3);
const foundIndex = numbers.findIndex(num => num > 3);
console.log(found);      // 输出: 4
console.log(foundIndex); // 输出: 3

// includes()
console.log(numbers.includes(3));  // 输出: true
console.log(numbers.includes(6));  // 输出: false

// keys(), values(), entries()
const obj = { a: 1, b: 2 };
console.log(Object.keys(obj));    // 输出: ['a', 'b']
console.log(Object.values(obj));  // 输出: [1, 2]
console.log(Object.entries(obj)); // 输出: [['a', 1], ['b', 2]]

// 数组遍历方法示例
const fruits = ['apple', 'banana', 'orange'];
// forEach
fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});
// 输出:
// 0: apple
// 1: banana
// 2: orange

// map
const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits); // 输出: ['APPLE', 'BANANA', 'ORANGE']

8. Promise和异步编程

Promise 是异步编程的一种解决方案
Promise 可以用来封装各种异步操作，如网络请求、文件读写、定时器等。
通过 Promise，可以将异步操作的结果以同步的方式进行处理和管理。

示例代码：

// 创建一个Promise
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// 使用Promise
console.log('开始');
delay(2000)
    .then(() => {
        console.log('2秒后执行'); // 2秒后输出
        return delay(1000);
    })
    .then(() => {
        console.log('再过1秒执行'); // 再过1秒后输出
    })
    .catch(error => {
        console.error('发生错误:', error);
    });

// async/await语法（ES8引入，但常与Promise一起使用）
async function example() {
    try {
        console.log('开始');
        await delay(2000);
        console.log('2秒后执行');
        await delay(1000);
        console.log('再过1秒执行');
    } catch (error) {
        console.error('发生错误:', error);
    }
}

// Promise.all()示例
Promise.all([
    Promise.resolve(1),
    Promise.resolve(2),
    Promise.resolve(3)
])
.then(values => {
    console.log(values); // 输出: [1, 2, 3]
});

9. 其他新特性

// Set数据结构
const set = new Set([1, 2, 2, 3, 3]);
console.log(set.size);        // 输出: 3
console.log([...set]);        // 输出: [1, 2, 3]
set.add(4);
console.log(set.has(4));      // 输出: true
set.delete(4);
console.log(set.has(4));      // 输出: false

// Map数据结构
const map = new Map();
const key = { id: 1 };
map.set(key, 'value');
console.log(map.get(key));    // 输出: "value"
console.log(map.has(key));    // 输出: true
console.log(map.size);        // 输出: 1

// Symbol
const symbol1 = Symbol('description');
const symbol2 = Symbol('description');
console.log(symbol1 === symbol2); // 输出: false

const obj = {
    [symbol1]: 'Hello',
    [symbol2]: 'World'
};
console.log(obj[symbol1]); // 输出: "Hello"
console.log(obj[symbol2]); // 输出: "World"

// 生成器函数
function* numberGenerator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = numberGenerator();
console.log(gen.next().value); // 输出: 1
console.log(gen.next().value); // 输出: 2
console.log(gen.next().value); // 输出: 3
console.log(gen.next().done);  // 输出: true

总结

ES6相比ES5的主要改进：

  1. 更好的变量声明机制（let/const）
  2. 更简洁的函数语法（箭头函数）
  3. 更强大的面向对象能力（class）
  4. 更现代的模块化系统
  5. 更方便的数据处理（解构/展开）
  6. 更强大的异步编程能力（Promise）
  7. 更丰富的数据结构（Set/Map）
  8. 更完善的标准库

这些改进使JavaScript更加强大和易用，推动了现代Web开发的发展。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2313707.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

函数式编程的核心

函数式编程的核心

函数式编程 函数式编程&#xff08;funcitonal programming&#xff09;其实是个很古老的概念。 高阶函数和内存分析 函数式一阶公民 函数式编程最鲜明的特点就是&#xff1a;函数式一等公民&#xff0c;指的是函数与其他数据类型一样&#xff0c;处于平等地位&#xff0c;可…
阅读更多...
【易康eCognition实验教程】006：在影像上添加文本

【易康eCognition实验教程】006：在影像上添加文本

在某些情况下&#xff0c;希望能在影像上面显示文本文字&#xff0c;例如&#xff0c;一个地图的名称或者是多时相影像分析的年或月的显示。此外&#xff0c;文本如果作为一个规则集导出的部分则可以被纳入数字影像中。如下图所示&#xff1a; 若要添加文本&#xff0c;在影像视…
阅读更多...
C++【类和对象】(超详细！！！)

C++【类和对象】(超详细！！！)

C【类和对象】 1.运算符重载2.赋值运算符重载3.日期类的实现 1.运算符重载 (1).C规定类类型运算符使用时&#xff0c;必须转换成调用运算符重载。 (2).运算符重载是具有特殊名字的函数&#xff0c;名字等于operator加需要使用的运算符&#xff0c;具有返回类型和参数列表及函数…
阅读更多...
如何简单预估大模型运行所需的显存

如何简单预估大模型运行所需的显存

模型消耗的显存主要来源于模型参数&#xff0c;前向/反向&#xff0c;梯度以及优化器…… 1、为什么显存很重要 显存就是显卡的“仓库”和“高速公路”。 容量越大&#xff0c;能存储的图形数据就越多&#xff0c;就能支持更高分辨率、更高纹理质量的游戏或图形程序。 速度越…
阅读更多...
python基础知识补充

python基础知识补充

一.区分列表、元组、集合、字典&#xff1a; 二.输出&#xff1a; <1>格式化输出字符串&#xff1a; 格式符号转换%s字符串%d有符号的十进制整数%f浮点数%c字符%u无符号十进制整数%o八进制整数%x十六进制整数&#xff08;小写ox&#xff09;%X十六进制整数(大写OX)%e科…
阅读更多...
STM32-I2C通信外设

STM32-I2C通信外设

目录 一&#xff1a;I2C外设简介 二&#xff1a;I2C外设数据收发 三&#xff1a;I2C的复用端口 四&#xff1a;主机发送和接收 五&#xff1a;硬件I2C读写MPU6050 相关函数&#xff1a; 1.I2C_ GenerateSTART 2.I2C_ GenerateSTOP 3.I2C_ AcknowledgeConfig 4.I2C…
阅读更多...
【脚本】Linux一键扩大虚拟内存的大小

【脚本】Linux一键扩大虚拟内存的大小

Linux增加虚拟内存其实很简单 就那几个命令&#xff0c;free、mkswap、swapon 但是方便起见我写成了脚本 使用方法 进入你的目录&#xff0c; nano ./install_swap.sh 下面的脚本全文复制&#xff0c;粘贴进去之后&#xff0c;按ctrlx后按y保存 然后运行以下命令 sudo bash …
阅读更多...
信号隔离器 0-20mA/0-10V模拟信号隔离模块变送器 一进二出高精度

信号隔离器 0-20mA/0-10V模拟信号隔离模块变送器 一进二出高精度

信号隔离器 0-20mA/0-10V模拟信号隔离模块变送器 一进二出高精度https://item.taobao.com/item.htm?ftt&id766022047828 型号 一进二出 0-20mA 转0-20mA/0-10V MS-C12 一进二出 0-10V 转 0-20mA/0-10V MS-V12 信号隔离器 单组输出 MS-C1/V1 双组输出 MS-C12/V12 用于…
阅读更多...
Nat. Methods | scPerturb——单细胞扰动数据的标准化资源与统计分析方法

Nat. Methods | scPerturb——单细胞扰动数据的标准化资源与统计分析方法

《Nature Methods》提出scPerturb资源平台&#xff0c;整合44个单细胞扰动数据集&#xff08;涵盖转录组、表观组、蛋白组读值&#xff09;&#xff0c;并通过能量统计量&#xff08;E-statistics&#xff09;量化扰动效应&#xff0c;旨在解决单细胞扰动数据的互操作性差、缺乏…
阅读更多...
【易康eCognition实验教程】005：影像波段组合显示与单波段显示

【易康eCognition实验教程】005：影像波段组合显示与单波段显示

文章目录 一、加载多波段影像二、单波段显示三、彩色显示一、加载多波段影像 二、单波段显示 如果导入的影像数据具有三个或者更多的波段，影像场景将自动以RGB（红绿蓝）模式默认显示，如上图所示。在视图设置（View Settings）窗口中使用单波段灰度显示（Single LayuerGrays…
阅读更多...
使用Process Explorer、Dependency Walker和PE信息查看工具快速排查dll动态库因库与库版本不一致导致的加载失败问题

使用Process Explorer、Dependency Walker和PE信息查看工具快速排查dll动态库因库与库版本不一致导致的加载失败问题

目录 1、问题说明 2、使用Process Explorer查看目标dll动态库有没有动态加载起来 3、使用Dependency Walker查看xxpadll.dll库的库依赖关系&#xff0c;找到xxpadll.dll加载失败的原因 4、使用PE信息查看工具查看目标dll库的时间戳 5、关于xxsipstack2.dll中调用xxdatanet…
阅读更多...
Git的命令学习——适用小白版

Git的命令学习——适用小白版

浅要了解一下Git是什么&#xff1a; Git是目前世界上最先进的的分布式控制系统。Git 和其他版本控制系统的主要差别在于&#xff0c;Git 只关心文件数据的整体是否发生变化&#xff0c;而大多数其他系统则只关心文件内容的具体差异。Git 并不保存这些前后变化的差异数据。实际上…
阅读更多...
如何安全处置旧设备？

如何安全处置旧设备？

每年&#xff0c;数百万台旧设备因老化、故障或被新产品取代而被丢弃&#xff0c;这些设备上存储的数据可能带来安全风险。 如果设备没有被正确删除数据&#xff0c;这些数据往往仍可被恢复。因此&#xff0c;安全处置旧设备至关重要。 旧设备可能包含的敏感数据 旧设备中可能…
阅读更多...
Java 学习记录：基础到进阶之路（一）

Java 学习记录：基础到进阶之路（一）

今天&#xff0c;让我们深入到 Java 项目构建、基础语法及核心编程概念的领域&#xff0c;一探究竟。 软件安装及环境配置请查看之前更新的博客有着详细的介绍&#xff1a; IDEA软件安装&环境配置&中文插件-CSDN博客 目录 1.Java 项目构建基础 1.项目中的 SRC 目录…
阅读更多...
系统架构设计师—系统架构设计篇—软件架构风格

系统架构设计师—系统架构设计篇—软件架构风格

文章目录 概述经典体系结构风格数据流风格批处理管道过滤器对比 调用/返回风格主程序/子程序面向对象架构风格层次架构风格 独立构件风格进程通信事件驱动的系统 虚拟机风格解释器基于规则的系统 仓库风格&#xff08;数据共享风格&#xff09;数据库系统黑板系统超文本系统 闭…
阅读更多...
工厂模式加策略模式 -- 具体实现

工厂模式加策略模式 -- 具体实现

这里写目录标题 定义接口定义抽象类定义主处理器分支处理器定义工厂demo 定义接口 public interface EntityHandler extends InitializingBean {MatchContentDTO match(MatchEntityDTO matchEntityDTO);String supportEntityType(); }定义抽象类 public abstract class Abstr…
阅读更多...
STM32---FreeRTOS消息队列

STM32---FreeRTOS消息队列

一、简介 1、队列简介&#xff1a; 队列&#xff1a;是任务到任务&#xff0c;任务到中断、中断到任务数据交流的一种机制&#xff08;消息传递&#xff09;。 FreeRTOS基于队列&#xff0c;实现了多种功能&#xff0c;其中包括队列集、互斥信号量、计数型信号量、二值信号量…
阅读更多...
python-leetcode-删掉一个元素以后全为 1 的最长子数组

python-leetcode-删掉一个元素以后全为 1 的最长子数组

1493. 删掉一个元素以后全为 1 的最长子数组 - 力扣（LeetCode） 可以使用滑动窗口的方式来解决这个问题。我们要找到最长的全 1 子数组，但必须删除一个元素，因此可以将问题转化为寻找最多包含一个 0 的最长子数组。 解题思路 使用双指针（滑动窗口），维护窗口内最多包含一…
阅读更多...
【赵渝强老师】PostgreSQL的模板数据库

【赵渝强老师】PostgreSQL的模板数据库

在PostgreSQL中&#xff0c;创建数据库时实际上通过拷贝一个已有数据库进行工作的。在默认情况下&#xff0c;将拷贝名为template1的标准系统数据库。所以该数据库是创建新数据库的“模板”。如果为template1数据库增加对象&#xff0c;这些对象将被拷贝到后续创建的用户数据库…
阅读更多...
vue2中，在table单元格上右键，对行、列的增删操作（模拟wps里的表格交互）

vue2中，在table单元格上右键，对行、列的增删操作（模拟wps里的表格交互）

HTML <template><div><divclass"editable-area"v-html"htmlContent"contenteditableblur"handleBlur"contextmenu.prevent"showContextMenu"></div><button click"transformToMd">点击转成M…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023