ES11屡试不爽的新特性,你用上了几个
ES11规范于今年的年初完成,引入了许多新标准,本文讲着重研究下其中几个实用且有趣的新标准
特性抢先知
- 私有变量
- Promise.allSettled
- BigInt 全新的数据类型
- Nullish Coalescing Operator 空位合并运算符
- Optional Chaining Operator 可选链运算符
- Dynamic Import 动态导入
- String.prototype.matchAll 新增matchAll
- globalThis 新增全局对象
- Module Namespace Exports 导入特定命名空间
私有变量
严格限制一些用于内部使用的Class变量,只需要在变量前 添加# ,就可以使其成为私有变量,并且无法在class外部直接访问
狼蚁网站SEO优化我们以一个简单的
class Hero { #aggressivity = 0 constructor (aggressivity){ this.#aggressivity = aggressivity } getHurt(){ return this.#aggressivity } setAggressivity(aggressivity){ this.#aggressivity = aggressivity } } const shooter = new Hero(100) let hurt = shooter.getHurt() console.log(hurt) //100 console.log(shooter.#aggressivity) //Error : Uncaught SyntaxError: Private field '#aggressivity' must be declared in an enclosing class
上面代码我们会发现,无法直接进行访问#aggressivity,将抛出异常
只能通过class里进行访问,可通过统一class的公共方法进行统一修改
假设目前射手携带了 狂暴 技能,提升了 10%伤害 ,我们可以通过setAggressivity来修改攻击力
let aggressivity = parseInt(hurt 1.1) shooter.setAggressivity(aggressivity) console.log(shooter.getHurt()) // 110
Promise.allSettled
谈及这个新特性之前,我们先简单回顾下 Promise.all 以及 Promise.race ,推测下为什么需要 Promise.allSettled 这个新特性
Promise.all可以将多个Promise实例包装成一个新的Promise实例。,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值
let p1 = new Promise((resolve, reject) => { resolve('成功了') }) let p2 = new Promise((resolve, reject) => { resolve('suess') }) let p3 = Promse.reject('失败') Promise.all([p1, p2]).then((result) => { console.log(result) //['成功了', 'suess'] }).catch((error) => { console.log(error) }) Promise.all([p1,p3,p2]).then((result) => { console.log(result) }).catch((error) => { console.log(error) // 失败了,打出 '失败' })
Promise.race:返回一个promise,一旦某个Promise触发resolve或者reject,就直接返回该promise结果状态
const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, 'one'); }); const promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'two'); }); Promise.race([promise1, promise2]).then((value) => { console.log(value); }); //输出 "two" 因为promise2返回结果比promise1快
有时候我们可能需要知道所有的结果做一些操作,并不关心其执行结果是否成功,在没有Promise.allSettled之前,我们需要自己实现,可通过如下 实现Promise.allSettled
let allSettled = (funcArr) => { return new Promise((resolve) => { let sttled = 0 let result = [] for(let index = 0;index<funcArr.length;index++){ const element = funcArr[index] element .then(res => { result[index] = { status: 'fulfilled', value: res } }) .catch(err => { result[index] = { status: 'rejected', reason: err } }) .finally(() => { ++sttled === funcArr.length && resolve(result) }) } }) } //使用 const promises = [ Promise.reject('c'), Promise.resolve('a'), Promise.resolve('b'), ]; allSettled(promises).then(res => { console.log(res) }) // 打印结果 // [{"status":"rejected","reason":"c"}, // {"status":"fulfilled","value":"a"}, // {"status":"fulfilled","value":"b"}]
而Promise.allSettled新特性出来后,我们可以直接使用而不需要单独去实现了
const promises = [ Promise.reject('c'), Promise.resolve('a'), Promise.resolve('b'), ]; Promise.allSettled(promises).then(res =>{ console.log(res) }) // 打印结果 // [{"status":"rejected","reason":"c"}, // {"status":"fulfilled","value":"a"}, // {"status":"fulfilled","value":"b"}]
返回结果里会将返回一个数组,包含了所有成功与失败的结果,数组每项为对象,均含有 status 属性,对应fulfilled和rejected。
当状态为 fulfilled 时,代表着成功,包含一个 value ,代表着成功的结果
当状态为 rejected 时,代表着失败,包含一个 reason ,代表着失败的原因
BigInt
JS中缺少显式整数类型常常令人困惑。许多编程语言支持多种数字类型,如浮点型、双精度型、整数型和双精度型,但JS却不是这样。在JS中,按照IEEE 754-2008标准的定义,所有数字都以双精度 64位浮点格式 表示。
在此标准下,无法精确表示的非常大的整数将自动四舍五入。确切地说,JS 中的Number类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数,任何超出此范围的整数值都可能失去精度。
console.log(9999999999999999); //10000000000000000
JS 提供 Number.MAX_SAFE_INTEGER 常量来表示 最大安全整数, Number.MIN_SAFE_INTEGER 常量表示最小安全整数
// 注意一位的数字 const A = Number.MAX_SAFE_INTEGER + 1 const B = Number.MAX_SAFE_INTEGER + 2 console.log(Number.MAX_SAFE_INTEGER) //9007199254740991 console.log(A) //9007199254740992 console.log(B) //9007199254740992 console.log(A === B) //true
当数据超出范围就会失去精度,达不到我们预期的结果。
BigInt横空出世,可以在标准JS中执行对大整数的算术运算,不必担心精度损失风险
创建BigInt数据类型的方式非常简单,在整数后面追加 n 即可,或者 通过BigInt()进行创建实例
const bigint = 999999999999999999n const bigintByMethod = BigInt('999999999999999999') console.log(bigint) //999999999999999999n console.log(bigintByMethod) //999999999999999999n console.log(bigint === bigintByMethod) //true //布尔值 console.log(BigInt(true)) //1n console.log(BigInt(false)) //0n console.log(typeof bigint) //"bigint"
BigInt 与 Number是两种数据类型,无法进行运算,可以进行大小比较
console.log(88n == 88) //true console.log(88n === 88) //false console.log(88n+1) //Error =>Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
BigInt之间, 除了一元加号(+)运算符 外,其他均可用于BigInt
console.log(1n + 2n) //3n console.log(1n - 2n) //-1n console.log(+ 1n) //Uncaught TypeError: Cannot convert a BigInt value to a number console.log(- 1n) //-1n console.log(10n 20n) //200n console.log(23n%10n) //3n console.log(20n/10n) //2n ......
需要注意的是, 除法运算符会自动向下舍入到最接近的整数
console.log(25n / 10n) //2n console.log(29n / 10n) //2n
还有个注意点就是,Boolean类型和BigInt类型的转换时,处理方式和Number类型,只要 不是0n,BigInt就被视为true
if (5n) { // 这里代码块将被执行 } if (0n) { // 这里代码块不会执行 }
Nullish Coalescing Operator 空位合并运算符
新增一个逻辑运算符??,处理null和undefined,工作原理与逻辑or( || )类似,与此相反
||如果为真即返回左侧值,否则返回右侧
0 || 5 // return 5 "" || 5 // return 5 "前端公虾米" || 'V5' //return "前端公虾米"
??如果为null或者undefined,即返回右侧,否则返回左侧
0 ?? 5 //return 0 "" ?? 5 //return "" null ?? 5 // return 5 undefined ?? 5 // return 5 false ?? 5 //return false NaN ?? 5 // return NaN
在使用该??运算符时,需要注意的是
- 不可与其他运算符组合使用,例如&&、||
- 但若使用括号包裹则可以组合使用
"前端公虾米" || undefined ?? "Sneaker" //Uncaught SyntaxError: Unexpected token '??' "前端公虾米" && undefined ?? "Sneaker" //Uncaught SyntaxError: Unexpected token '??' ("前端公虾米" || undefined) ?? "(๑•̀ㅂ•́)و✧" //"前端公虾米" ("前端公虾米" && null) ?? "一起学习" //"一起学习"
Optional Chaining Operator 可选链运算符
日常开发中,不少开发者会碰到Cannot read property XXX of undefined,抛出无法从未定义的数据中读取某个字段
可选链运算符在查找嵌套对象时,找到链中的第一个 undefined 或者 null 后会立即终止,并返回 undefined ,而不会不断向下查找而导致抛错
const obj = { foo: { bar: { baz: 42, }, }, } console.log(obj.fo.bar.baz) //Uncaught TypeError: Cannot read property 'bar' of undefined 在诸如此类的对象里,我们通常进行数据安全检查来访问嵌套对象,否则将抛错 if(obj&&obj.foo&&obj.foo.bar){ console.log(obj.foo.bar.baz) // 42 }
在可选链运算符可使用的现在,我们只需这样进行属性的读取
console.log(obj?.foo?.bar?.baz) //42 console.log(obj.foo.bar?.baz) //42
Dynamic Import 动态导入
在标准的import导入中,是静态导入的,所有被导入的模块是在加载时就被编译的,无法按需编译。当我们需要条件导入的时候,都只能使用 require() .
但现在,我们有办法改善此类情况了,因为动态导入可以有效的减少未使用代码的编译,可以提高首屏加载速度,按需加载。
那么,为什么我们需要动态导入呢?
- 静态导入消耗加载时间,很多模块并非首屏需要渲染
- 静态导入会在导入时消耗大量内存
- 可能会存在有些模块在加载时不存在
- 减少一些有条件依赖的副作用
//通用导入方式 import("/module/sneaker/test.js") .then(module => { //模块相关操作 }) //await const getModule = await import("/module/sneaker/test.js") //通过async await const getUserInfo = async (hasLogin) => { if(!hasLogin){ const user = await import("/module/sneaker/user.js") user.getInfo() } }
matchAll
基于String原型上的一个新方法,允许我们匹配一个字符串和一个正则表达式,返回值是所有匹配结果的迭代器。
可以通过 for...of 遍历或者 操作符... 、 Array.from 将结果迭代器转换成数组
const string = 'Hello Sneaker,Where is the library?' const regex = /[A-W]/g const matches = string.matchAll(regex) console.log(...matches) //["H", index: 0, input: "Hello Sneaker,Where is the library?", groups: undefined] //["S", index: 6, input: "Hello Sneaker,Where is the library?", groups: undefined] //["W", index: 14, input: "Hello Sneaker,Where is the library?", groups: undefined]
globalThis
这是为了提供一种访问全局对象的标准方法。
在浏览器中,我们可以使用 window/self/frames 来访问全局对象,但对于Web Workers只能使用 self ,Node中又完全不同,需要使用 global 。
在 globalThis 成为标准之前,获取全局对象我们可能需要这么做
const globalObj = (()=>{ if(self) return self if(window) return window if(global) return global throw new Error('Sorry!No global obj found') })
//Browser globalThis === window //true //Webworker globalThis === self //true //Node globalThis === global //true
从此实现全局对象的大一统!
Module Namespace Exports 导入特定命名空间
export as ns from './module //等同于 import as ns from './module' export {ns}
导入特定命名空间实则并没有导入模块,只是对模块进行转发,导致在此模块中不可直接使用此模块
参考
- ecma-262
- MDN
特性很多但有的很有趣,比如可选链和空位合并运算符,屡试不爽,至于有多爽,你试了才知道。新特性平常不写还是容易忽略淡忘的,建议平常可以下意识的经常回顾运用,一起学习一起成长。
到此这篇关于ES11屡试不爽的新特性,你用上了几个的文章就介绍到这了,更多相关ES11 新特性内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程