JavaScript ES12 の新機能を誰よりも早く体験してください

JavaScript コラムでは、ES12 の新機能を体験する方法を紹介します。

JavaScript は毎年更新され、新しい機能や新しい標準が追加されます。今年は ES2020 がリリースされ、ES2020 (ES12) もリリースされる予定です来年、つまり 2021 年。年の半ばにリリースされます。新機能は毎年 4 つの段階を経て、第 4 段階が最終段階となりますが、今回紹介するのは提案 4 に該当する新機能であり、これらの新機能の多くは次のバージョンにも登場することになります。

機能プレビュー:

• String.prototype.replaceAll 新しい replaceAll
• Promise.any
• WeakRefs
• 論理演算子と代入式
• 数値区切り文字

replaceAll

単語 replaceAll を replace# と考えるのは簡単です。 ##。 JavaScript では、replace メソッドは文字列内で一致する最初のインスタンス文字のみを置き換えることができますが、グローバルな複数一致の置換は実行できません。唯一の方法は、正規表現を使用して関連するルールの一致と置換を実行することです

replaceAll は新しい文字列を返し、一致ルールに一致するすべての文字が置換されます。置換ルールには文字列または正規表現を使用できます。

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 前端公虾米'复制代码

replaceAll で正規表現を使用する場合、グローバル (/g) に一致しない場合、replaceAll() は例外をスローすることに注意してください

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

Promise .any

Promise リスト内の

任意の promise が正常に解決されると、 最初の resolve の結果ステータスが返されます。 すべての プロミスが reject の場合、すべてのリクエストが失敗したことを示す例外がスローされます

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))//输出//输出结果:哎呀，她接受我了复制代码

別の状況を見てみましょう

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复制代码

Promise.any と Promise.race は非常に混同しやすいので、必ず区別してください。Promise が解決または拒否をトリガーすると、Promise.race はステータスの結果を直接返し、Don'成功か失敗かは気にしません

WeakRefs

WeakRefs の Class クラスを使用して、オブジェクトへの弱参照を作成します (オブジェクトへの弱参照は、オブジェクトが(GC によってリサイクルされるべきときにリサイクルされる) GC のリサイクル動作を防止する)

#(const, let, var) を通じて変数を作成する場合、ガベージ コレクター GC は変数をメモリから削除しません。その参照が残っている限り、その存在はアクセス可能です。 WeakRef オブジェクトには、オブジェクトへの弱い参照が含まれます。オブジェクトへの弱い参照は、GC がオブジェクトへの参照を復元することを妨げるものではなく、GC はいつでもオブジェクトへの参照を削除できます。

WeakRef は、大量のメモリを必要とするキーと値のキャッシュを実装するために Map オブジェクトを使用するなど、多くの状況で役立ちます。この場合、最も便利なのは、キーによって占有されているメモリを解放することです。値のペアをできるだけ早く変更します。

現在、

WeakMap

() または WeakSet() を使用して WeakRefs 栗をあげる

特定のオブジェクトが特定のメソッドを呼び出した回数を追跡したいのですが、1,000回を超えると、対応するプロンプトが表示されます。

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)
}复制代码

上記で機能は実現できますが、メモリオーバーフローが発生します。 doSomething に渡されるため発生します。関数の各オブジェクトはマップに永続的に保存され、GC によってリサイクルされないため、

WeakMap

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)
}复制代码

を使用できます。参照すると、WeakMap と WeakSet のキーと値のペアは

Non-enumerable

WeakSet は WeakMap に似ていますが、WeakSet 内の各オブジェクトは 1 回しか出現せず、WeakSet 内のすべてのオブジェクトは一意です。

let ws = new WeakSet()let foo = {}let bar = {}

ws.add(foo)
ws.add(bar)

ws.has(foo) //truews.has(bar) //truews.delete(foo) //删除foo对象ws.has(foo) //false 已删除ws.has(bar) //仍存在复制代码

WeakSet

Set

WeakSet はオブジェクトのコレクションのみを指定でき、値は指定できません。任意の型

• WeakSet 弱参照の場合、コレクション内のオブジェクト参照は弱参照です。WeakSet オブジェクトへの参照が他にない場合、GC
• によってリサイクルされます。最後に、

WeakRef

インスタンスには、参照された元のオブジェクトを返すメソッド deref があり、元のオブジェクトがリサイクルされている場合は unknown

const cache = new Map();const setValue =  (key, obj) => {
  cache.set(key, new WeakRef(obj));
};const getValue = (key) => {  const ref = cache.get(key);  if (ref) {    return ref.deref();
  }
};const fibonacciCached = (number) => {  const cached = getValue(number);  if (cached) return cached;  const sum = calculateFibonacci(number);
  setValue(number, sum);  return sum;
};复制代码

が返されます。リモート データは予期せずメモリから削除される可能性があるため、リモート データをキャッシュするのは良いアイデアではない可能性があります。この場合、LRU などのキャッシュを使用することをお勧めします。

論理演算子と代入式

論理演算子と代入式、新機能は論理演算子 (&&、||、??) と代入式を組み合わせたものであり、JavaScript はすでに存在します 複合代入演算子は次のとおりです:

演算演算子: = -= *= /= %= **=

• ビット演算演算子: &= ^= | =
• ビット演算子:<<= >>= >>>=
• 既存の演算子はどのような方法でも機能します。次のような式:

a op= b

は次と同等です: a = a op b

論理演算子 sum 他の複合代入演算子は動作が異なります。 ## 式: a op= b

は次と同等です:

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（视频）

以上がJavaScript ES12 の新機能を誰よりも早く体験してくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。