乐趣区

关于前端:盘点-ES12-中的一些新特性

jiezi

作者：KUMAR HARSH
译者：前端小智
起源：blog

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

明天次要介绍一下 ECMAScript 2021（ES12）的一部分的 JS 性能。

  1. 逻辑赋值操作符
  2. 数字分隔符(1_000)
  3. Promise.any 与 AggregateError
  4. String.prototype.replaceAll
  5. WeakRefs 与 FinalizationRegistry 对象

逻辑赋值操作符

逻辑赋值操作符将逻辑操作 (&&、|| 或??)与赋值表达式组合在一起。

x ||= y;
x || (x = y);

x &&= y;
x && (x = y);


x ??= y;
x ?? (x = y);

带有 && 的逻辑赋值操作符

let x = 1;
let y = 2;
x &&= y;
console.log(x); // 2

x &&= y 等价于 x && (x = y)。

或者等价于

if(x) {x = y}

因为 x 是一个真值，所以它被赋值为y，即2。

带有 || 的逻辑赋值操作符

let x = 1;
let y = 2;
x ||= y;
console.log(x); // 1

x ||= y 等价于 x || (x = y)。

这意味着赋值操作只在 x 为虚值时才会产生。在咱们的代码中，x蕴含 1，这是一个真值，因而，赋值不会产生。这就是咱们的代码在控制台中打印1 的起因。

简略地说

const updateID = user => {

  // 咱们能够这样做
  if (!user.id) user.id = 1

  // 或者这样
  user.id = user.id || 1

  // 或者这样
  user.id ||= 1
}

带有 ?? 的逻辑赋值操作符

?? 在 JS 中专门查看一个值是否为 null 或undefined。

let a;
let b = a ?? 5;
console.log(b); // 5

在第二行，let b = a ?? 5，如果 a 的值为 null 或undefined，?? 求值并赋值给b。

当初思考?? 和==。

let x;
let y = 2;
x ??= y;
console.log(x); // 2

x ??= y 等价于 x = x ?? (x=y)

数字分隔符

它容许咱们在数字之间增加下划线 (_) 字符，使数字更具可读性。

例如

const num = 100000000

被 0 的数量所蛊惑

分隔符解决这个问题：

const num = 100_000_000

分隔符能够用于数字的整数局部和小数局部。

const num = 1_000_000.123_456

分隔符不仅能够用在整数和浮点数中，也能够用在二进制、十六进制、八进制字面量中。

分隔符也实用于 BigInt 数字。

const trillion = 1000_000_000_000n;
console.log(trillion.toString()); // "1000000000000"

分隔符只是为了可读性。所以，它能够放在数字内的任何中央。

const amount = 178_00; // 00 after _ for cents.

Promise.any 与 AggregateError

Promise.any()返回第一个实现的 promise 的值。如果所有传递给 Promise.any() 作为参数 (作为数组) 的 Promise 都被回绝，则抛出一个 ”AggregateError“ 异样。

