前言

本次分享水歌主要讲了一下Chrome要即将更新的75版本的内容,以及已经提出,但是还未通过或者75版本不会立即更新的功能,同时里面也有些已经推出但是很少用的功能。我只是个分享会的搬运工~

下面进入正题!

正题1.Portal标签

Portal是一个Google即将推出的新的HTML标签。在以往,我们如果要嵌套一个网页就会用iframe操作,但是当iframe展示页面之后url并没改变,仍然是父级的url。Portal的出现就可以解决这个问题,当点击了Portal标签跳转的页面之后,url栏所显示的就是Portal中展示的页面的url。想详细了解的小伙伴可以看一下这篇文章:Google launches Portals, a new web page navigation system for Chrome。

2.分享API

Google将提供自己的分享链接的API,无需再使用其他插件。

if(navigator.canShare())
  navigator.share({
  title: document.title,
  text: '掘金',
  url: '',
});
复制代码

canShare是Navigator的一个interface,返回布尔类型值,如果返回值为true那么就可以执行share函数。share函数中就是一个Objet,内有text、url和title三个字段,返回结果为一个Promise对象。

3.形状检测API

Google也将会推出各种形状检测API比如TextDetector、FaceDetector等。其实去年FaceDetector已经在Android推出了只不,但是接下来也将会在浏览器推出相应接口。

4.原生类的增强

对整数类型进行了增强,比如多了BigInt来处理长整型溢出问题,数字后面加上n来表示短整型,同时还有推出了可以人为分割数字的功能:

// 解决了数位数的问题
const integer = 1_0000_0000;
console.log(integer); // 100000000
复制代码

5.全局对象

事实上,在不同的 JavaScript 环境中拿到全局对象是需要不同的语句的。在 Web 中,可以通过 window、self 或者 frames 取到全局对象,但是在 Web Workers 中只有 self 可以。在 Node.js 中,它们都无法获取,必须使用 global。在松散模式下,可以在函数中返回 this 来获取全局对象,但是在严格模式下 this 会返回 undefined 。

globalThis 提供了一个标准的方式去获取不同环境下的全局对象。它不像 window 或者 self 这些属性,而是确保可以在有无窗口的环境下都可以正常工作。所以你可以安心的使用 globalThis ,不必担心它的运行环境。使用如下:

if (typeof globalThis.setTimeout !== 'function') {
  // no setTimeout in this environment!
}
复制代码
6.国际化API

国际化API主要是处理数据的格式化,比如:时间、金额、物理单位等。比如:

const name = ['Thoughtful valiant.', 'niuniu', 'George'];
const and = new Intl.ListFormat('zh-CH', {type: 'conjunction'}),
      or = new Intl.ListFormat('zh-CN', {type: 'disjunction'});
console.log(`U can call me ${and.format(name)}`); 
// U can call me Thoughtful valiant.、niuniu和George
console.log(`U can call me ${or.format(name)}`); 
// U can call me Thoughtful valiant.、niuniu或George
复制代码
7. Promise新方法

我们常用的Promise.all()和Promise.race()其实并不全面,一个是全部resolve返回结果,而另一个是不管resolve还是reject有结束的立马返回结果。

为了弥补不足,又添加了Promise.allSettled()和Promise.any(),前者是所有的结束之后返回结果(不论resolve还是reject),后者是只返回第一个resolve的结果。

同时,我们现在在使用await时必须嵌套在async内,在更新之后,我们可以直接使用await一个Promise对象,不用再像下面一样再嵌套一个IIFE:

(async function() {
  await ...
}
)()
复制代码
8. 增加了弱引用类型

在现有的WeakMap和WeakSet等弱引用类型的基础上,又增加了WeakRef和FinalizationGroup来优化垃圾回收。