ES12 (ECMAScript 2021) 是 JavaScript 语言的最新版本,其中引入了一些新的操作符,包括逻辑空值合并操作符(nullish coalescing operator)、可选链操作符(optional chaining operator)和 Promise.allSettled 操作符等。这些新操作符可以使代码更加简洁和易于阅读,同时也提高了开发效率。在本文中,我们将分析这些新操作符的实现方式,并提供一些示例代码。
逻辑空值合并操作符
逻辑空值合并操作符(??)用于判断一个变量是否为 null 或 undefined,如果是,则返回默认值。它的语法如下:
const result = variable ?? defaultValue;
其中,result 表示返回的结果,variable 表示需要判断的变量,defaultValue 表示默认值。
在实现上,逻辑空值合并操作符会先判断 variable 是否为 null 或 undefined,如果是,则返回 defaultValue,否则返回 variable 的值。下面是一个示例代码:
const name = undefined; const result = name ?? 'John'; console.log(result); // 输出 'John'
在这个示例中,由于 name 的值为 undefined,所以 result 的值为 'John'。
可选链操作符
可选链操作符(?.)用于判断一个对象是否存在某个属性或方法,如果存在,则返回其值或执行结果,否则返回 undefined。它的语法如下:
const result = object?.property?.method();
其中,result 表示返回的结果,object 表示需要判断的对象,property 表示对象的属性,method 表示属性的方法。
在实现上,可选链操作符会先判断 object 是否存在,如果存在,则继续判断 property 是否存在,如果存在,则继续判断 method 是否存在,如果存在,则执行 method 方法,否则返回 undefined。下面是一个示例代码:
const person = { name: 'John', address: { city: 'New York' } }; const result = person?.address?.city; console.log(result); // 输出 'New York'
在这个示例中,由于 person 对象存在 address 属性,因此可以通过可选链操作符获取到 address 的值,进而获取到 city 的值。
Promise.allSettled 操作符
Promise.allSettled 操作符用于处理多个 Promise 对象,并返回一个包含所有 Promise 对象状态的数组。它的语法如下:
const result = Promise.allSettled(promises);
其中,result 表示返回的结果,promises 是一个包含多个 Promise 对象的数组。
在实现上,Promise.allSettled 操作符会同时处理所有 Promise 对象,并返回一个包含所有 Promise 对象状态的数组。下面是一个示例代码:
const promise1 = Promise.resolve(1); const promise2 = Promise.reject('error'); const promise3 = Promise.resolve(3); const result = Promise.allSettled([promise1, promise2, promise3]); console.log(result);
在这个示例中,由于 promise2 对象被 reject,因此 result 数组中包含了 promise2 的状态和原因,其他 Promise 对象的状态和值也被包含在了 result 数组中。
总结
ES12 新操作符的实现方式可以使代码更加简洁和易于阅读,同时也提高了开发效率。逻辑空值合并操作符用于判断一个变量是否为 null 或 undefined,可选链操作符用于判断一个对象是否存在某个属性或方法,Promise.allSettled 操作符用于处理多个 Promise 对象。在实际开发中,我们可以根据实际需求选择使用这些新操作符,以提高代码的可读性和开发效率。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65867b2dd2f5e1655d0eefe1