Wsh's blog
2022-05-15
目录

祖传三件套历史指北

# 1. html5更新特性

HTML 5 ：2014年10月28日 HTML 5作为W3C推荐标准发布。

# 1.1 HTML5 vs HTML4: (opens new window)

  • 区别1：html5 不区分是否是严格模式还是传统模式，而html 声明时有严格、传统、框架模式。文档声明变得简单明了。
html5: <!DOCTYPE html>

html 4.01 Strict：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html 4.01 Transitional：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html 4.01 Framest：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

  • 区别2： html没有语义化标签，而html5 添加了许多语义标签，使代码结构清晰，提高代码可读性。 如：header、nav、footer、main、artical、section等。

  • 区别3： html无法在网页上动态的绘制图片，而 html5 新增了canvas画布，canvas绘制的图片放大后会失真，而SVG可绘制矢量图形。

# 1.2 H5 新增特性

  1. Canvas、SVG -- 用于绘画的元素，canvas绘制的图片会失真而SVG绘制的不会失真。
  2. video、audio -- 用于播放视频和音频的媒体。
  3. Drag 、Drop -- 用于拖放的 。
  4. Geolocation -- 用于获取地理位置。
  5. localStorage、sessionStorage -- 用于本地离线存储。
  6. webSQL、IndexDB -- 前端数据库操作，由于安全性极低，目前h5已放弃。
  7. web Worker -- 独立于其他脚本，不影响页面性能运行在后台的javascript。
  8. webSocket -- 单个TCP连接上进行全双工通讯的协议。
  9. 新的特殊内容元素 -- 如：article、footer、header、nav、section。
  10. 新的表单控件 -- 如：date、time、email、url、search。

# 1.3 H5 的优缺点

概括html5有大致一下几点优势：

  1. 提高可用性和可维护性，改进了用户体验。
  2. 新增语义化标签，有助于开发人员定义清晰的结构。
  3. 可以播放视频音频，增加多媒体元素。
  4. 利用h5动画，友好地替代了flash和silverlight。
  5. 爬虫抓取网站的时候，对于SEO很友好。
  6. H5被大量应用于移动应用和游戏开发。
  7. 可移植性好。

缺点： 现在大多数高版本浏览器都支持html5，但是少部分的低版本浏览器目前不支持html5，因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳。

# 2. css3更新特性

CSS3 是 CSS 规范的最新版本，在 CSS2.1 的基础上增加了很多强大的新功能，以帮助开发人员解决一些实际面临的问题，并且不再需要非语义标签、复杂的 JavaScript 脚本以及图片。例如，CSS3 支持圆角、多背景、透明度、阴影、动画、图表等功能。

# 2.1 CSS1 vs CSS2 vs CSS3

CSS1 和 CSS2.1 都是单一的规范
CSS1 主要定义了网页对象的基本样式，如字体、颜色、背景、边框等
CSS2 添加了高级概念，如浮动、定位、高级选择器（如子选择器、相邻选择器和通用选择器等）。
CSS3: 在CSS2.1基础上增加了很多功能，例如：浮动、定位、高级选择器（如子选择器、相邻选择器和通用选择器等）。

比较典型的例如： w3c中 css2.1 中提出BFC和IFC css3中提出：GFC（grid）和FFC(flex)

CSS最新消息 (opens new window)

2022-05-07更新工作草案：选择器级别 4。
2022-05-05更新了候选推荐草案：CSS 将更改级别 1。更新了候选推荐草案：CSS Text Level 3。更新了候选推荐草案：CSS 文本装饰 3 级。更新的工作草案：CSS 文本级别 4。
2022-05-04更新工作草案：CSS 文本装饰 4 级。
2022-04-28更新工作草案：CSS 颜色级别 4。更新的工作草案：CSS 颜色级别 5。
2022-04-05更新建议：媒体查询 3 级。

# 3. ECMAScript 6更新特性 (opens new window)

ES6

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

# 3.1 ECMAScript 和 JavaScript 的关系

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。

# 3.2 ES6 与 ECMAScript 2015 的关系

2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。

