Erleben Sie als Erster die neuen Funktionen von JavaScript ES12

In der Kolumne „JavaScript“ erfahren Sie, wie Sie die neuen Funktionen von ES12 erleben können.

Jedes Jahr wird JavaScript aktualisiert, um neue Funktionen und neue Standards hinzuzufügen. ES2020 wurde dieses Jahr veröffentlicht, und ES2020 (ES12) wird voraussichtlich auch nächstes Jahr, Mitte 2021, veröffentlicht. Neue Funktionen durchlaufen jedes Jahr vier Phasen, und die vierte Phase ist die letzte Phase. In diesem Artikel werden die relevanten neuen Funktionen in Vorschlag 4 vorgestellt, was auch bedeutet, dass diese neuen Funktionen in großem Umfang in der nächsten Version erscheinen werden

Funktionsvorschau:

String.prototype.replaceAll Neues replaceAll

Promise.any

• WeakRefs
• Logische Operatoren und Zuweisungsausdrücke
• Zahlentrennzeichen
• replaceAll
• Siehe

replace Alle

Dieses Wort lässt sich leicht assoziieren mit

ersetzen

. In JavaScript kann die Ersetzungsmethode nur das erste übereinstimmende Instanzzeichen in der Zeichenfolge ersetzen, aber keine globale Mehrfachübereinstimmungsersetzung durchführen. Die einzige Möglichkeit besteht darin, relevante Regelabgleiche und -ersetzungen durch reguläre Ausdrücke und replaceAll durchzuführen. Sie gibt eine Marke zurück Neue Zeichenfolge, und alle Zeichen, die den übereinstimmenden Regeln entsprechen, werden ersetzt. Die Ersetzungsregeln können Zeichenfolgen oder reguläre Ausdrücke sein.

let string = 'I like 前端,I like 前端公虾米'//使用replacelet replaceStr = string.replace('like','love')console.log(replaceStr)  // 'I love 前端,I like 前端公虾米'//replace使用正则匹配所有console.log(string.replace(/like/g,'love')) // 'I love 前端,I love 前端公虾米'//使用replaceAlllet replaceAllStr = string.replaceAll('like','love')console.log(replaceAllStr) // 'I love 前端,I love 前端公虾米'复制代码

Es ist zu beachten, dass bei Verwendung regulärer Ausdrücke durch replaceAll bei einer nicht globalen Übereinstimmung (/g) replaceAll() eine Ausnahme auslöst

let string = 'I like 前端,I like 前端公虾米'console.log(string.replaceAll(/like/,'love')) //TypeError复制代码

Promise.any

Wenn es in der Promise-Liste ist Wenn ein

Versprechen erfolgreich gelöst wird, gibt

den Ergebnisstatus der ersten

Lösung zurück Wenn

allpromises reject sind, wird eine Ausnahme ausgelöst, um anzuzeigen, dass alle Anfragen fehlgeschlagen sind Stellen Sie sicher, dass Sie darauf achten. Unterscheiden, Promise.race Sobald ein Versprechen die Auflösung oder Ablehnung auslöst, wird das Statusergebnis direkt zurückgegeben, unabhängig von Erfolg oder Misserfolg (Eine schwache Referenz des Objekts bedeutet, dass das Recyclingverhalten des GC nicht verhindert wird, wenn das Objekt vom GC recycelt werden soll.)Wenn wir eine Variable über (const, let, var) erstellen, wird der Garbage Collector GC niemals löschen es aus dem Speicher Die Variable ist solange zugänglich, wie ihre Referenz bestehen bleibt. WeakRef-Objekte enthalten schwache Verweise auf Objekte. Ein schwacher Verweis auf ein Objekt hindert den GC nicht daran, einen Verweis auf das Objekt wiederherzustellen; der GC kann es jederzeit löschen. WeakRefs sind in vielen Situationen nützlich, beispielsweise bei der Verwendung von Map-Objekten zur Implementierung von Schlüssel-Wert-Caches, die viel Speicher benötigen. In diesem Fall ist es am bequemsten, den von den Schlüssel-Wert-Paaren belegten Speicher sofort freizugeben möglich.

Derzeit können Sie

WeakRefs

bis WeakMap() oder WeakSet

() verwenden. Ich möchte beispielsweise verfolgen, wie oft ein bestimmtes Objekt eine bestimmte Methode aufruft. es wird entsprechend sein. Tipp

Promise.any([  new Promise((resolve, reject) => setTimeout(reject, 500, '哎呀，我被拒绝了')),  new Promise((resolve, reject) => setTimeout(resolve, 1000, '哎呀，她接受我了')),  new Promise((resolve, reject) => setTimeout(resolve, 2000, '哎呀，她也接受我了')),
])
.then(value => console.log(`输出结果: ${value}`))
.catch (err => console.log(err))//输出//输出结果:哎呀，她接受我了复制代码

