【热门主题】000029 ECMAScript：现代编程的基石

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

【热门主题】000029 ECMAScript：现代编程的基石

📚一、ECMAScript 的起源与发展

追溯 ECMAScript 的诞生历程，从网景公司的 JavaScript 到成为标准化脚本语言，历经多个版本迭代。
1995 年，网景工程师 Brendan Eich 花了 10 天时间设计了 JavaScript 语言。1996 年微软发布了 JScript，同时拉开了 Navigator 和 Internet Explorer 浏览器大战的序幕。为了让各大浏览器统一编程规范，1996 年 11 月网景公司将 JavaScript 提交给欧洲计算机制造商协会（ECMA）进行标准化。1997 年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript。
ECMAScript 自诞生以来，不断进行版本迭代。1998 年 6 月，ECMAScript 2.0 发布，主要是对第一个版本进行修订和错误修正。1999 年 12 月，ECMAScript 3.0 发布，引入了正则表达式、异常处理、更好的字符串处理方法等。此后，ECMAScript 的发展历经波折，ECMAScript 4.0 由于分歧较大被中止。2009 年 12 月，ECMAScript 5.0 版正式发布，引入了严格模式、JSON 支持、Object.defineProperty 等新特性，进一步提高了语言的安全性和性能。2015 年 6 月，ECMAScript 6.0（ES6）正式发布，这是 JavaScript 语言的重大升级，引入了类、模块、箭头函数、Promise、let 和 const 等众多新特性。此后，ECMAScript 每年都会发布一个新版本，不断为开发者带来新的功能和改进。

📚二、核心特性解析

📘（一）变量声明

在 ECMAScript 中，var、let和const是三种主要的变量声明方式。
var是在 ECMAScript 早期版本中使用的声明方式。它存在变量提升现象，即可以在声明之前使用变量，值为undefined。var声明的变量作用域是函数作用域，在函数内部声明的变量在函数外部无法访问。例如：

function testVar() {
    console.log(result);
    var result = 123;
}

在上述代码中，虽然result在声明之前就被使用了，但在运行时会自动提升到函数作用域的顶部，相当于：

function testVar() {
    var result;
    console.log(result);
    result = 123;
}

let是在 ECMAScript 6 中引入的声明方式。let声明的变量具有块级作用域，即在{}内部声明的变量在外部无法访问。let不允许重复声明，并且不会发生变量提升。例如：

let fuga1 = 'fuga1';
let fuga2;
let fuga1 = 'fuga1'; // 会报错，不允许重复声明
console.log(fuga1);
console.log(fuga2);

const同样是在 ECMAScript 6 中引入的声明方式。const声明的变量必须同时初始化，并且不允许重新赋值和重新声明。如果const变量引用的是对象，可以修改对象的属性，但不能修改对象的引用。例如：

const piyo = 'piyo';
piyo = 'hogehoge'; // 会报错，不允许重新赋值
const dd = {a:1,b:2};
dd.a = 2; // 可以修改对象的属性
console.log(dd);

在实际应用中，一般情况下建议优先使用const声明变量，如果确定变量的值需要修改，则使用let。而var在现代 JavaScript 开发中应尽量避免使用，以防止出现变量作用域混乱和意外的变量覆盖问题。

📘（二）数据类型

ECMAScript 中有多种数据类型，包括原始类型和复合类型。
原始类型包括：
String：任意字符串。例如：let str = “Hello World!”;
Number：任意数字。但要注意数字的精度问题，例如：let num = 0.1 + 0.2;结果为0.30000000000004，可以使用toFixed()方法规避误差。
Boolean：true和false。
undefined：表示缺少值，变量未初始化时默认值为undefined。例如：let a; console.log(a); console.log(typeof a);输出为undefined和undefined类型。
null：表示没有对象，此处不应该有值。例如：let n = null; console.log(n); console.log(typeof n);输出为null和object类型，虽然输出为object，但null实际上是一个独立的数据类型。
Symbol：ECMAScript 6 中引入的新类型，表示独一无二的值。例如：const sym1 = Symbol(“123”); const sym2 = Symbol(“123”); console.log(sym1 == sym2);输出为false，说明即使描述相同，两个Symbol值也是不相等的。
复合类型主要有：
Object：任意对象，是由键值对组成的集合。例如：let obj = {name: “John”, age: 30};
Function：一种特殊的对象，可以执行代码。例如：function add(a, b) { return a + b; }
Array：一种特殊的对象，是数值下标且内部数据有序的集合。例如：let arr = [1, 2, 3];