ES6 的第一个版本，就这样在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小（只新增了数组实例的includes方法和指数运算符），基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。

因此：ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。

提示

ES6更新的内容主要分为以下几点

  1. 表达式：声明、解构赋值
  2. 内置对象：字符串扩展、数值扩展、对象扩展、数组扩展、函数扩展、正则扩展、Symbol、Set、Map、Proxy、Reflect
  3. 语句与运算：Class、Module、Iterator
  4. 异步编程：Promise、Generator、Async

# 3.3 ES2015

  1. let/const声明

提示

  1. 不允许重复声明
  2. 未定义就使用会报错：const命令和let命令不存在变量提升
  3. 暂时性死区：在代码块内使用const命令和let命令声明变量之前，该变量都不可用
  1. 解构赋值

比如： 字符串解构：const [a, b, c, d, e] = "hello"

提示

  1. 匹配模式：只要等号两边的模式相同，左边的变量就会被赋予对应的值
  2. 解构赋值规则：只要等号右边的值不是对象或数组，就先将其转为对象
  3. 解构默认值生效条件：属性值严格等于undefined
  4. 解构遵循匹配模式
  5. 解构不成功时变量的值等于undefined
  6. undefined和null无法转为对象，因此无法进行解构
  1. 字符串扩展

提示

  1. Unicode表示法：大括号包含表示Unicode字符(\u{0xXX}或\u{0XXX})
  2. 字符串遍历：可通过for-of遍历字符串
  3. 字符串模板：可单行可多行可插入变量的增强版字符串
  4. 标签模板：函数参数的特殊调用
  5. String.raw()：返回把字符串所有变量替换且对斜杠进行转义的结果
  6. String.fromCodePoint()：返回码点对应字符
  7. codePointAt()：返回字符对应码点(String.fromCodePoint()的逆操作)
  8. normalize()：把字符的不同表示方法统一为同样形式，返回新字符串(Unicode正规化)
  9. repeat()：把字符串重复n次，返回新字符串
  10. matchAll()：返回正则表达式在字符串的所有匹配
  11. includes()：是否存在指定字符串
  12. startsWith()：是否存在字符串头部指定字符串
  13. endsWith()：是否存在字符串尾部指定字符串
  1. 数值扩展

提示

  1. 二进制表示法：0b或0B开头表示二进制(0bXX或0BXX)
  2. 八进制表示法：0o或0O开头表示二进制(0oXX或0OXX)
  3. Number.EPSILON：数值最小精度
  4. Number.MIN_SAFE_INTEGER：最小安全数值(-2^53)
  5. Number.MAX_SAFE_INTEGER：最大安全数值(2^53)
  6. Number.parseInt()：返回转换值的整数部分
  7. Number.parseFloat()：返回转换值的浮点数部分
  8. Number.isFinite()：是否为有限数值
  9. Number.isNaN()：是否为NaN
  10. Number.isInteger()：是否为整数
  11. Number.isSafeInteger()：是否在数值安全范围内 ...
  1. 对象扩展

提示

  1. 简洁表示法：直接写入变量和函数作为对象的属性和方法({ prop, method() {} })
  2. 属性名表达式：字面量定义对象时使用[]定义键([prop]，不能与上同时使用)
  3. 方法的name属性：返回方法函数名
  • 取值函数(getter)和存值函数(setter)：get/set 函数名(属性的描述对象在get和set上)
  • bind返回的函数：bound 函数名
  • Function构造函数返回的函数实例：anonymous
  1. 属性的可枚举性和遍历：描述对象的enumerable
  2. super关键字：指向当前对象的原型对象(只能用在对象的简写方法中method() {})
  3. Object.is()：对比两值是否相等
  4. Object.assign()：合并对象(浅拷贝)，返回原对象
  5. Object.getPrototypeOf()：返回对象的原型对象
  6. Object.setPrototypeOf()：设置对象的原型对象
  7. proto：返回或设置对象的原型对象
  1. 数组扩展

