Ecmascript（ES）标准

Ecmascript（ES）标准

ECMAScript（通常简称为 ES）是一种标准化的脚本语言，由 Ecma International 通过 ECMA-262 标准定义。ECMAScript 是 JavaScript 的规范版本，几乎所有的现代浏览器和许多服务器端环境（如 Node.js）都支持 ECMAScript。

ECMAScript 的历史

1. ES1 (1997)：首个版本，奠定了 JavaScript 的基础。
2. ES2 (1998)：对 ES1 的小修正。
3. ES3 (1999)：增加了正则表达式、错误处理等特性。
4. ES4 (未发布)：计划引入许多新特性，但由于过于激进，最终没有发布。
5. ES5 (2009)：增加了严格模式、JSON 支持、数组和对象的新方法等。
6. ES6 / ES2015 (2015)：引入了许多重要特性，如模块、类、箭头函数、解构赋值、模板字符串等。
7. ES2016 (2016)：增加了 Array.prototype.includes 和指数运算符 **。
8. ES2017 (2017)：增加了异步函数、共享内存和原子操作等。
9. ES2018 (2018)：增加了异步迭代、正则表达式改进、REST 参数和展开运算符等。
10. ES2019 (2019)：增加了 flat 和 flatMap 方法、Object.fromEntries、可选的 catch 绑定等。
11. ES2020 (2020)：增加了 BigInt、Promise.allSettled、空值合并运算符 ?? 等。
12. ES2021 (2021)：增加了逻辑赋值运算符、String.prototype.replaceAll 等。
13. ES2022 (2022)：增加了类的私有属性、顶级 await、错误原因等。
14. ES2023 (2023)：增加了 Array.findLast 和 Array.findLastIndex、Intl.NumberFormat 的新选项等。

主要特性

1. 基础类型和结构

• 原始类型

  • Number：表示数值，包括整数和浮点数。
  • String：表示文本。
  • Boolean：表示真（true）或假（false）。
  • Null：表示空值。
  • Undefined：表示未定义的值。
  • Symbol：表示唯一标识符，常用于对象属性键。
  • BigInt：表示任意大小的整数。

  复合类型

  • Object：用于存储键值对。
  • Array：用于存储有序的数据集合。
  • Function：用于定义可执行的代码块。

2. 函数

• 箭头函数

  箭头函数提供了一种更简洁的函数定义方式，并且在函数体内使用 this 时不会绑定新的 this 值。

  const add = (a, b) => a + b;
  console.log(add(1, 2)); // 输出 3
  

  默认参数

  允许在函数定义时为参数指定默认值。

  function greet(name = 'Guest') {console.log(`Hello, ${name}!`);
  }
  greet(); // 输出 Hello, Guest!
  greet('Alice'); // 输出 Hello, Alice!
  

  剩余参数

  允许将不定数量的参数收集到一个数组中。

  function sum(...args) {return args.reduce((a, b) => a + b, 0);
  }
  console.log(sum(1, 2, 3, 4)); // 输出 10
  

3. 对象

• 解构赋值

  可以从对象或数组中提取数据并赋值给变量。

  const person = { name: 'Alice', age: 30 };
  const { name, age } = person;
  console.log(name); // 输出 Alice
  console.log(age); // 输出 30const [a, b, c] = [1, 2, 3];
  console.log(a, b, c); // 输出 1 2 3
  

  扩展运算符

  可以用来合并对象或数组。

  const obj1 = { a: 1, b: 2 };
  const obj2 = { ...obj1, c: 3 };
  console.log(obj2); // 输出 { a: 1, b: 2, c: 3 }const arr1 = [1, 2];
  const arr2 = [...arr1, 3, 4];
  console.log(arr2); // 输出 [1, 2, 3, 4]
  

4. 类

• 类定义

  类是面向对象编程的重要组成部分，用于定义对象的结构和行为。

  class Person {constructor(name) {this.name = name;}greet() {console.log(`Hello, my name is ${this.name}.`);}
  }const alice = new Person('Alice');
  alice.greet(); // 输出 Hello, my name is Alice.
  

  静态方法

  静态方法属于类本身，而不是类的实例。

  class MathUtils {static add(a, b) {return a + b;}
  }console.log(MathUtils.add(1, 2)); // 输出 3
  

  私有属性和方法

  私有属性和方法只能在类的内部访问。

  class Counter {#count = 0;increment() {this.#count++;}getCount() {return this.#count;}
  }const counter = new Counter();
  counter.increment();
  console.log(counter.getCount()); // 输出 1
  

5. 模块

• 导入导出

  模块化开发有助于组织和管理代码。

  // math.js
  export function add(a, b) {return a + b;
  }export function subtract(a, b) {return a - b;
  }// main.js
  import { add, subtract } from './math.js';console.log(add(1, 2)); // 输出 3
  console.log(subtract(5, 3)); // 输出 2
  

6. 异步编程

• Promise

  Promise 是处理异步操作的一种方式，可以更好地管理回调地狱。

  const fetchData = url => {return new Promise((resolve, reject) => {setTimeout(() => {resolve({ data: 'Fetched data' });}, 1000);});
  };fetchData('https://example.com').then(data => console.log(data)).catch(error => console.error(error));
  

  async/await

  async/await 是基于 Promise 的语法糖，使异步代码看起来更像同步代码。

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

7. 其他特性

• 模板字符串

  模板字符串允许在字符串中嵌入表达式。

  const name = 'Alice';
  const message = `Hello, ${name}!`;
  console.log(message); // 输出 Hello, Alice!
  

  迭代器和生成器

  迭代器和生成器提供了处理数据流的新方式。

  function* generateSequence() {yield 1;yield 2;yield 3;
  }const generator = generateSequence();
  console.log(generator.next().value); // 输出 1
  console.log(generator.next().value); // 输出 2
  console.log(generator.next().value); // 输出 3
  

  代理和反射

  代理和反射提供了拦截和控制对象操作的能力。

  const handler = {get(target, prop) {return target[prop];},set(target, prop, value) {target[prop] = value;}
  };const target = { a: 1 };
  const proxy = new Proxy(target, handler);console.log(proxy.a); // 输出 1
  proxy.a = 2;
  console.log(proxy.a); // 输出 2
  

资源和工具

• 官方规范：https://tc39.es/ecma262/
• Babel：将新版本的 JavaScript 转换为向后兼容的代码，以便在旧环境中运行。
• MDN Web 文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript
• ECMAScript 提案：https://github.com/tc39/proposals

希望这些详细的解释能帮助您更好地理解和使用 ECMAScript。