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) :增加了 flatflatMap 方法、Object.fromEntries、可选的 catch 绑定等。
  11. ES2020 (2020) :增加了 BigIntPromise.allSettled、空值合并运算符 ?? 等。
  12. ES2021 (2021) :增加了逻辑赋值运算符、String.prototype.replaceAll 等。
  13. ES2022 (2022) :增加了类的私有属性、顶级 await、错误原因等。
  14. ES2023 (2023) :增加了 Array.findLastArray.findLastIndexIntl.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); // 输出 30

  const [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

资源和工具

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

相关推荐
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_6 小时前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑2136 小时前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy6 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js