成都GDG分享会总结（前端部分）

虽说是GDG分享会，其实前端部分是由成都FCC负责人水歌分享的，感谢各位大佬们的分享！下面献出一张现场照片（反正你们也不知道哪个是我23333）

前言

本次分享水歌主要讲了一下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: 'https://juejin.im/timeline',
});
复制代码

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来优化垃圾回收。

结语

今天水歌讲的大致就这些（删减了一些），就分享给大家！再次感谢各位大佬今天的分享，Respect！

Chrome Beta版本链接：Chrome-Beta；
同时大家可以从这里查看75版本的Chrome Dev Tool新特性！

转载于:https://juejin.im/post/5ce9289fe51d455a694f9490