提示

  1. 扩展运算符(...)：转换数组为用逗号分隔的参数序列([...arr]，相当于rest/spread参数的逆运算)
  2. Array.from()：转换具有Iterator接口的数据结构为真正数组，返回新数组
  • 类数组对象：包含length的对象、Arguments对象、NodeList对象
  • 可遍历对象：String、Set结构、Map结构、Generator函数
  1. Array.of()：转换一组值为真正数组，返回新数组
  2. copyWithin()：把指定位置的成员复制到其他位置，返回原数组
  3. find()：返回第一个符合条件的成员
  4. findIndex()：返回第一个符合条件的成员索引值
  5. fill()：根据指定值填充整个数组，返回原数组
  6. keys()：返回以索引值为遍历器的对象
  7. values()：返回以属性值为遍历器的对象
  8. entries()：返回以索引值和属性值为遍历器的对象
  9. 数组空位：ES6明确将数组空位转为undefined(空位处理规不一，建议避免出现)
  1. 函数扩展

提示

  1. 参数默认值：为函数参数指定默认值
  2. rest/spread参数(...)：返回函数多余参数(作用：代替Arguments对象)
  3. 严格模式：在严格条件下运行JS
  • 应用：只要函数参数使用默认值、解构赋值、扩展运算符，那么函数内部就不能显式设定为严格模式
  1. name属性：返回函数的函数名
  • 将匿名函数赋值给变量：空字符串(ES5)、变量名(ES6)
  1. 箭头函数(=>)：函数简写
  • this指向固定化: 并非因为内部有绑定this的机制，而是根本没有自己的this，导致内部的this就是外层代码块的this。 因为没有this，因此不能用作构造函数
  1. 尾调用优化：只保留内层函数的调用帧
  • 尾调用: 某个函数的最后一步是调用另一个函数(function f(x) { return g(x); })
  • 尾递归: 函数尾调用自身,只要使用尾递归就不会发生栈溢出，相对节省内存,把所有用到的内部变量改写成函数的参数并使用参数默认值
  1. 正则扩展

提示

  1. 正则方法调用变更：字符串对象的match()、replace()、search()、split()内部调用转为调用RegExp实例对应的RegExp.prototype[Symbol.方法] ...
  1. Symbol

提示

  1. 定义：独一无二的值
  2. 声明：const set = Symbol(str)
  3. 入参：字符串(可选)
  4. 方法:
  • Symbol()：创建以参数作为描述的Symbol值(不登记在全局环境)
  • Symbol.for()：创建以参数作为描述的Symbol值，如存在此参数则返回原有的Symbol值(先搜索后创建，登记在全局环境)
  • Symbol.keyFor()：返回已登记的Symbol值的描述(只能返回Symbol.for()的key)
  • Object.getOwnPropertySymbols()：返回对象中所有用作属性名的Symbol值的数组
  1. 内置
  • Symbol.hasInstance：指向一个内部方法，当其他对象使用instanceof运算符判断是否为此对象的实例时会调用此方法
  • Symbol.isConcatSpreadable：指向一个布尔，定义对象用于Array.prototype.concat()时是否可展开
  • Symbol.species：指向一个构造函数，当实例对象使用自身构造函数时会调用指定的构造函数
  • Symbol.match：指向一个函数，当实例对象被String.prototype.match()调用时会重新定义match()的行为
  • Symbol.replace：指向一个函数，当实例对象被String.prototype.replace()调用时会重新定义replace()的行为
  • Symbol.search：指向一个函数，当实例对象被String.prototype.search()调用时会重新定义search()的行为
  • Symbol.split：指向一个函数，当实例对象被String.prototype.split()调用时会重新定义split()的行为
  • Symbol.iterator：指向一个默认遍历器方法，当实例对象执行for-of时会调用指定的默认遍历器
  • Symbol.toPrimitive：指向一个函数，当实例对象被转为原始类型的值时会返回此对象对应的原始类型值
  • Symbol.toStringTag：指向一个函数，当实例对象被Object.prototype.toString()调用时其返回值会出现在toString()返回的字符串之中表示对象的类型
  • Symbol.unscopables：指向一个对象，指定使用with时哪些属性会被with环境排除
  1. Set

