首页  思维导图  详情

ECMAScript攻略

2021-05-17 22:26:42   491  举报





AI智能生成

ECMAScriptECMAScriptECMAScriptECMAScript

ECMAScript6

JavaScript

前端开发

知识图谱

作者其他创作

大纲/内容

前置知识

学习步骤

谷歌搜索 ECMAScript

找feature ES6 ES7等字眼

JavaScript brief history and ECMAScript(ES6,ES7,ES8,ES9) features

ECMAScript 6: New Features: Overview and Comparison

ES6入门-阮一峰

https://github.com/lukehoban/es6features

babel-Learn ES2015

精读 TC39 与 ECMAScript 提案

kangax.github.io

can i use

如何读ECMA标准

读懂 ECMAScript 规格-阮一峰

ECMAScript5.1中文版

ECMA262标准文档

2020版

2021版

JSCIG-JavaScript中文兴趣组

🥶谷歌翻译

在ECMAScript规范中进行更改的过程由TC39完成，称为TC39过程。
从零阶段开始，此过程分为五个阶段。

🤷🏻 Stage 0: Strawperson

是什么

对规范的补充或更改的初步构想

💡 Stage 1: Proposal

是什么

问题并提出适当解决方案的正式建议

✍🏻 Stage 2: Draft

是什么

提案规范的初稿

📝 Stage 3: Candidate

是什么

几乎是最终稿，但还接受反馈并修改关键问题

包含内容

Stage 3提案

✅ Stage 4: Finished

是什么

提案已准备好包含在最新的规范中-并随下一个版本一起发布

包含内容

Finished Proposals-已完成的提案

根据发布年份就可以区分区ES不同版本

参考文档

The TC39 Process

ECMAScript - Introducing All Stages of the TC39 Process

推荐

论坛社区类

掘金

FCC

极客时间

个人博客类

张鑫旭老师的个人网站

廖雪峰老师的个人网站

书籍类

阮一峰老师的-ES入门

JavaScript高级程序第四版

Intl API

日期格式化

数字格式化

中文排序

ES2009-ES5

Strict mode

String

String.prototype.split()

String.prototype.trim()

Array

Array.isArray()

Array.prototype.indexOf()

Array.prototype.lastIndexOf()

Array.prototype.every()

Array.prototype.some()

Array.prototype.forEach()

Array.prototype.map()

Array.prototype.reduce()

Array.prototype.reduceRight()

Array.prototype.filter()

Object

Object.create()

Object.defineProperty()

Object.getPrototypeOf()

Object.keys()

Object.seal()

Object.freeze()

Object.preventExtensions()

Object.isSealed()

Object.isExtensible()

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyNames()

Object.defineProperties()

Object.isFrozen()

JSON

JSON.parse

JSON.stringify

Date

Date.now()

Date.prototype.toISOString()

Date.now().valueOf()

Function

Function.prototype.bind()

ES2015-ES6

数据类型的扩展

Object

对象的属性的简洁表示法

Object.assign

解构

String

模板字符串

处理4个字符的Unicode：

codePointAt

ES入门

String.fromCodePoint()

raw

repeat

includes

Array

解构

典型场景

交换两个数组元素的位置

扩展运算符

Array.from()

Array.of()

Function

箭头函数

类

Class

默认参数

剩余参数

扩展运算符

一般扩展运算符+剩余参数+默认参数结合使用

Number

Number.isNaN

Number.isInteger

Number.EPSILON

Math

Math.acosh

Math.hypot

Math.imul

Map

Set

Weakmap

Weakset

Symbol

块级作用域变量

let

const

遍历器

for..of

生成器

Generator 函数

使用function *和yield简化了迭代器的创建

装饰器

Decorators

提案原文

模块化

import

export

export default

Proxy

Promise

优化进制表示法

二进制: 0b 开头

八进制: 0o 开头

模块加载器

ES6入门

Reflect

尾调用

ES2016-ES7

Array.prototype.includes()

判断一个数组中某个元素是否存在，如果包含则返回 true，否则返回false

提出的动机/原因

1. 当我们想要知道数组中是否存在某个指定元素，`indexOf`无法准确表达我们的意思。

因为`indexOf`的意思是**查找数组中指定元素的第一个索引，如果不存在，则返回-1**。然后对`indexOf`的结果进行比较才能确定我们想要的答案

2. `indexOf`无法判断`NaN`，因此`[NaN].indexOf(NaN)=== -1`,返回 true

提案原文

求幂运算符(proposal-exponentiation-operator)

求幂运算符（**）返回将第一个操作数加到第二个操作数的幂的结果。它等效于Math.pow

提案原文

ES入门

ecma262原文

ES2017-ES8

Object

Object.values()

Object.values()返回一个数组，其元素是在对象上找到的可枚举属性值

Object.entries()

将一个对象上可枚举的键值对转换为一一对应的新数组

Object.getOwnPropertyDescriptors()

用来获取一个对象的所有自身属性的描述符

提出的动机/原因