Obwohl unsere Funktion wie oben implementiert werden kann, kommt es zu einem Speicherüberlauf, da jedes an die doSomething-Funktion übergebene Objekt dauerhaft in der Karte gespeichert wird und nicht von GC recycelt wird, sodass wir

WeakMap verwenden können

Promise.any([  Promise.reject('Error 1'),  Promise.reject('Error 2'),  Promise.reject('Error 3')
])
.then(value => console.log(`请求结果: ${value}`))
.catch (err => console.log(err))//输出AggregateError: All promises were rejected复制代码

Da es sich um schwache Referenzen handelt, sind die Schlüssel-Wert-Paare von WeakMap und WeakSet

nicht aufzählbar

WeakSet ähnelt WeakMap, aber jedes Objekt in WeakSet kann nur einmal vorkommen und alle Objekte in WeakSet sind eindeutig Das

let map = new Map()function doSomething(obj){
	...
}function useObject(obj){
	doSomething(obj)  
  let called = map.get(obj) || 0
  called ++ 
  
  if(called>1000){     console.log('当前调用次数已经超过1000次了，over')
  }
  
  map.set(obj, called)
}复制代码

WeakSet weist im Vergleich zu Set

WeakSet die folgenden zwei Unterschiede auf Referenz: Wenn keine anderen Referenzen auf das WeakSet-Objekt vorhanden sind, wird es von GC recycelt

Schließlich verfügt die

WeakRef-Instanz über eine Methode deref

, die das ursprünglich referenzierte Objekt zurückgibt, oder

undefiniert

let wmap = new WeakMap()function doSomething(obj){
	...
}function useObject(obj){
	doSomething(obj)  
  let called = wmap.get(obj) || 0
  
  called ++  
  if(called>1000){     console.log('当前调用次数已经超过1000次了，over')
  }
  
  wmap.set(obj, called)
}复制代码

wenn Das ursprüngliche Objekt wird recycelt. Dies ist möglicherweise keine gute Idee für das Zwischenspeichern von Remote-Daten, da die Remote-Daten möglicherweise unvorhersehbar aus dem Speicher gelöscht werden. In diesem Fall ist es besser, einen Cache wie LRU zu verwenden.

Logische Operatoren und Zuweisungsausdrücke

Logische Operatoren und Zuweisungsausdrücke: Die neue Funktion kombiniert logische Operatoren (&&, ||, ??) und Zuweisungsausdrücke, die bereits in JavaScript vorhanden sind Zusammengesetzte Zuweisungsoperatoren sind:

Operationsoperatoren: += -= *= /= %= **=
• Bitoperationsoperatoren: &= ^= |=
• Bitweise Operatoren: << ;= > = a op b

Logische Operatoren funktionieren anders als andere zusammengesetzte ZuweisungsoperatorenAusdruck: a op= b

Entspricht:

a = a op (a = b)

a ||= b//等价于a = a || (a = b)

a &&= b//等价于a = a && (a = b)

a ??= b//等价于a = a ?? (a = b)复制代码

为什么不再是跟以前的运算公式a = a op b一样呢，而是采用a = a op (a = b)。因为后者当且仅当a的值为false的时候才计算赋值，只有在必要的时候才执行分配，而前者的表达式总是执行赋值操作

??=可用来补充/初始化缺失的属性

const pages = [
  {  	title:'主会场',    path:'/'
  },
  {    path:'/other'
  },
  ...
]  
for (const page of pages){
	page.title ??= '默认标题'}console.table(pages)//(index)  title       		path//0        "主会场"   	  "/"//1        "默认标题"  	 "/other"复制代码

小结：

• &&=：当LHS值存在时，将RHS变量赋值给LHS
• ||=：当LHS值不存在时，将RHS变量赋值给LHS
• ??= ：当LHS值为null或者undefined时，将RHS变量赋值给LHS

数字分隔符

数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性

const money = 1_000_000_000//等价于const money = 1000000000const totalFee = 1000.12_34//等价于const totalFee = 1000.1234复制代码

该新特性同样支持在八进制数中使用

const number = 0o123_456//等价于const number = 0o123456复制代码

该新特性方便读取数据，可以让我们打工人更容易辨认"资产" 不过话说回来，小编的资产好像不配使用该特性...敲重点！！！

本次所有新特性均介绍的第4阶段，意味着将出现在下一个版本中的，没有介绍阶段3的，因为不确定是否一定会出现在下个版本中。本文介绍的新特性均可直接在最新版的谷歌浏览器中愉快体验。

相关免费学习推荐：javascript（视频）

Das obige ist der detaillierte Inhalt vonErleben Sie als Erster die neuen Funktionen von JavaScript ES12. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!