ECMAScript攻略
2021-05-17 22:26:42 491 举报AI智能生成
登录查看完整内容
ECMAScriptECMAScriptECMAScriptECMAScript
作者其他创作
大纲/内容
ECMAScript 6: New Features: Overview and Comparison
ES6入门-阮一峰
https://github.com/lukehoban/es6features
babel-Learn ES2015
精读 TC39 与 ECMAScript 提案
kangax.github.io
can i use
读懂 ECMAScript 规格-阮一峰
ECMAScript5.1中文版
2020版
2021版
ECMA262标准文档
JSCIG-JavaScript中文兴趣组
🥶谷歌翻译
如何读ECMA标准
找feature ES6 ES7等字眼
进行总结和提炼，区分出每个版本的特性
谷歌搜索 ECMAScript
对规范的补充或更改的初步构想
是什么
🤷🏻 Stage 0: Strawperson
问题并提出适当解决方案的正式建议
💡 Stage 1: Proposal
提案规范的初稿
✍🏻 Stage 2: Draft
几乎是最终稿，但还接受反馈并修改关键问题
Stage 3提案
包含内容
📝 Stage 3: Candidate
提案已准备好包含在最新的规范中-并随下一个版本一起发布
根据发布年份就可以区分区ES不同版本
Finished Proposals-已完成的提案
✅ Stage 4: Finished
The TC39 Process
ECMAScript - Introducing All Stages of the TC39 Process
参考文档
在ECMAScript规范中进行更改的过程由TC39完成，称为TC39过程。 从零阶段开始，此过程分为五个阶段。
学习步骤
前置知识
掘金
FCC
极客时间
论坛社区类
张鑫旭老师的个人网站
廖雪峰老师的个人网站
个人博客类
阮一峰老师的-ES入门
JavaScript高级程序第四版
书籍类
推荐
日期格式化
数字格式化
中文排序
Intl API
Strict mode
String.prototype.split()
String.prototype.trim()
String
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()
Array
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()
Object
JSON.parse
JSON.stringify
JSON
Date.now()
Date.prototype.toISOString()
Date.now().valueOf()
Date
Function.prototype.bind()
Function
ES2009-ES5
对象的属性的简洁表示法
Object.assign
解构
模板字符串
ES入门
codePointAt
处理4个字符的Unicode：
String.fromCodePoint()
raw
repeat
includes
交换两个数组元素的位置
典型场景
扩展运算符
Array.from()
Array.of()
箭头函数
Class
类
默认参数
剩余参数
一般 扩展运算符+剩余参数+默认参数 结合使用
Number.isNaN
Number.isInteger
Number.EPSILON
Math.acosh
Math.hypot
Math.imul
Math
Number
Map
Set
Weakmap
Weakset
Symbol
数据类型的扩展
let
const
块级作用域变量
for..of
遍历器
使用function *和yield简化了迭代器的创建
Generator 函数
生成器
提案原文
Decorators
装饰器
import
export
export default
模块化
Proxy
Promise
二进制: 0b 开头
八进制: 0o 开头
优化进制表示法
ES6入门
模块加载器
Reflect
尾调用
ES2015-ES6
判断一个数组中某个元素是否存在，如果包含则返回 true，否则返回false
提出的动机/原因
Array.prototype.includes()
求幂运算符（**）返回将第一个操作数加到第二个操作数的幂的结果。它等效于Math.pow
ecma262原文
求幂运算符(proposal-exponentiation-operator)
ES2016-ES7
Object.values()返回一个数组，其元素是在对象上找到的可枚举属性值
Object.values()
将一个对象上可枚举的键值对转换为 一一对应的新数组
Object.entries()
用来获取一个对象的所有自身属性的描述符
解决 `Object.assign()`无法拷贝 `get` 属性和 `set` 属性的问题
Object.getOwnPropertyDescriptors()
用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充
String.protype.padStart()
从当前字符串的右侧开始填充
String.protype.padEnd()
String
async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise
async await 异步函数
函数允许最后一个参数后面出现逗号
使用 Atomics 共享内存
proposal-regexp-legacy-features
ES2017-ES8
对象的扩展运算符写法
在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。这避免了同样的语句需要在then()和catch()中各写一次的情况
Promise.prototype.finally
按顺序完成异步操作
场景
for await of
async generators
异步遍历器
解除模板字面量限制
正则之 s 修饰符
正则之具名组匹配
正则之后行断言
匹配符合 Unicode 某种属性的所有字符
正则表达式
ES2018-ES9
按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回将N维数组转换为N-1维数组，N为flat参数 N为平摊几次
Array.prototype.flat(depth)
Array.prototype.flatMap()
Array.prototype.sort()的排序算法更加稳定
ECMA262文档
以前只能开发人员自己手写实现
`Object.fromEntries` 是与 `Object.entries()` 相反的方法，用于将一个键值对数组转为对象
前端使用 Map 结构存储数据，但是调用后端 API 时需要传递普通对象，这时候就可以使用`Object.fromEntries()`进行转换
Object.fromEntries
trimStart() 方法从字符串的开头删除空格。trimLeft() 是此方法的别名
String.protype.trimStart()
删除右侧空格
String.protype.trimEnd()
返回 Symbol 对象的可选描述的字符串
Symbol.prototype.description
返回函数代码本身，并且不会省略注释和空格
Function.prototype.toString()
旧版本的`try / catch`语句中的`catch`子句需要一个变量。 现在可以不加了
try { } catch {}
接受不转义的 行分隔符、段落分隔符
JSON-stringify-的改造
ES2019-ES10
场景:- 获取某个子字符串在原字符串中的匹配项- 以及匹配项的下标位置- 正则分组在原字符串中的匹配项注意: 正则中必须加上'/g' 否则会报错
描述
以前只能通过`regex.exec`循环取出
String.prototype.matchAll()
新增的一种JS数据类型，描述超过2^53次方的数字
以前超过2^53次方的数字无法正常计算
ES入门-阮一峰
BigInt
1. 只有等到所有实例都返回结果，不管是`fulfilled`还是`rejected`，实例才会结束
2. 有时候，我们不关心异步请求的结果，只关心所有的请求有没有结束即可使用
场景: 遍历一个 promise 数组，然后想返回一个带有`status`字段的新数组(不管`status`代表 promise 的成功还是失败)
以前只能通过使用`Promise.all`只能再手写一个处理函数才行
Promise.allSettled
`globalThis` 提供了一个标准的方式来获取不同环境下的全局 `this` 对象（也就是全局对象自身）
globalThis
test ?? \"666\" 等价于 test !== undefined && test !== null ? test : \"666\"
?? 空位合并操作符
读取深度嵌套在象中的属性值，而不必验证每个引用。当属性不存在时，表达式停止计算并返回 `undefined`
简化深度嵌套对象中间属性的判断
?. 可选链操作符
提案原文-for-in mechanics
优化for in 底层逻辑，变成了有序遍历
在之前`import`命令是静态声明。它们接受字符串文字作为模块说明符只能在模块的顶层，不能在代码块之中（比如，在`if`代码块之中，或在函数之中）这样的设计，虽然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现
按需加载: import()可以在需要的时候，再加载某个模块
条件加载：import()可以放在 if 代码块，根据不同的情况，加载不同的模块
动态的模块路径:import()允许模块路径动态生成
Dynamic import
import.meta
ES2020-ES11
替换掉一个字符串中的所有指定字符更方便了
String.prototype.replaceAll()
1.只要其中任意一个 promise 成功，就返回那个已经成功的 promise
2.如果所有的 promises 都失败/拒绝，就返回一个失败的 promise
Promise.any()
userDetails.key ||= \"1\"; 等价于 userDetails.key = userDetails.key || '1';
||= 逻辑或赋值
userDetails.key &&= \"1\"; 等价于 userDetails.key = userDetails.key && '1';
&&= 逻辑与赋值
opts.foo ??= \"bar\"; 等价于 opts.foo = opts.foo ?? \"bar\";
??= 逻辑空赋值
简化判断赋值语句
逻辑赋值运算符
此功能使开发人员可以通过在数字组之间创建视觉分隔来使其数字文字更具可读性。 大数字文字很难使人眼快速解析，尤其是当数字重复很长时。 这会损害获得正确值/数量级的能力。
数字分隔符
WeakRefs
ES2021-ES12
存值函数（setter）
取值函数（getter）
使用声明式的字段
字段
方法
static
getter
setter
使用 # 来表示私有方法和私有字段
提案原文-proposal-private-methods
提案原文-proposal-class-fields
Class Fields
限制立即执行异步函数表达式(Limitations on IIAFEs)
在按需加载的场景下，简化Promise链式调用的麻烦问题
顶层 await
获取子字符串及其分组在原字符串中的开始和结束位置
正则之'/d'修饰符
ES2022-ES13
ECMAScript
0 条评论
回复 删除
下一页