解决 `Object.assign()`无法拷贝 `get` 属性和 `set` 属性的问题

提案原文

String

String.protype.padStart()

用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充

String.protype.padEnd()

从当前字符串的右侧开始填充

Function

async await 异步函数

async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise

提案原文

函数允许最后一个参数后面出现逗号

使用 Atomics 共享内存

proposal-regexp-legacy-features

提案原文

ES2018-ES9

对象的扩展运算符写法

提案原文

Promise.prototype.finally

在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。
这避免了同样的语句需要在then()和catch()中各写一次的情况

如果你想在 promise 执行完毕后无论其结果怎样都做一些处理或清理时，finally() 方法可能是有用的, 类似allsetlled

提案原文

ES入门

异步遍历器

for await of

ES入门

场景

按顺序完成异步操作

async generators

解除模板字面量限制

ES入门

正则表达式

正则之 s 修饰符

ES入门

提案原文

正则之具名组匹配

ES入门

提案原文

正则之后行断言

ES入门

提案原文

匹配符合 Unicode 某种属性的所有字符

ES入门

提案原文

ES2019-ES10

数据类型的扩展

Array

Array.prototype.flat(depth)

按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
将N维数组转换为N-1维数组，N为flat参数 N为平摊几次

Array.prototype.flatMap()

Array.prototype.sort()的排序算法更加稳定

ES入门

Object

Object.fromEntries

`Object.fromEntries` 是与 `Object.entries()` 相反的方法，用于将一个键值对数组转为对象

提出的动机/原因

前端使用 Map 结构存储数据，但是调用后端 API 时需要传递普通对象，这时候就可以使用`Object.fromEntries()`进行转换

提案原文

String

String.protype.trimStart()

trimStart() 方法从字符串的开头删除空格。trimLeft() 是此方法的别名

String.protype.trimEnd()

删除右侧空格

Symbol

Symbol.prototype.description

返回 Symbol 对象的可选描述的字符串

提案原文

Function

Function.prototype.toString()

返回函数代码本身，并且不会省略注释和空格

提案原文

try { } catch {}

提案原文

旧版本的`try / catch`语句中的`catch`子句需要一个变量。现在可以不加了

接受不转义的行分隔符、段落分隔符

提案原文

JSON-stringify-的改造

ES入门

提案原文

ES2020-ES11

数据类型的扩展

String.prototype.matchAll()

描述

场景:

- 获取某个子字符串在原字符串中的匹配项
- 以及匹配项的下标位置
- 正则分组在原字符串中的匹配项

注意: 正则中必须加上'/g' 否则会报错

提出的动机/原因

以前只能通过`regex.exec`循环取出

提案原文

BigInt

描述

新增的一种JS数据类型，描述超过2^53次方的数字

提出的动机/原因

以前超过2^53次方的数字无法正常计算

提案原文

ES入门-阮一峰

Promise.allSettled

描述

1. 只有等到所有实例都返回结果，不管是`fulfilled`还是`rejected`，实例才会结束

2. 有时候，我们不关心异步请求的结果，只关心所有的请求有没有结束即可使用

提出的动机/原因

场景: 遍历一个 promise 数组，然后想返回一个带有`status`字段的新数组(不管`status`代表 promise 的成功还是失败)

以前只能通过使用`Promise.all`只能再手写一个处理函数才行

提案原文

globalThis

描述

`globalThis` 提供了一个标准的方式来获取不同环境下的全局 `this` 对象（也就是全局对象自身）

提出的动机/原因

以前捕获不同环境(node,浏览器等)的this需要条件判断

提案原文

?? 空位合并操作符

test ?? "666"
等价于
test !== undefined && test !== null ? test : "666"

提出的动机/原因

弥补 `逻辑或操作符(||)` 将 **空字符串**,**0**,**NaN**判断为假值的不足

提案原文

?. 可选链操作符

读取深度嵌套在象中的属性值，而不必验证每个引用。当属性不存在时，表达式停止计算并返回 `undefined`

提出的动机/原因

简化深度嵌套对象中间属性的判断

提案原文

优化for in 底层逻辑，变成了有序遍历

提案原文-for-in mechanics

Dynamic import

`import(specifier)`函数，支持动态加载模块, `import()` 函数的参数 `specifier`，指定所要加载的模块的位置。

`import` 命令能够接受什么参数，`import()`函数就能接受什么参数，两者区别主要是后者为动态加载。

`import()`返回一个 Promise 对象

`import()`函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块

提出的动机/原因

在之前`import`命令是静态声明。它们接受字符串文字作为模块说明符

只能在模块的顶层，不能在代码块之中（比如，在`if`代码块之中，或在函数之中）

这样的设计，虽然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现

场景

按需加载: import()可以在需要的时候，再加载某个模块

条件加载：import()可以放在 if 代码块，根据不同的情况，加载不同的模块

动态的模块路径:import()允许模块路径动态生成

提案原文

import.meta

提案原文

ES2021-ES12

String.prototype.replaceAll()

描述