📘（三）控制结构

ECMAScript 中的控制结构主要包括条件结构和循环结构。
条件结构：
if…else语句：根据条件的结果执行不同的代码块。例如：

let num = 10;
if (num > 10) {
    console.log("数字大于 10");
} else if (num < 10) {
    console.log("数字小于 10");
} else {
    console.log("数字等于 10");
}

switch语句：根据表达式的值匹配不同的case，执行相应的代码块。例如：

let day = 3;
switch (day) {
    case 1:
        console.log("周一");
        break;
    case 2:
        console.log("周二");
        break;
    case 3:
        console.log("周三");
        break;
    default:
        console.log("其他");
        break;
}

循环结构：
for循环：用于已知循环次数的情况。例如：

for (let i = 0; i < 5; i++) {
    console.log(i);
}

while循环：在条件为真时重复执行代码块。例如：

let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

do…while循环：先执行一次代码块，然后在条件为真时重复执行。例如：

let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

📘（四）函数

在 ECMAScript 中，函数是执行特定任务的独立代码块。主要有普通函数、箭头函数和匿名函数。
普通函数：
使用function关键字声明，可以有函数名，存在函数声明提升现象。例如：

function add(a, b) {
    return a + b;
}
console.log(add(1, 2));

匿名函数：
没有函数名，存在变量提升现象，但不是函数声明提升。例如：

let sub = function(a, b) {
    return a - b;
};
console.log(sub(3, 2));

箭头函数：
ECMAScript 6 引入的新函数形式，简洁且具有特定的this指向规则。例如：

let multiply = (a, b) => a * b;
console.log(multiply(2, 3));

箭头函数与普通函数和匿名函数有以下区别：
形式上更加简洁，当只有一个参数时可以省略括号，当函数体只有一个表达式时可以省略花括号和return关键字。
箭头函数没有自己的this，它的this是词法作用域，由上下文确定，不能通过call()、apply()或bind()方法改变。
箭头函数没有arguments内置对象，可以使用扩展运算符获取参数。
（五）对象和类
ECMAScript 是基于原型的面向对象编程语言。
基于原型的面向对象编程：
基本概念是动态可变对象。对象可以独立存储自己的特性（属性和方法），并且可以轻松地改变（添加、删除、修改）自己的特性。例如：

let object = {a:10, b: 20, c: 30, method: function() { console.log("Hello"); }};
object.method();
object.d = 40;
delete object.c;
console.log(object);

ES6 引入的类概念：
使用class和extends关键字更简洁地定义构造函数和继承。例如：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        console.log(`Hello, I'm ${this.name}.`);
    }
}
class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);
        this.grade = grade;
    }
}
let student = new Student("Tom", 18, "Senior");
student.sayHello();

📘（六）数组和字符串

数组操作方法：
map()：对数组的每个元素执行一个函数，返回一个新数组。例如：

let arr = [1, 2, 3, 4];
let newArr = arr.map(item => item * item);
console.log(newArr);

reduce()：对数组的每个元素执行一个函数，将结果继续和序列的下一个元素做累积计算。例如：

let arr = [1, 2, 3, 4, 5];
let newArr = arr.reduce((x, y) => x * 10 + y);
console.log(newArr);

filter()：过滤数组中的元素，返回一个新数组。例如：

