当前位置: 首页 > 科技观察

2022年前端应该掌握的十个JS技巧

时间:2023-03-14 21:36:44 科技观察

你知道什么是0吗??1等于?大家好,我是LBJ,今天我们来聊聊2022年值得掌握的一些新特性!现在前端发展很快,各种技术和框架层出不穷,百花齐放。很多人都在喊学不会!事实上,JavaScript是前端的主要语言。虽然它发展很快,每年都会发布一些新特性,但这取决于JavaScript开发者的开发速度,因为很多比较新的功能已经有很高的采用率我们来看看采用率很高的新特性,2022年你应该知道的10个JS技巧1.使用??而不是||,用于判断运算符左边的值何时为null或undefined,然后返回运算符左边的值右边。该运算符由ES2020引入,也称为Nullish合并运算符,它的行为类似于||,但更严格的||operatorisemptyontheleftAfalsyvaluesuchasastringorfalseor0将返回背面的值。而??只有当运算符左侧的值为null或undefined时,才必须返回右侧的值。所以0||1的结果为1,0??1的结果为0。例如constresponse={settings:{nullValue:null,height:400,animationDuration:0,headerText:'',showSplashScreen:错误的}};constundefinedValue=response.settings.undefinedValue??'someotherdefault';//result:'someotherdefault'constnullValue=response.settings.nullValue??'someotherdefault';//result:'someotherdefault'constheaderText=response.settings.headerText??'你好,世界!';//result:''constanimationDuration=response.settings.animationDuration??300;//result:0constshowSplashScreen=response.settings.showSplashScreen??true;//result:false浏览器支持2.使用.&&和三元运算符的简化?。也是ES2020引入的,有人称它为optionalchainingoperator?。直接在链中调用判断,判断左边的对象是null还是undefined,如果是,则不做进一步计算,返回undefined,如果不是,则返回右边的值,如varstreet=user.address&&user.address.street;varfooInput=myForm.querySelector('input[name=foo]')varfooValue=fooInput?fooInput.value:undefined//简化后的varstreet=user.address?.streetvarfooValue=myForm.querySelector('输入[名称=foo]')?.value注:常见写法obj?.prop对象属性obj?.[expr]对象属性func?.(...args)函数或对象方法3.使用动态导入import()实现on-按需加载(优化静态导入)我们可以使用import语句初始化加载依赖importdefaultExportfrom"module-name";import*asnamefrom"module-name";//...但是静态导入的import语句需要依赖script标签的type="module",有时我们希望能够根据条件按需加载模块,比如以下场景:当一个静态导入的模块明显降低了代码的加载速度并且不太可能被加载时used,或者当一个静态引入的模块明显占用大量系统内存时不需要立即使用,而且被使用的可能性很低。当加载时引入的模块不存在时,需要异步获取。当导入的模块有副作用时,只有在触发某些条件时才需要这些副作用。这时候,我们可以使用动态导入import(),可以像函数一样在各个地方使用,返回一个promise,主要使用下面两种形式//form1import('/modules/my-module.js')。then((module)=>{//Dosomethingwiththemodule.});//Form2letmodule=awaitimport('/modules/my-module.js');浏览器支持4.使用顶级等待(top-levelawait)来简化异步功能。其实上面的代码是有用的letmodule=awaitimport('/modules/my-module.js');顶级await允许开发人员在异步函数字段之外使用await因此//before(asyncfunction(){awaitPromise.resolve(console.log('