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

发布时间：2025-11-05 09:24:22 来源：云智核 作者：人工智能

你知道 ​​0 ?前端巧? 1​​等于多少吗？

大家好，我是应该 ​​LBJ​​，今天我们聊聊​​2022​​一些值得掌握的掌握新特性!

现在前端发展很快，各种技术和框架层出不穷、小技百花齐放，前端巧很多人都喊学不动啦！应该事实上​​JavaScript​​ 作为前端的掌握主要语言，虽然它的小技发展很快，每年都会出一些新特性，前端巧但视乎 ​​JavaScript​​ 开发者的应该发展速度更快一些，因为很多相对较新的掌握功能都已经有很高的采用率

下面来看看那些具有较高采用率的新特性，​​2022​​你应该了解的小技​​10​​个 ​​JS​​ 小技巧

1. 用​​??​​代替​​||​​，用于判断运算符左侧的前端巧值为​​null​​或​​undefined​​时，才返回右侧的应该值

​​??​​运算符是 ​​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

浏览器支持情况

2. 使用​​?.​​简化​​&&​​和三元运算符

​​?.​​也是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

注：常见写法

浏览器支持情况

3. 使用动态导入import()实现按需加载（优化静态import）

我们可以使用 ​​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);

浏览器支持情况

4. 使用顶层 await（top-level await）简化 async 函数

其实上面的b2b供应网代码就有用到

let module = await import(/modules/my-module.js);

顶层 ​​await​​ 允许开发者在 ​​async​​ 函数外部使用 ​​await​​ 字段

因此

//以前

(async function () {

相关文章