ES2020几个常用新特性丨技术开发分享录

ES2020几个常用新特性

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"ECMAScript 2020/ES2020/ES11 于 6 月发布,并且已经在现代浏览器中实现。\n\n## 一、空值合并\n\n只针对 `null` 和 `undefined`,对 `''` 、 `0` 、 `NaN` 及 `false` 无效,所以这同 `||` 是有区别的,写法是 `??` 连接\n\n示例:\n\n```\nconst user = { age: 0 }\nlet age = user.age ?? 50 // value is 0\nlet ageWrong = user.age || 50 // value is 50\n```\n\n仅当 age 为 undefined 或者 null 时才使用 50 这个值。\n\n## 二、可选链\n\n在对象属前面使用 `?.` 连接会检查该属性是否为 `null` 或 `undefined`,以避免代码崩溃。\n\n示例:\n\n以前的写法\n\n```\nconst house = { owner: { name: 'Jim', pet: null }};\n\nif(house && house.owner && house.owner.pet && house.owner.pet.type === 'dog'){\n  console.log('owner has a dog');\n}\n```\n\n新特性写法\n\n```\nif (house?.owner?.pet?.type === 'dog') {\n  console.log('owner has a dog');\n}\n```\n\n## 三、Promise.allSettled\n\n以前处理多个异步请求一并返回使用的是 `Promise.all` 但如果其他一个请求失败了就会报出异常,但使用 `Promise.allSettled`则不一样,不管请求成功或失败都会把结果返回过来\n\n示例:\n\n```\nconst promises = [Promise.resolve(1), Promise.reject(2)];\nconst [result1, result2] = await Promise.allSettled(promises);\n```\n\n即使其他 `promise` 被拒绝了,我们仍然可以在这里使用 `result1` 的值。\n\n## 四、matchAll\n\n如果要用正则表达式查找所有的匹配项,可以用 `match` 来得到所有子字符串。但是,如果你既需要子字符串又需要索引,该怎么办?这时可以用 `matchAll` 并进行重复匹配。\n\n示例:\n\n```\nconst matches = 'Here are some numbers: 3 15 32'.matchAll(/\\d+/g);\nfor (const match of matches) {\n  console.log(match);\n}\n\n// 输出:\n// [\"3\", index: 22, input: \"Here are some numbers: 3 15 32\", groups: undefined]\n// [\"15\", index: 24, input: \"Here are some numbers: 3 15 32\", groups: undefined]\n// [\"32\", index: 27, input: \"Here are some numbers: 3 15 32\", groups: undefined]\n```\n\n## 五、BigInt\n\n\n在处理大于 9007199254740991 的数字时应该用 BigInt。 BigInt 在数字末尾用 n 表示。\n\n示例:\n\n```\n9_007_199_254_740_991 + 2; // 9007199254740992\n\nBigInt(9_007_199_254_740_991) + BigInt(2) // 9007199254740993n\n```\n\n## 六、动态导入\n\n以前是先导入再使用,新特性可以动态导入使用了,因为 `import()` 会与模块一起返回一个 `Promise`\n\n示例:\n\n```\nconst utils = await import('utils');\n```\n\n## 七、globalThis\n\n如果你的代码需要在多个环境(例如浏览器和 `Node` 服务器)下运行,那么它们所使用全局对象名称并不一致。在浏览器中用的是 `window`,`Node` 则用的是 `global`,而 `web worker` 用的是 `self` 。现在,无论代码在哪种环境中运行,`globalThis` 都能够为你提供正确的全局对象。\n\n示例:\n\n```\nif (typeof globalThis.alert === 'function'){\n  globalThis.alert('hello');\n}\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看