let arr = [1, 2, 3, 4, 5, 6];
let newArr = arr.filter(item => item % 2!== 0);
console.log(newArr);

字符串操作方法：
拼接：可以使用+号进行拼接。例如：let str1 = “Hello”; let str2 = “World”; let str3 = str1 + " " + str2;
模板字符串：使用反引号，可以包含插入的表达式。例如：let name = “John”; let str = Hello, ${name}!;
查找：indexOf()方法用于查找字符串中的字符或子字符串，返回其位置。例如：let str = “Hello World”; console.log(str.indexOf(“World”));
截取：slice()方法用于截取字符串。例如：let str = “Hello World”; let newStr = str.slice(6);
大小写转换：toUpperCase()和toLowerCase()方法分别用于将字符串转换为大写和小写。例如：let str = “Hello”; console.log(str.toUpperCase());

📘（七）正则表达式

正则表达式在 ECMAScript 中用于匹配和操作字符串。
例如，使用正则表达式验证邮箱格式：

let email = "test@example.com";
let regex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
console.log(regex.test(email));

正则表达式还可以用于字符串的替换、分割等操作。例如：

let str = "Hello, World!";
let newStr = str.replace(/World/, "JavaScript");
console.log(newStr);
let arr = str.split(/\s|,/);
console.log(arr);

📚三、重大更新纵览

📘版本

ES6（ECMAScript 2015）带来了众多重大变革，成为 JavaScript 发展历程中的一个重要里程碑。

📘let 和 const：

引入了新的变量声明关键字。let提供了块级作用域，避免了变量提升和作用域混乱问题。const用于声明常量，一旦赋值就不能再被修改。例如：
let x = 10;
const PI = 3.14;

📘箭头函数：

提供了简洁的函数定义语法，自动绑定正确的this上下文，没有自己的arguments对象，支持隐式返回表达式。例如：

const add = (a, b) => a + b;

📘模板字符串：

允许多行字符串书写和内插表达式，通过 ${}插入变量或表达式的值。例如：

let name = 'Alice';
console.log(`Hello, ${name}!`);

📘解构赋值：

可以从数组或对象中直接提取值赋给变量，简化了复杂数据结构的处理。例如：

const [first, second] = [1, 2];
const { name } = { name: 'Bob' };

📘默认参数：

函数参数可以设置默认值，如果传入的实参未提供或为undefined，则使用默认值。例如：

function add(a = 0, b = 0) {
    return a + b;
}

📘扩展运算符：

使用 …将数组或对象展开为单独的元素或键值对，常用于合并数组、复制数组、函数参数传递等场景。例如：

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const combinedArr = [...arr1,...arr2];

📘剩余参数：

在函数参数列表中使用 …收集剩余的不定数量参数，形成一个数组。例如：

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

📘类：

引入了基于原型的面向对象编程语法糖，简化了构造函数、原型链和继承的定义。例如：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);
        this.grade = grade;
    }
}

📘模块：

通过import和export语句实现模块化编程，支持静态分析和按需加载。例如：

// module1.js
export const PI = 3.14;
// module2.js
import { PI } from './module1.js';

📘Promise：

标准化了异步编程模型，提供了一种处理异步操作链式调用和错误处理的方法。例如：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 1000);
    });
}
fetchData().then(data => console.log(data)).catch(error => console.error(error));

📘生成器：

使用function*定义的函数，可以暂停执行并保留内部状态，用于编写异步或迭代流程。例如：

function* counter() {
    let i = 0;
    while (true) {
        yield i++;
    }
}
const gen = counter();
console.log(gen.next().value);
console.log(gen.next().value);

📘Symbols：

一种新的原始数据类型，表示独一无二的、不可变的值，常用于创建对象属性的唯一标识符，避免属性名冲突。例如：

const sym1 = Symbol('description');
const sym2 = Symbol('description');
console.log(sym1 === sym2); // false

📘Map 和 Set：

两种新的数据结构，分别用于键值对存储（允许任何类型的键）和唯一值集合。例如：

