前端框架选型是企业提升开发效率与用户体验的关键因素
296
2024-06-12
ECMAScript 2020 的新特性是什么
javascript 是最流行的编程语言之一，每年都会添加新的特性。本文介绍了添加在 ecmascript 2020（又称es11）中的新特性。
在引入 ECMAScript 2015（又称 ES6）之前，JavaScript 发展的非常缓慢。但自 2015 年起，每年都有新特性添加进来。需要注意的是，不是所有特性都被现代浏览器支持，但是由于 JavaScript 编译器 Babel 的存在，我们已经可以使用新特性了。本文将介绍 ECMAScript 2020（ES11）的一些最新特性。
Optional Chaining 可选链式调用
大部分开发者都遇到过这个问题：
TypeError: Cannot read property ‘x’ of undefined
这个错误表示我们正在访问一个不属于对象的属性。
访问对象的属性
const flower = {
colors: {
red: true
}
}
console.log(flower.colors.red) // 正常运行
console.log(flower.species.lily) // 抛出错误：TypeError: Cannot read property 'lily' of undefined
在这种情况下，JavaScript 引擎会像这样抛出错误。但是某些情况下值是否存在并不重要，因为我们知道它会存在。于是，可选链式调用就派上用场了！
我们可以使用由一个问号和一个点组成的可选链式操作符，去表示不应该引发错误。如果没有值，应该返回 undefined。
console.log(flower.species?.lily) // 输出 undefined
当访问数组或调用函数时，也可以使用可选链式调用。
访问数组
let flowers = ['lily', 'daisy', 'rose']
console.log(flowers[1]) // 输出：daisy
flowers = null
console.log(flowers[1]) // 抛出错误：TypeError: Cannot read property '1' of null
console.log(flowers?.[1]) // 输出：undefined
调用函数
let plantFlowers = () => {
return 'orchids'
}
console.log(plantFlowers()) // 输出：orchids
plantFlowers = null
console.log(plantFlowers()) // 抛出错误：TypeError: plantFlowers is not a function
console.log(plantFlowers?.()) // 输出：undefined
Nullish Coalescing 空值合并
目前，要为变量提供回退值，逻辑操作符 || 还是必须的。它适用于很多情况，但不能应用在一些特殊的场景。例如，初始值是布尔值或数字的情况。举例说明，我们要把数字赋值给一个变量，当变量的初始值不是数字时，就默认其为 7 ：
let number = 1
let myNumber = number || 7
变量 myNumber 等于 1，因为左边的（number）是一个 真 值 1。但是，当变量 number 不是 1 而是 0 呢？
let number = 0
let myNumber = number || 7
0 是 假 值，所以即使 0 是数字。变量 myNumber 将会被赋值为右边的 7。但结果并不是我们想要的。幸好，由两个问号组成：?? 的合并操作符就可以检查变量 number 是否是一个数字，而不用写额外的代码了。
let number = 0
let myNumber = number ?? 7
操作符右边的值仅在左边的值等于 null 或 undefined 时有效，因此，例子中的变量 myNumber 现在的值等于 0 了。
Private Fields 私有字段
许多具有 classes 的编程语言允许定义类作为公共的，受保护的或私有的属性。Public 属性可以从类的外部或者子类访问，protected 属性只能被子类访问，private 属性只能被类内部访问。JavaScript 从 ES6 开始支持类语法，但直到现在才引入了私有字段。要定义私有属性，必须在其前面加上散列符号：#。
class Flower {
#leaf_color = "green";
constructor(name) {
this.name = name;
}
get_color() {
return this.#leaf_color;
}
}
const orchid = new Flower("orchid");
console.log(orchid.get_color()); // 输出：green
console.log(orchid.#leaf_color) // 报错：SyntaxError: Private field '#leaf_color' must be declared in an enclosing class
-
如果我们从外部访问类的私有属性，势必会报错。
Static Fields 静态字段
如果想使用类的方法，首先必须实例化一个类，如下所示：
class Flower {
add_leaves() {
console.log("Adding leaves");
}
}
const rose = new Flower();
rose.add_leaves();
Flower.add_leaves() // 抛出错误：TypeError: Flower.add_leaves is not a function
-
试图去访问没有实例化的 Flower 类的方法将会抛出一个错误。但由于 static 字段，类方法可以被 static 关键词声明然后从外部调用。
class Flower {
constructor(type) {
this.type = type;
}
static create_flower(type) {
return new Flower(type);
}
}
const rose = Flower.create_flower("rose"); // 正常运行
Top Level Await 顶级 Await
目前，如果用 await 获取 promise 函数的结果，那使用 await 的函数必须用 async 关键字定义。
const func = async () => {
const response = await fetch(url)
}
头疼的是，在全局作用域中去等待某些结果基本上是不可能的。除非使用 立即调用的函数表达式（IIFE）。
(async () => {
const response = await fetch(url)
})()
但引入了 顶级 Await 后，不需要再把代码包裹在一个 async 函数中了，如下即可：
const response = await fetch(url)
这个特性对于解决模块依赖或当初始源无法使用而需要备用源的时候是非常有用的。
let Vue
try {
Vue = await import('url_1_to_vue')
} catch {
Vue = await import('url_2_to_vue)
}
Promise.allSettled 方法
等待多个 promise 返回结果时，我们可以用 Promise.all([promise_1, promise_2])。但问题是，如果其中一个请求失败了，就会抛出错误。然而，有时候我们希望某个请求失败后，其他请求的结果能够正常返回。针对这种情况 ES11 引入了 Promise.allSettled 。
promise_1 = Promise.resolve('hello')
promise_2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'problem'))
Promise.allSettled([promise_1, promise_2])
.then(([promise_1_result, promise_2_result]) => {
console.log(promise_1_result) // 输出：{status: 'fulfilled', value: 'hello'}
console.log(promise_2_result) // 输出：{status: 'rejected', reason: 'problem'}
})
成功的 promise 将返回一个包含 status 和 value 的对象，失败的 promise 将返回一个包含 status 和 reason 的对象。
Dynamic Import 动态引入
你也许在 webpack 的模块绑定中已经使用过动态引入。但对于该特性的原生支持已经到来：
// Alert.js
export default {
show() {
// 代码
}
}
// 使用 Alert.js 的文件
import('/components/Alert.js')
.then(Alert => {
Alert.show()
})
考虑到许多应用程序使用诸如 webpack 之类的模块打包器来进行代码的转译和优化，这个特性现在还没什么大作用。
MatchAll 匹配所有项
如果你想要查找字符串中所有正则表达式的匹配项和它们的位置，MatchAll 非常有用。
const regex = /\b(apple)+\b/;
const fruits = "pear, apple, banana, apple, orange, apple";
for (const match of fruits.match(regex)) {
console.log(match);
}
// 输出
//
// 'apple'
// 'apple'
相比之下，matchAll 返回更多的信息，包括找到匹配项的索引。
for (const match of fruits.matchAll(regex)) {
console.log(match);
}
// 输出
//
// [
// 'apple',
// 'apple',
// index: 6,
// input: 'pear, apple, banana, apple, orange, apple',
// groups: undefined
// ],
// [
// 'apple',
// 'apple',
// index: 21,
// input: 'pear, apple, banana, apple, orange, apple',
// groups: undefined
// ],
// [
// 'apple',
// 'apple',
// index: 36,
// input: 'pear, apple, banana, apple, orange, apple',
// groups: undefined
// ]
globalThis 全局对象
JavaScript 可以在不同环境中运行，比如浏览器或者 Node.js。浏览器中可用的全局对象是变量 window，但在 Node.js 中是一个叫做 global 的对象。为了在不同环境中都使用统一的全局对象，引入了 globalThis 。
// 浏览器
window == globalThis // true
// node.js
global == globalThis // true
BigInt
JavaScript 中能够精确表达的最大数字是 2^53 - 1。而 BigInt 可以用来创建更大的数字
const theBiggerNumber = 9007199254740991n
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
- 小程序开发设计在提升企业数字化转型效率中的关键作用
- 企业如何利用flutter小程序提升管理与运营效率
- 洞察企业在使用vue小程序时，如何结合FinClip的监管与管理能力提高合规性和效率?
- 随着数字化转型的不断深入，小程序技术标准如何在金融、安全和物联网等领域实现高效合规运营？
- 如何通过微信小程序 API 优化企业管理与服务，提升数字化转型效率？
- 小程序行为分析助力App灵活管理和数字化转型
- 洞察如何利用FinClip的小程序容器技术实现高效能Windows应用管理，助力企业数字化转型
- 如何在数字化转型中利用移动应用开发提升企业敏捷性与市场适应性？
- 小程序容器助力企业在金融与物联网领域实现高效合规运营，带来的新机遇与挑战如何管理？
- 小程序引擎如何促进企业在金融行业的数字化转型及合规运营
推荐文章
热评文章
暂时没有评论，来抢沙发吧~