AggregateError` 是一个新的 Error 子类，它对单个谬误进行分组。每个 AggregateError 实例都蕴含一个对异样数组的援用。

思考上面例子：

上面咱们有 3 个 promise，它们是随机的。

const p1 = new Promise((resolve, reject) => {setTimeout(() => resolve("A"), Math.floor(Math.random() * 1000));
});
const p2 = new Promise((resolve, reject) => {setTimeout(() => resolve("B"), Math.floor(Math.random() * 1000));
});
const p3 = new Promise((resolve, reject) => {setTimeout(() => resolve("C"), Math.floor(Math.random() * 1000));
});

在 p1, p2 和p3中，最先的实现的的由 Promise.any() 执行。

(async function() {const result = await Promise.any([p1, p2, p3]);
  console.log(result); // 打印 "A", "B" 或者 "C"
})();

如果所有的 promise 都失败了? 在这种状况下，Promise.any()抛出 AggregateError 异样。
咱们须要捕捉它：

const p = new Promise((resolve, reject) => reject());

try {(async function() {const result = await Promise.any([p]);
    console.log(result);
  })();} catch(error) {console.log(error.errors);

为了演示的目标，在 Promise.any() 中咱们只能它一个 promise。而这个 promise 是失败的。上述代码在控制台中记录了以下谬误。

String.prototype.replaceAll 办法

String.prototype.replaceAll()容许咱们用一个不同的值替换字符串中的所有子串实例，而不须要应用全局正则表达式。

目前，JavaScript 字符串有一个 replace() 办法。它能够用来用另一个字符串替换一个字符串。

const str = "Backbencher sits at the Back";
const newStr = str.replace("Back", "Front");
console.log(newStr); // "Frontbencher sits at the Back"

如果输出模式是一个字符串，replace()办法只替换第一次呈现的内容。这就是为什么在代码中，”Back“ 的第二次呈现没有被替换。

只有将模式作为正则表达式提供时，能力进行齐全替换。

const str = "Backbencher sits at the Back";
const newStr = str.replace(/Back/g, "Front");
console.log(newStr); // "Frontbencher sits at the Front"

咱们来看另一个例子

const strWithPlus = '++'
const strWithComma = strWithPlus.replace(/+/g, ',')
// , ,

这种办法须要应用正则表达式。然而，简单的正则表达式往往是谬误的起源。(没有人喜爱 RegEx 😬)

还有另一种办法是应用 String.prototype.split() 和Array.prototype.join()办法

const strWithPlus = '++'
const strWithComma = strWithPlus.split('+').join(',')
// , ,

这种办法防止应用正则表达式，然而必须将字符串拆分为独自的局部(单词)，将其转换为一个数组，而后将数组元素连贯为一个新字符串。

string.prototype.replaceAll()解决了这些问题，并为全局替换子串提供了简略而不便的形式：

const strWithPlus = '++'
const strWithComma = strWithPlus.replaceAll('+', ',')
// , ,

留神：如果应用全局正则表达式作为查找值，那么 replace 和replaceAll的行为是一样的。

WeakRefs 与 FinalizationRegistry 对象

WeakRef 是弱援用的意思。弱援用的主要用途是实现大型对象的 缓存或映射。在这种状况下，咱们不心愿长期保留大量的内存来保留这种很少应用的缓存或映射。咱们能够让内存很快被垃圾回收，当前如果咱们再次须要它，咱们能够生成一个新的缓存。

JS 是会主动垃圾收集。如果一个变量不再可达，JS 垃圾收集器将主动删除它。你能够在 MDN 中浏览更多对于 JS 垃圾收集的内容。

WeaseRefs（弱援用）提供了两个新性能：

  • 应用 WeakRef 类创立对对象的弱援用
  • 应用 FinalizationRegistry 类在垃圾收集之后运行自定义收集器

简而言之，WeakRef容许咱们创建对象的弱援用，这些对象是另一个对象的属性值，而 finalizers 能够用来，除其余外，移除对被垃圾收集器 “ 清理 ” 过的对象的援用。

在创立应用内置缓存的记忆化（memoization）函数时，如果缓存中存在传递给函数的参数的计算值，这种技术可能很有用（前提是对象被用作缓存对象的属性值，以及它们随后被删除的危险），以避免反复执行函数。

在构建内联缓存时

  • 如果没有内存透露的危险，那么应用 Map
  • 当应用能够随后删除对象的键时，应用 WeakMap
  • 当应用能够随后删除的值对象时，请将 Map 与WeakRef联合应用

提案中最初一个例子：

function makeWeakCached(f) {const cache = new Map()
  return key => {const ref = cache.get(key)
    if (ref) {
      //     
      const cached = ref.deref()
      if (cached !== undefined) return cached;
    }

    const fresh = f(key)
    //    ( )
    cache.set(key, new WeakRef(fresh))
    return fresh
  };
}

const getImageCached = makeWeakCached(getImage);
  • WeakRef构造函数承受一个参数，该参数必须是一个对象，并返回对该对象的弱援用
  • WeakRef 实例的 deref 办法返回两个值中的一个。

在内置缓存的状况下，finalizer被设计为在一个值对象被垃圾收集器销毁后实现清理过程，或者更简略地说，删除对这样一个对象的弱援用。

function makeWeakCached(f) {const cache = new Map()
  //    -   
  const cleanup = new FinalizationRegistry(key => {const ref = cache.get(key)
    if (ref && !ref.deref()) cache.delete(key)
  })

  return key => {const ref = cache.get(key)
    if (ref) {const cached = ref.deref()
      if (cached !== undefined) return cached
    }

    const fresh = f(key)
    cache.set(key, new WeakRef(fresh))
    //      ( )
    cleanup.register(fresh, key)
    return fresh
  }
}

const getImageCached = makeWeakCached(getImage);

~ 完，我是小智，继续咳嗽中，我要去劳动了，记录点赞关注，发财致富哦。

原文：https://dev.to/cenacr007_hars…

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。

退出移动版