const map = new Map();
map.set('key', 'value');
const set = new Set([1, 2, 3]);

📘Proxy 和 Reflect：

提供了拦截对象操作（如属性访问、修改等）和反射 API，用于元编程和对象行为的定制。例如：

const target = { name: 'Alice' };
const handler = {
    get: (obj, prop) => {
        return prop in obj? obj[prop] : 'Not found';
    }
};
const proxy = new Proxy(target, handler);
console.log(proxy.name);

console.log(proxy.age);

📘for-of 循环：

用于遍历可迭代对象（如数组、Set、Map、字符串、生成器等）的值。例如：

const arr = [1, 2, 3];
for (let num of arr) {
    console.log(num);
}

自 ES6 发布后，ECMAScript 进入了每年发布新版本的节奏。
ES7（ECMAScript 2016）引入了Array.prototype.includes方法，用于判断数组是否包含某个指定的值，返回布尔值。例如：

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true

ES8（ECMAScript 2017）带来了异步函数async/await，进一步改善了异步编程体验。例如：

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
}
fetchData().then(data => console.log(data));

ES9（ECMAScript 2018）新增了异步迭代器、Promise.finally等特性。异步迭代器允许对异步数据源进行迭代。例如：

async function* asyncGenerator() {
    yield await Promise.resolve(1);
    yield await Promise.resolve(2);
}
(async () => {
    for await (const value of asyncGenerator()) {
        console.log(value);
    }
})();

Promise.finally方法用于在Promise被解决（无论是fulfilled还是rejected）后执行一些清理操作。例如：

function fetchData() {
    return fetch('https://api.example.com/data')
       .then(response => response.json())
       .finally(() => console.log('Finished fetching data'));
}
fetchData();

ES10（ECMAScript 2019）带来了Array.prototype.flat和Array.prototype.flatMap等方法。flat方法用于将嵌套数组展开为一维数组。例如：

const nestedArr = [1, [2, [3]]];
const flatArr = nestedArr.flat(2);
console.log(flatArr);

flatMap方法是map和flat的组合，先对数组的每个元素执行一个函数，然后将结果展开为一维数组。例如：

const arr = [1, 2, 3];
const newArr = arr.flatMap(num => [num, num * 2]);
console.log(newArr);

ES11（ECMAScript 2020）引入了可选链操作符?.和空值合并操作符??等特性。可选链操作符允许安全地访问可能为null或undefined的对象属性。例如：

const obj = { a: { b: { c: 1 } } };
const value = obj?.a?.b?.c;
console.log(value);

空值合并操作符用于在左侧操作数为null或undefined时返回右侧操作数。例如：

const value1 = null?? 'default';
const value2 = undefined?? 'default';
console.log(value1);
console.log(value2);

ES12（ECMAScript 2021）新增了replaceAll方法用于对String进行操作，Promise.any用于对Promise进行组合操作，AggregateError用于表示多个错误的集合，新的逻辑操作符??=、&&=、||=，弱引用WeakRef，FinalizationRegistry用于垃圾回收的注册，一个数字的分隔符1_000，更加精准的数组sort方法Array.prototype.sort等特性。
replaceAll方法用于替换字符串中的所有匹配项。例如：

const string = "flydean is a good fly";
console.log(string.replaceAll("fly", "butterfly"));

Promise.any返回任意一个提前resolve的结果，如果所有的Promise都被reject，则抛出AggregateError。例如：

const prom1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("promise one"), Math.floor(Math.random() * 100));
});
const prom2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("promise two"), Math.floor(Math.random() * 100));
});
const prom3 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("promise three"), Math.floor(Math.random() * 100));
});
(async function () {
    const result = await Promise.any([prom1, prom2, prom3]);
    console.log(result);
})();

新的逻辑操作符??=、&&=、||=：

var x = 1;
var y = 2;
x &&= y;
x ||= y;
var z;
z??= y;

