本篇文章给大家分享的是有关JavaScript ES12有哪些新特性，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
10多年的工农网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整工农建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“工农网站设计”,“工农网站推广”以来，每个客户项目都认真落实执行。
而每年，JavaScript都会更新添加新的特性新标准，在今年ES2020发布了，而ES2020（ES12）也预计将在明年即2021年年中发布。每年的新特性都会经历四个阶段，而第四阶段也就是最后一个阶段，本文即将介绍的即提案4中的相关新特性，也是意味着这些新特性将很大程度的出现在下一个版本中
特性抢先知：
String.prototype.replaceAll 新增replaceAll
Promise.any
WeakRefs
逻辑运算符和赋值表达式
数字分隔符号
replaceAll
看到replaceAll这个词，相比很容易联想到replace。在JavaScript中，replace方法只能是替换字符串中匹配到的第一个实例字符，而不能进行全局多项匹配替换，唯一的办法是通过正则表达式进行相关规则匹配替换
而replaceAll则是返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉，替换规则可以是字符串或者正则表达式。
let string = 'I like 前端,I like 前端公虾米' //使用replace let replaceStr = string.replace('like','love') console.log(replaceStr) // 'I love 前端,I like 前端公虾米' //replace使用正则匹配所有 console.log(string.replace(/like/g,'love')) // 'I love 前端,I love 前端公虾米' //使用replaceAll let 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则返回第一个resolve的结果状态 如果所有的promise均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 rejectedPromise.any与Promise.race十分容易混淆，务必注意区分，Promise.race 一旦某个promise触发了resolve或者reject，就直接返回了该状态结果，并不在乎其成功或者失败
WeakRefs
使用WeakRefs的Class类创建对对象的弱引用(对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为)
当我们通过（const、let、var）创建一个变量时，垃圾收集器GC将永远不会从内存中删除该变量，只要它的引用仍然存在可访问。WeakRef对象包含对对象的弱引用。对对象的弱引用是不会阻止垃圾收集器GC恢复该对象的引用，则GC可以在任何时候删除它。
WeakRefs在很多情况下都很有用，比如使用Map对象来实现具有很多需要大量内存的键值缓存，在这种情况下最方便的就是尽快释放键值对占用的内存。
目前，可以通过WeakMap()或者WeakSet()来使用WeakRefs
举个栗子
我想要跟踪特定的对象调用某一特定方法的次数，超过1000条则做对应提示
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函数的每个对象都永久保存在map中，并且不会被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的键值对是不可枚举的
WeakSet和WeakMap相似，但是每个对象在WeakSet中的每个对象只可能出现一次，WeakSet中所有对象都是唯一的
let ws = new WeakSet() let foo = {} let bar = {} ws.add(foo) ws.add(bar) ws.has(foo) //true ws.has(bar) //true ws.delete(foo) //删除foo对象 ws.has(foo) //false 已删除 ws.has(bar) //仍存在WeakSet与Set相比有以下两个区别
WeakSet只能是对象集合，而不能是任何类型的任意值
WeakSet弱引用，集合中对象引用为弱引用，如果没有其他对WeakSet对象的引用，则会被GC回收
最后，WeakRef实例有一个方法deref，返回引用的原始对象，如果原始对象被回收，则返回undefined
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
逻辑运算符和其他的复合赋值运算符工作方式不同
表达式：a op= b
等同于：a = a op (a = b)
a ||= b //等价于 aa = a || (a = b) a &&= b //等价于 aa = a && (a = b) a ??= b //等价于 aa = 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 = 1000000000 const totalFee = 1000.12_34 //等价于 const totalFee = 1000.1234
该新特性同样支持在八进制数中使用
const number = 0o123_456 //等价于 const number = 0o123456
该新特性方便读取数据，可以让我们「打工人」更容易辨认"资产" 不过话说回来，小编的资产好像不配使用该特性...敲重点！！！
本次所有新特性均介绍的第4阶段，意味着将出现在下一个版本中的，没有介绍阶段3的，因为不确定是否一定会出现在下个版本中。
以上就是JavaScript ES12有哪些新特性，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
