发布时间:2025-11-05 09:24:22 来源:云智核 作者:人工智能
你知道 0 ?前端巧? 1等于多少吗?
大家好,我是应该 LBJ,今天我们聊聊2022一些值得掌握的掌握新特性!
现在前端发展很快,各种技术和框架层出不穷、小技百花齐放,前端巧很多人都喊学不动啦!应该事实上JavaScript 作为前端的掌握主要语言,虽然它的小技发展很快,每年都会出一些新特性,前端巧但视乎 JavaScript 开发者的应该发展速度更快一些,因为很多相对较新的掌握功能都已经有很高的采用率
下面来看看那些具有较高采用率的新特性,2022你应该了解的小技10个 JS 小技巧
??运算符是 ES2020 引入,也被称为null判断运算符( Nullish coalescing operator)
它的掌握行为类似||,站群服务器但是更严
||运算符是左边是空字符串或false或0等falsy值,都会返回后侧的值。而??必须运算符左侧的值为null或undefined时,才会返回右侧的值。因此0||1的结果为1,0??1的结果为0
例如
const response = {
settings: {
nullValue: null,
height: 400,
animationDuration: 0,
headerText: ,
showSplashScreen: false
}
};
const undefinedValue = response.settings.undefinedValue ?? some other default; // result: some other default
const nullValue = response.settings.nullValue ?? some other default; // result: some other default
const headerText = response.settings.headerText ?? Hello, world!; // result:
const animationDuration = response.settings.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false
浏览器支持情况

?.也是ES2020 引入,有人称为链判断运算符(optional chaining operator)
?.直接在链式调用的时候判断,判断左侧的对象是否为null或undefined,如果是的,就不再往下运算,返回undefined,如果不是,源码下载则返回右侧的值
例如
var street = user.address && user.address.street;
var fooInput = myForm.querySelector(input[name=foo])
var fooValue = fooInput ? fooInput.value : undefined
// 简化
var street = user.address?.street
var fooValue = myForm.querySelector(input[name=foo])?.value
注:常见写法
obj?.prop 对象属性obj?.[expr] 对象属性func?.(...args) 函数或对象方法的调用浏览器支持情况

我们可以使用 import 语句初始化的加载依赖项
import defaultExport from "module-name";
import * as name from "module-name";
//...
但是静态引入的import 语句需要依赖于 type="module" 的script标签,而且有的时候我们希望可以根据条件来按需加载模块,比如以下场景:
当静态导入的模块很明显的降低了代码的加载速度且被使用的可能性很低,或者并不需要马上使用它当静态导入的模块很明显的占用了大量系统内存且被使用的可能性很低当被导入的模块,在加载时并不存在,需要异步获取当被导入的模块有副作用,这些副作用只有在触发了某些条件才被需要时这个时候我们就可以使用动态引入import(),它跟函数一样可以用于各种地方,返回的是一个 promise
基本使用如下两种形式
//形式 1
import(/modules/my-module.js)
.then((module) => {
// Do something with the module.
});
//形式2
let module = await import(/modules/my-module.js);
浏览器支持情况

其实上面的b2b供应网代码就有用到
let module = await import(/modules/my-module.js);
顶层 await 允许开发者在 async 函数外部使用 await 字段
因此
//以前
(async function () {
await Promise.resolve(console.log(随便看看