数字分隔符方便程序员阅读长数字。例如：

const number = 1_000_000_000_000;
const binary = 0b1010_0101_1111_1101;
const hex = 0xAF_BF_C3;

ES13（ECMAScript 2022）引入了公共和私有实例字段、私有实例方法和访问器、将静态成员添加到类、/d正则提供一个indices数组、顶层await、检查私有字段是否存在、at负索引查找、hasOwn、错误原因支持等新特性。
公共和私有实例字段允许使用#表示私有字段。例如：

class Foo {
    title = "";
    #artist = "";
    constructor(title, artist) {
        this.title = title;
        this.#artist = artist;
    }
}

📘私有实例方法和访问器：

class PageVM {
    title = "";
    #artist = "";
    constructor(title, artist) {
        this.title = title;
        this.#artist = artist;
    }
    get getArtist() {
        return this.#artist;
    }
    set #setArtist(artist) {
        this.#artist = artist;
    }
}

📘将静态成员添加到类：

class Article {
    static label = "ES 2022";
}
console.log(Article.label);
class Article {
    static #label = "es 2022";
    constructor() {
        console.log(Article.#label);
    }
}

/d正则提供一个indices数组，数值为匹配到的字符串的开始和结束位置。例如：

const str = 'Hello world!';
const patt = /Hello/d;
const res = patt.exec(str);
console.log(res);

顶层await允许在顶层使用await函数。例如：

const sleep = (delay = 1000) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, delay);
    });
};
await sleep(3000);

📘检查私有字段是否存在：

class PageVm {
    #artist;
    checkField() {
        return #artist in this;
    }
}
let vm = new PageVm();
vm.checkField();

at负索引查找：

const list = ['apple', 'banner', 'Grape', 'other', 'pear'];
list.at(-1);
list.at(-2);

hasOwn：
let foo = Object.create(null);
foo.hasOwnProperty = function () {};
Object.hasOwn(foo, 'hasOwnProperty');

📘错误原因支持：

function errormsg() {
    try {
        noFun();
    } catch (err) {
        throw new Error('causeError', { cause: 'fun为定义，diy error msg' });
    }
}
function goFun() {
    try {
        errormsg();
    } catch (err) {
        console.log(`Cause by: ${err.cause}`);
    }
}
goFun();

ES14（ECMAScript 2023）暂未有特别重大的特性更新，但随着时间的推移，可能会有更多的改进和新特性被提出。
ES15（ECMAScript 2024）带来了一些新特性，如Group By分组（Map.groupBy()和Object.groupBy()）、Promise.withResolvers、正则表达式标志/v、ArrayBuffers和SharedArrayBuffers的新功能、新增了两个确保字符串格式正确的函数（String.prototype.isWellFormed和String.prototype.toWellFormed）、Atomics.waitAsync()等。
Map.groupBy()将可迭代对象分组为一个新的Map，Object.groupBy()生成一个对象而不是Map。例如：

Map.groupBy([0, -5, 3, -4, 8, 9], x => Math.sign(x));
Object.groupBy([0, -5, 3, -4, 8, 9], x => Math.sign(x));

Promise.withResolvers()提供了一种创建我们想要解决的Promise的新方法。例如：
const { promise, resolve, reject } = Promise.withResolvers();

正则表达式标志/v是u标志的 “升级”，可启用更多与 Unicode 相关的功能，支持字符串集合、三种集合操作、字符串的属性等。例如：

/^[\w--[a-g]]$/v.test('a');
/^[\w--[a-g]]$/v.test('i');
/[[\p{ASCII}&&\p{Letter}]]/v;
/[[\p{ASCII}&&\p{Letter}]\p{Number}]/v;
"Did you see the 👩🏿❤️💋👩🏾 emoji?".match(/\p{RGI_Emoji}/v);

ArrayBuffers和SharedArrayBuffers的新功能包括ArrayBuffers就地调整大小、ArrayBuffers.transfer()可转移、SharedArrayBuffers可以调整大小但只能增长不能缩小且不可转移。例如：