提示

  1. 定义：类似于数组的数据结构，成员值都是唯一且没有重复的值
  2. 声明：const set = new Set(arr)
  3. 入参：具有Iterator接口的数据结构
  4. 属性
  • constructor：构造函数，返回Set
  • size：返回实例成员总数
  1. 方法
  • add()：添加值，返回实例
  • delete()：删除值，返回布尔
  • has()：检查值，返回布尔
  • clear()：清除所有成员
  • keys()：返回以属性值为遍历器的对象
  • values()：返回以属性值为遍历器的对象
  • entries()：返回以属性值和属性值为遍历器的对象
  • forEach()：使用回调函数遍历每个成员
  1. WeakSet

提示

  1. 定义：和Set结构类似，成员值只能是对象
  2. 声明：const set = new WeakSet(arr)
  3. 入参：具有Iterator接口的数据结构
  4. 属性
  • constructor：构造函数，返回WeakSet
  1. 方法
  • add()：添加值，返回实例
  • delete()：删除值，返回布尔
  • has()：检查值，返回布尔
  1. Map

提示

  1. 定义：类似于对象的数据结构，成员键是任何类型的值
  2. 声明：const set = new Map(arr)
  3. 入参：具有Iterator接口且每个成员都是一个双元素数组的数据结构
  4. 属性
  • constructor：构造函数，返回Map
  • size：返回实例成员总数
  1. 方法
  • get()：返回键值对
  • set()：添加键值对，返回实例
  • delete()：删除键值对，返回布尔
  • has()：检查键值对，返回布尔
  • clear()：清除所有成员
  • keys()：返回以键为遍历器的对象
  • values()：返回以值为遍历器的对象
  • entries()：返回以键和值为遍历器的对象
  • forEach()：使用回调函数遍历每个成员
  1. WeakMap

提示

  1. 定义：和Map结构类似，成员键只能是对象
  2. 声明：const set = new WeakMap(arr)
  3. 入参：具有Iterator接口且每个成员都是一个双元素数组的数据结构
  4. 属性
  • constructor：构造函数，返回WeakMap
  1. 方法
  • get()：返回键值对
  • set()：添加键值对，返回实例
  • delete()：删除键值对，返回布尔
  • has()：检查键值对，返回布尔
  1. Proxy

提示

  1. 定义：修改某些操作的默认行为
  2. 声明：const proxy = new Proxy(target, handler)
  3. 入参
  • target：拦截的目标对象
  • handler：定制拦截行为
  1. 方法
  • Proxy.revocable()：返回可取消的Proxy实例(返回{ proxy, revoke }，通过revoke()取消代理)
  1. 拦截方式
  • get()：拦截对象属性读取
  • set()：拦截对象属性设置，返回布尔
  • has()：拦截对象属性检查k in obj，返回布尔
  • deleteProperty()：拦截对象属性删除delete obj[k]，返回布尔
  • defineProperty()：拦截对象属性定义Object.defineProperty()、Object.defineProperties()，返回布尔
  • ownKeys()：拦截对象属性遍历for-in、Object.keys()、Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()，返回数组
  • getOwnPropertyDescriptor()：拦截对象属性描述读取Object.getOwnPropertyDescriptor()，返回对象
  • getPrototypeOf()：拦截对象原型读取instanceof、Object.getPrototypeOf()、Object.prototype.proto、Object.prototype. + isPrototypeOf()、Reflect.getPrototypeOf()，返回对象
  • setPrototypeOf()：拦截对象原型设置Object.setPrototypeOf()，返回布尔
  • isExtensible()：拦截对象是否可扩展读取Object.isExtensible()，返回布尔
  • preventExtensions()：拦截对象不可扩展设置Object.preventExtensions()，返回布尔
  • apply()：拦截Proxy实例作为函数调用proxy()、proxy.apply()、proxy.call()
  • construct()：拦截Proxy实例作为构造函数调用new proxy()
  1. Reflect

