La colonne
JavaScript présente comment découvrir les nouvelles fonctionnalités d'ES12.
Chaque année, JavaScript est mis à jour pour ajouter de nouvelles fonctionnalités et de nouvelles normes. ES2020 est sorti cette année, et ES2020 (ES12) devrait également être publié la prochaine fois. année, c’est-à-dire 2021. Sorti en milieu d’année. Les nouvelles fonctionnalités passent chaque année par quatre étapes, et la quatrième étape est la dernière étape. Ce que cet article présentera, ce sont les nouvelles fonctionnalités associées dans la proposition 4, ce qui signifie également que ces nouvelles fonctionnalités apparaîtront dans une large mesure dans la prochaine version. 🎜>
Aperçu des fonctionnalités :
String.prototype.replaceAll Ajouté replaceAll- Promise.any
- WeakRefs
- Logique opérateurs et expressions d'affectation
- Délimiteurs de nombres
-
replaceAll
Il est facile de penser au mot
replaceAll pourremplacer . En JavaScript, la méthode replace ne peut remplacer que le caractère de première instance correspondant dans la chaîne et ne peut pas effectuer de remplacement global par correspondance multiple. Le seul moyen est d'effectuer une correspondance et un remplacement de règles pertinents via des expressions régulières
Et
. replaceAll renvoie une nouvelle chaîne et tous les caractères qui correspondent aux règles correspondantes seront remplacés. Les règles de remplacement peuvent être des chaînes ou des expressions régulières.
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 前端公虾米'复制代码Copier après la connexion
Il convient de noter que lorsque replaceAll utilise des expressions régulières, s'il y a une correspondance non globale (/g), replaceAll() lèvera une exception
let string = 'I like 前端,I like 前端公虾米'console.log(string.replaceAll(/like/,'love')) //TypeError复制代码
Copier après la connexion
Promise.any
Lorsqu'une promise de la liste Promise est résolue avec succès, renvoie l'état du résultat de la première résolution
Si toutes promesses sont rejetées, une exception est levée indiquant que toutes les demandes ont échoué
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))//输出//输出结果:哎呀，她接受我了复制代码Copier après la connexion
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复制代码Copier après la connexion
Promise.any
et Promise.race sont très faciles à confondre. Assurez-vous de les distinguer une fois qu'une promesse déclenche la résolution ou le rejet, Promise.race renvoie directement le résultat du statut et Don't. se soucier de son succès ou de son échecWeakRefs
Utilisez la classe Class de WeakRefs pour créer une référence faible à l'objet (une référence faible à l'objet signifie que l'objet ne sera pas recyclé alors qu'il devrait être recyclé par GC Empêcher le comportement de recyclage de GC)
Lorsque nous créons une variable via (const, let, var), le garbage collector GC ne supprimera jamais la variable de la mémoire tant que sa référence demeure. L'existence est accessible. Les objets WeakRef contiennent des références faibles aux objets. Une référence faible à un objet n'empêche pas le GC de restaurer une référence à l'objet ; le GC peut la supprimer à tout moment ;
Les WeakRefs sont utiles dans de nombreuses situations, comme l'utilisation d'objets Map pour implémenter des caches clé-valeur qui nécessitent beaucoup de mémoire. Dans ce cas, le plus pratique est de libérer la mémoire occupée par la clé-valeur. paires dès que possible.
Actuellement, vous pouvez utiliser
WeakRefs
par exemple via WeakMap() ou WeakSet
()
Je souhaite suivre le nombre de fois qu'un objet spécifique appelle une méthode spécifique. S'il dépasse 1 000, une invite correspondante apparaîtra
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)
}复制代码Copier après la connexion
Bien que notre fonction puisse être implémentée comme ci-dessus, un débordement de mémoire se produira car il est passé à doSomething Chaque objet de la fonction est stocké en permanence dans la map et ne sera pas recyclé par GC, on peut donc utiliser
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)
}复制代码Copier après la connexion
Non énumérables
WeakSet est similaire à WeakMap, mais chaque objet de WeakSet ne peut apparaître qu'une seule fois et tous les objets de WeakSet sont uniques
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) //仍存在复制代码Copier après la connexion
WeakSet
présente les deux différences suivantes par rapport à Set
WeakSet ne peut être qu'une collection d'objets, pas une valeur d'aucun type
- Référence faible WeakSet, la référence d'objet dans la collection est une référence faible. S'il n'y a pas d'autres références à l'objet WeakSet, elle sera recyclée par GC
- Enfin, le L'instance
WeakRef
a une méthode deref qui renvoie l'objet d'origine référencé, ou indéfini si l'objet d'origine a été recyclé 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;
};复制代码Copier après la connexion
Opérateurs logiques et expressions d'affectation
Opérateurs logiques et expressions d'affectation, la nouvelle fonctionnalité combine des opérateurs logiques (&&, ||, ??) et des expressions d'affectation. Et JavaScript existe déjà
Les opérateurs d'affectation composés sont :
Opérateurs d'opération : += -= *= /= %= **=
- Opérateurs d'opération sur bits : &= ^= |=
- Opérateurs au niveau du bit : <<= >>= >>>=
- Les opérateurs existants fonctionnent de la même manière. L'expression
peut être compris comme ceci :
a op = b
est équivalent à :
a = a op b
l'opérateur logique fonctionne différemment des autres composés opérateurs d'affectation. L'expression
:
a op = b
est équivalente à :
a = a op (a = b)
a ||= b//等价于a = a || (a = b)
a &&= b//等价于a = a && (a = b)
a ??= b//等价于a = a ?? (a = b)复制代码
Copier après la connexion
为什么不再是跟以前的运算公式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"复制代码Copier après la connexion
小结：
- &&=：当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复制代码
Copier après la connexion
该新特性同样支持在八进制数中使用
const number = 0o123_456//等价于const number = 0o123456复制代码
Copier après la connexion
该新特性方便读取数据，可以让我们打工人更容易辨认"资产"
不过话说回来，小编的资产好像不配使用该特性...敲重点！！！
本次所有新特性均介绍的第4阶段，意味着将出现在下一个版本中的，没有介绍阶段3的，因为不确定是否一定会出现在下个版本中。本文介绍的新特性均可直接在最新版的谷歌浏览器中愉快体验。
相关免费学习推荐：javascript（视频）
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