const buf = new ArrayBuffer(2, { maxByteLength: 32 });
buf.resize(12);
const original = new ArrayBuffer(16);
const transferred = original.transfer();

新增的两个确保字符串格式正确的函数String.prototype.isWellFormed让你能够测试一个字符串是否是格式正确的，String.prototype.toWellFormed方法返回一个字符串，其中该字符串的所有单独代理项都被替换为 Unicode 替换字符U+FFFD。例如：

const strings = [
    // 单独的前导代理
    "ab\uD800",
    "ab\uD800c",
    // 单独的后尾代理
    "\uDFFFab",
    "c\uDFFFab",
    // 格式正确
    "abc",
    "ab\uD83D\uDE04c",
];
for (const str of strings) {
    console.log(str.isWellFormed());
    console.log(str.toWellFormed());
}

Atomics.waitAsync()静态方法异步等待共享内存的特定位置并返回一个Promise。与Atomics.wait()不同，waitAsync是非阻塞的且可用于主线程。
ECMAScript 的不断发展为 JavaScript 开发者提供了更强大的功能和更高效的开发方式，推动着 Web 开发的不断进步。

📚四、未来趋势探索

📘（一）技术融合与创新

随着技术的不断发展，ECMAScript 有望与更多新兴技术进行融合与创新。例如，与人工智能和机器学习领域的结合，使得 JavaScript 能够在前端实现更智能的交互和数据分析。通过与区块链技术的整合，为去中心化应用提供更强大的脚本支持。

📘（二）性能优化

性能一直是开发者关注的重点，未来的 ECMAScript 标准可能会在性能优化方面持续发力。这可能包括更高效的内存管理、更快的执行速度以及更好的并行处理能力。例如，进一步优化异步编程模型，提高异步操作的效率，减少资源占用。

📘（三）语言安全性增强

随着网络安全问题日益突出，ECMAScript 可能会在语言安全性方面进行更多的改进。例如，加强对输入数据的验证和过滤，防止恶意代码的注入。引入更严格的类型检查机制，减少潜在的类型错误和安全漏洞。

📘（四）跨平台开发支持

随着移动应用和桌面应用的发展，ECMAScript 有望进一步加强对跨平台开发的支持。例如，通过与移动开发框架的整合，实现一次编写、多平台运行的目标。同时，也可能会与桌面应用开发工具进行更紧密的结合，为桌面应用开发提供更便捷的解决方案。
（五）开发者体验提升
为了提高开发者的生产效率和开发体验，ECMAScript 可能会引入更多的便捷特性和工具。例如，提供更强大的代码自动补全和错误提示功能，简化开发过程中的调试和测试工作。同时，也可能会进一步优化文档和社区支持，方便开发者学习和使用。
（六）生态系统扩展
ECMAScript 的生态系统将继续不断扩展，包括更多的库、框架和工具的出现。这些生态系统的扩展将为开发者提供更多的选择和便利，同时也会推动 ECMAScript 在不同领域的应用和发展。例如，在物联网、虚拟现实和增强现实等领域，可能会出现专门针对这些领域的 ECMAScript 库和框架。
总之，ECMAScript 标准的未来发展充满了无限的可能性。随着技术的不断进步和开发者需求的不断变化，ECMAScript 将继续不断演进和创新，为 Web 开发和其他领域的应用提供更强大的支持。

📚五、实际开发应用

📘（一）与 JavaScript 的区别