提示

  1. 定义：保持Object方法的默认行为
  2. 方法
  • get()：返回对象属性
  • set()：设置对象属性，返回布尔
  • has()：检查对象属性，返回布尔
  • deleteProperty()：删除对象属性，返回布尔
  • defineProperty()：定义对象属性，返回布尔
  • ownKeys()：遍历对象属性，返回数组(Object.getOwnPropertyNames()+Object.getOwnPropertySymbols())
  • getOwnPropertyDescriptor()：返回对象属性描述，返回对象
  • getPrototypeOf()：返回对象原型，返回对象
  • setPrototypeOf()：设置对象原型，返回布尔
  • isExtensible()：返回对象是否可扩展，返回布尔
  • preventExtensions()：设置对象不可扩展，返回布尔
  • apply()：绑定this后执行指定函数
  • construct()：调用构造函数创建实例

  1. Proxy方法和Reflect方法一一对应

  2. Proxy和Reflect联合使用，前者负责拦截赋值操作，后者负责完成赋值操作

  3. 数据绑定：观察者模式

const observerQueue = new Set();
const observe = fn => observerQueue.add(fn);
const observable = obj => new Proxy(obj, {
    set(tgt, key, val, receiver) {
        const result = Reflect.set(tgt, key, val, receiver);
        observerQueue.forEach(v => v());
        return result;
    }
});

const person = observable({ age: 25, name: "Yajun" });
const print = () => console.log(`${person.name} is ${person.age} years old`);
observe(print);
person.name = "Joway";
  1. Class

提示

  1. 定义：对一类具有共同特征的事物的抽象(构造函数语法糖)
  2. 原理：类本身指向构造函数，所有方法定义在prototype上，可看作构造函数的另一种写法(Class === Class.prototype.constructor)
  3. 方法和关键字
  • constructor()：构造函数，new命令生成实例时自动调用
  • extends：继承父类
  • super：新建父类的this
  • static：定义静态属性方法
  • get：取值函数，拦截属性的取值行为
  • set：存值函数，拦截属性的存值行为
  1. 属性
  • proto：构造函数的继承(总是指向父类)
  • proto.proto：子类的原型的原型，即父类的原型(总是指向父类的__proto__)
  • prototype.proto：属性方法的继承(总是指向父类的prototype)
  1. Module

提示

  1. 命令
  • export：规定模块对外接口
    • 默认导出：export default Person(导入时可指定模块任意名称，无需知晓内部真实名称)
    • 单独导出：export const name = "Bruce"
    • 按需导出：export { age, name, sex }(推荐)
    • 改名导出：export { name as newName }
  • import：导入模块内部功能
    • 默认导入：import Person from "person"
    • 整体导入：import * as Person from "person"
    • 按需导入：import { age, name, sex } from "person"
    • 改名导入：import { name as newName } from "person"
    • 自执导入：import "person"
    • 复合导入：import Person, { name } from "person"
  • 复合模式：export命令和import命令结合在一起写成一行，变量实质没有被导入当前模块，相当于对外转发接口，导致当前模块无法直接使用其导入变量
    • 默认导入导出：export { default } from "person"
    • 整体导入导出：export * from "person"
    • 按需导入导出：export { age, name, sex } from "person"
    • 改名导入导出：export { name as newName } from "person"
    • 具名改默认导入导出：export { name as default } from "person"
    • 默认改具名导入导出：export { default as name } from "person"
  1. 继承：默认导出和改名导出结合使用可使模块具备继承性
  2. 设计思想：尽量地静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量
  3. 严格模式：ES6模块自动采用严格模式(不管模块头部是否添加use strict)

CommonJS：用于服务器(动态化依赖) AMD：用于浏览器(动态化依赖) CMD：用于浏览器(动态化依赖) UMD：用于浏览器和服务器(动态化依赖) ESM：用于浏览器和服务器(静态化依赖)

  1. 加载方式
  • 运行时加载
    • 定义：整体加载模块生成一个对象，再从对象上获取需要的属性和方法进行加载(全部加载)
    • 影响：只有运行时才能得到这个对象，导致无法在编译时做静态优化
  • 编译时加载
    • 定义：直接从模块中获取需要的属性和方法进行加载(按需加载)
    • 影响：在编译时就完成模块加载，效率比其他方案高，但无法引用模块本身(本身不是对象)，可拓展JS高级语法(宏和类型校验)
  1. Iterator

