Ecmascript（ES）标准

🕗 发布于 2024-11-12 23:55 ecmascript elasticsearch 前端

Ecmascript（ES）标准

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

ECMAScript 的历史

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

资源和工具

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

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

原文地址：https://blog.csdn.net/fghyibib/article/details/143687307

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：ctfshow-web入门-反序列化（web271-web278）
下一篇：[运维][Nginx]Nginx学习(1/5)--Nginx基础

【C++动态规划】2304. 网格中的最小路径代价|1658
给你一个下标从 0 开始的整数矩阵 grid ，矩阵大小为 m x n ，由从 0 到 m * n - 1 的不同整数组成。你可以在此矩阵中，从一个单元格移动到下一行的任何其他单元格。如果你位于单
阅读更多2024-11-14
【HCIE-Datacom考试战报】2024-01-22 成都 MPLS
因为一个IP配错了耽误了半个多小时以及引发了后续的右侧ACC离线问题，前后处理使用了一个小时左右的时间，并且影响了心态，以至于后续广域承载也发生了错误。
阅读更多2024-11-14
OpenCV DNN
OpenCV DNN是一个轻量级、高效的推理引擎，适合在没有 PyTorch 环境的设备上运行已训练好的模型，特别适合嵌入式系统、实时计算和低资源环境中的模型推理。PyTorch是一个全栈深度学习框架
阅读更多2024-11-14
vue 计算属性get set
简单来说返回值写get里面，set里面写数据操作。
阅读更多2024-11-14
用正则表达式检查是IP否为内网地址
用正则表达式检查是ip否为内网地址。
阅读更多2024-11-14
Node.js事件循环：解锁异步编程的奥秘
Node.js事件循环是Node.js运行时的核心组件，它负责管理异步操作和回调函数的执行。它基于事件驱动的非阻塞I/O模型，允许Node.js在单线程中处理大量并发请求，实现高性能和可伸缩性。Nod
阅读更多2024-11-14
CTFhub RCE命令注入学习
(2)less:与more类似,但是比more更好的是,他可以[pg dn][pg up]翻页。(4)tac:从最后一行开始显示,可以看出tac是cat的反向显示。当cat被过滤后,可以使用一下命令进
阅读更多2024-11-14
L1-9 统计一行文本的单词个数
本题目要求编写程序统计一行字符中单词的个数。所谓“单词”是指连续不含空格的字符串，各单词之间用空格分隔，空格数可以是多个。
阅读更多2024-11-14
【ACM出版】第四届信号处理与通信技术国际学术会议（SPCT 2024）
第四届信号处理与通信技术国际学术会议（SPCT 2024）将于2024年12月27-29日在深圳召开。
阅读更多2024-11-14
Docker compose部署portainer
整个工具的代码都在Gitee或者Github地址内。
阅读更多2024-11-14

Ecmascript（ES）标准