ECMAScript（简称 ES）是一种脚本语言的标准，由 ECMA 国际组织制定。而 JavaScript 是基于 ECMAScript 标准的一种编程语言，它不仅实现了 ECMAScript 的核心功能，还扩展了许多其他功能，如文档对象模型（DOM）和浏览器对象模型（BOM）等。
从定义上看，ECMAScript 是一个语言标准，定义了语言的基本特性，如语法、类型、语句、关键字、保留字、操作符、对象等。JavaScript 则是 ECMAScript 的一个实现，包含了浏览器和其他环境中运行的特性。
在功能方面，ECMAScript 专注于定义语言的核心特性和规范，不涉及任何特定的执行环境或 API。例如，ECMAScript 定义了变量声明、函数定义、运算符等基本语法结构，以及数据类型、内置对象、控制流程等核心功能。而 JavaScript 除了实现了 ECMAScript 的这些功能外，还提供了大量与浏览器交互的 API，如 DOM 和 BOM，用于操作网页文档和浏览器窗口。此外，JavaScript 还支持 Node.js 等非浏览器环境，并且各大浏览器厂商和开源社区为 JavaScript 添加了许多非标准特性，并构建了大量的第三方库和框架，如 jQuery、React、Vue 等，极大地丰富了其功能和应用场景。
在应用方面，ECMAScript 是一个语言规范，不依赖于特定的运行环境，因此可以在不同的平台和环境中实现。而 JavaScript 通常在浏览器中运行，但也可以在 Node.js 等环境中运行，具有更丰富的 API 和应用场景。例如，在前端开发中，JavaScript 可以通过 DOM 和 BOM 操作网页文档和浏览器窗口，实现网页的交互性和动态效果。在后端开发中，JavaScript 可以通过 Node.js 实现服务器端的编程，处理 HTTP 请求、数据库操作等任务。

📘（二）实际案例展示

以下是一个使用 ECMAScript ES6 新特性在实际开发中的示例。
示例：使用 ES6 的模块系统进行代码组织和共享
假设我们正在开发一个小型的电子商务网站，需要实现商品管理和订单处理的功能。我们可以使用 ES6 的模块系统将代码拆分成不同的文件，并通过import和export语句来组织和共享代码。
创建一个名为product.js的文件，用于定义商品管理的模块：

class Product {
    constructor(id, name, price) {
        this.id = id;
        this.name = name;
        this.price = price;
    }
}

const products = [
    new Product(1, 'iPhone', 999),
    new Product(2, 'iPad', 799),
    new Product(3, 'MacBook', 1499)
];

export { Product, products };

创建一个名为order.js的文件，用于定义订单处理的模块：

import { Product, products } from './product.js';

class Order {
    constructor() {
        this.items = [];
    }

    addItem(productId) {
        const product = products.find(p => p.id === productId);
        if (product) {
            this.items.push(product);
        }
    }

    getTotalPrice() {
        return this.items.reduce((total, item) => total + item.price, 0);
    }
}

export { Order };

在主文件app.js中，使用这些模块来处理商品管理和订单处理的功能：

import { Product, products, Order } from './product.js';
import { Order as OrderModule } from './order.js';

const order = new OrderModule();
order.addItem(1);
order.addItem(2);

console.log(`Total price: ${order.getTotalPrice()}`);

在这个例子中，我们使用了 ES6 的模块系统将商品管理和订单处理的功能拆分成不同的文件，并通过import和export语句来组织和共享代码。这样可以提高代码的可维护性和可重用性，同时也方便了团队协作开发。
另一个实际案例是使用 ES6 的箭头函数和map方法来处理数组数据。
示例：使用箭头函数和map方法处理数组数据
假设我们有一个数组，包含了一些用户的信息，我们需要提取出每个用户的名字和年龄，并将其转换为一个新的数组。

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
];

const newUsers = users.map(user => ({ name: user.name, age: user.age }));

console.log(newUsers);

在这个例子中，我们使用了 ES6 的箭头函数和map方法来处理数组数据。箭头函数的简洁语法使得代码更加易读和易于维护，同时map方法也提供了一种方便的方式来对数组的每个元素执行一个函数，并返回一个新的数组。
通过这些实际案例，我们可以看到 ECMAScript 的新特性在实际开发中的应用，可以提高代码的可读性、可维护性和可重用性，同时也方便了团队协作开发。

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。

更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作