提示

  1. 定义：为各种不同的数据结构提供统一的访问机制
  2. 原理：创建一个指针指向首个成员，按照次序使用next()指向下一个成员，直接到结束位置(数据结构只要部署Iterator接口就可完成遍历操作)
  3. 作用
  • 为各种数据结构提供一个统一的简便的访问接口
  • 使得数据结构成员能够按某种次序排列
  • ES6创造了新的遍历命令for-of，Iterator接口主要供for-of消费
  1. 形式：for-of(自动去寻找Iterator接口)
  2. 数据结构
  • 集合：Array、Object、Set、Map
  • 原生具备接口的数据结构：String、Array、Set、Map、TypedArray、Arguments、NodeList
  1. 部署：默认部署在Symbol.iterator(具备此属性被认为可遍历的iterable) 遍历器对象
  • next()：下一步操作，返回{ done, value }(必须部署)
  • return()：for-of提前退出调用，返回{ done: true }
  • throw()：不使用，配合Generator函数使用
  1. Promise

提示

new Promise then() catch() Promise.all() Promise.race() Promise.resolve() Promise.reject()

  1. Generator ::: 命令 yidle命令 yidle命令 next() return() throw() :::

# 3.4 ES2016

  1. 数值扩展 指数运算符(**)：数值求幂(相当于Math.pow())

  2. 数组扩展 includes()：是否存在指定成员

# 3.5 ES2017

  1. 声明
  • 共享内存和原子操作：由全局对象SharedArrayBuffer和Atomics实现，将数据存储在一块共享内存空间中，这些数据可在JS主线程和web-worker线程之间共享
  1. 字符串扩展:
  • padStart()：把指定字符串填充到字符串头部，返回新字符串
  • padEnd()：把指定字符串填充到字符串尾部，返回新字符串
  1. 对象扩展
  • Object.getOwnPropertyDescriptors()：返回对象所有自身属性(非继承属性)的描述对象
  • Object.values()：返回以值组成的数组
  • Object.entries()：返回以键和值组成的数组
  1. 函数扩展
  • 函数参数尾逗号：允许函数最后一个参数有尾逗号
  1. Async:

提示

  1. 定义：使异步函数以同步函数的形式书写(Generator函数语法糖)
  2. 原理：将Generator函数和自动执行器spawn包装在一个函数里
  3. 形式：将Generator函数的*替换成async，将yield替换成await
  4. 声明
  • 具名函数：async function Func() {}
  • 函数表达式：const func = async function() {}
  • 箭头函数：const func = async() => {}
  • 对象方法：const obj = { async func() {} }
  • 类方法：class Cla { async Func() {} }
  1. await命令：等待当前Promise对象状态变更完毕 正常情况：后面是Promise对象则返回其结果，否则返回对应的值 后随Thenable对象：将其等同于Promise对象返回其结果

错误处理：将await命令Promise对象放到try-catch中(可放多个)

# 3.6 ES2018

  1. 字符串扩展: 放松对标签模板里字符串转义的限制
  2. 对象扩展: 扩展运算符(...)：转换对象为用逗号分隔的参数序列({ ...obj }，相当于rest/spread参数的逆运算)
  3. Promise: finally()：指定不管最后状态如何都会执行的回调函数
  4. Async: 异步迭代器(for-await-of)：循环等待每个Promise对象变为resolved状态才进入下一步

# 3.7 ES2019

  1. 字符串扩展:
  • 直接输入U+2028和U+2029：字符串可直接输入行分隔符和段分隔符
  • JSON.stringify()改造：可返回不符合UTF-8标准的字符串
  • trimStart()：消除字符串头部空格，返回新字符串
  • trimEnd()：消除字符串尾部空格，返回新字符串
  1. 对象扩展
  • Object.fromEntries()：返回以键和值组成的对象(Object.entries()的逆操作)
  1. 数组扩展
  • sort()稳定性：排序关键字相同的项目其排序前后的顺序不变，默认为稳定
  • flat()：扁平化数组，返回新数组
  • flatMap()：映射且扁平化数组，返回新数组(只能展开一层数组)
  1. 函数扩展：
  • toString()改造：返回函数原始代码(与编码一致)
  • catch()参数可省略：catch()中的参数可省略
  1. Symbol
  • description：返回Symbol值的描述

# 3.8 ES2020

  1. 声明
  • globalThis：作为顶层对象，指向全局环境下的this
  • Browser：顶层对象是window
  • Node：顶层对象是global
  • WebWorker：顶层对象是self
  • 以上三者：通用顶层对象是globalThis
  1. 数值扩展： BigInt（任何位数的整数(新增的数据类型，使用n结尾)）
  2. 对象扩展：
  • 链判断操作符(?.)：是否存在对象属性(不存在返回undefined且不再往下执行)
    • 对象属性：obj?.prop、obj?.[expr]
    • 函数调用：func?.(...args)
  • 空判断操作符(??)：是否值为undefined或null，是则使用默认值
  1. 正则扩展
  • matchAll()：返回所有匹配的遍历器
  1. Module
  • import()：动态导入(返回Promise)
    • 背景：import命令被JS引擎静态分析，先于模块内的其他语句执行，无法取代require()的动态加载功能，提案建议引入import()来代替require()
    • 位置：可在任何地方使用
    • 区别：require()是同步加载，import()是异步加载
    • 场景：按需加载、条件加载、模块路径动态化
  1. Iterator：for-in遍历顺序：不同的引擎已就如何迭代属性达成一致，从而使行为标准化
  2. Promise:
  • Promise.allSettled()：将多个实例包装成一个新实例，返回全部实例状态变更后的状态数组(齐变更再返回)
    • 入参：具有Iterator接口的数据结构
    • 成功：成员包含status和value，status为fulfilled，value为返回值
    • 失败：成员包含status和reason，status为rejected，value为错误原因

# 3.9 ES提案

  1. 声明:
  • do表达式：封装块级作用域的操作，返回内部最后执行表达式的值(do{})
  • throw表达式：直接使用throw new Error()，无需()或{}包括
  • !#命令：指定脚本执行器(写在文件首行)
  1. 数值扩展
  • 数值分隔符(_)：使用_作为千分位分隔符(增加数值的可读性)
  • Math.signbit()：返回数值符号是否设置
  1. 函数扩展
  • 函数部分执行：复用函数功能(?表示单个参数占位符，...表示多个参数占位符)
  • 管道操作符(|>)：把左边表达式的值传入右边的函数进行求值(f(x) => x |> f)
  • 绑定运算符(:😃：函数绑定(左边是对象右边是函数，取代bind、apply、call调用)
    • bind：bar.bind(foo) => foo::bar
    • apply：bar.apply(foo, arguments) => foo::bar(...arguments)
  1. Realm
  • 定义：提供沙箱功能，允许隔离代码，防止被隔离的代码拿到全局对象
  • 声明：new Realm().global
  1. Class
  • 静态属性：使用static定义属性，该属性不会被实例继承，只能通过类来调用
  • 私有属性：使用#定义属性，该属性只能在类内部访问
  • 私有方法：使用#定义方法，该方法只能在类内部访问
  • 装饰器：使用@注释或修改类和类方法
  1. Module
  • import.meta：返回脚本元信息
  1. Promise
  • Promise.any()：将多个实例包装成一个新实例，返回全部实例状态变更后的结果数组(齐变更再返回)
    • 入参：具有Iterator接口的数据结构
    • 成功：其中一个实例状态变成fulfilled，最终状态就会变成fulfilled
    • 失败：只有全部实例状态变成rejected，最终状态才会变成rejected
  • Promise.try()：不想区分是否同步异步函数，包装函数为实例，使用then()指定下一步流程，使用catch()捕获错误
  1. Async
  • 顶层Await：允许在模块的顶层独立使用await命令(借用await解决模块异步加载的问题)

参考 (opens new window)

flutter

←

最近更新
01
组件通信方式
01-07
02
UIAbility
01-07
03
ATKTS
01-06
更多文章>
Theme by Vdoing | Copyright © 2022-2025 Wsh | MIT License