为了账号安全,请及时绑定邮箱和手机立即绑定

五个你用得太少的JavaScript特性

JavaScript 在这些年里发展迅速,引入了许多使代码更高效、易读和强大的新特性。然而,许多开发者仍然坚持旧习惯,错失了一些非常有用的特性。让我们来看看 五个你可能还未充分利用的 JavaScript 特性,以及你现在就应该开始使用的理由。

此处省略

1. 可选链 (?.):

你是否曾经写过多个 if 语句来检查嵌套对象的属性值?可选链简化了这种操作,减少了运行时错误的风险。这将使访问深层属性时更加安全。

比如说...

    const user = {
      name: 'John',
      address: {
        city: 'New York'
      }
    };

    // 以下是一个使用可选链接操作符的例子
    // 不使用可选链接操作符,
    const city = user && user.address ? user.address.city : undefined;

    // 使用可选链接操作符,
    const city = user?.address?.city;

    console.log(city); // 'New York'

点击全屏,点击退出全屏

为什么要用它?

  • 消除对重复空值检查的需求。
  • 让你的代码更加简洁和易读。

……

2. 空合并操作符 (??)

?? 操作符在提供默认值时是 || 的一个很好的替代选项。与 || 不同,?? 只将 nullundefined 视为 nullish,因此不会错误地将 false0 或空字符串 '' 视为空值性状态。

示例:

    const input = 0;

    // 使用 或者 (||)
    const value = input || 10; // 10 (不太好)

    // 使用 空值合并 (??)
    const value = input ?? 10; // 0 (很好)

    console.log(value);

点击进入全屏模式,点击退出全屏模式

为什么要用它:

  • 帮助你避免意外回退。
  • 非常适合用来以可预测的方式处理默认值。

——

3. 动态导入

动态加载模块使你能够按需或条件加载 JavaScript 模块。这一点尤其有助于通过拆分代码为更小的模块来提高大型应用程序的性能。

例子:

如果用户是管理员,就加载管理员面板。

    if (user.isAdmin) {
      import('./adminPanel.js').then(module => {
        module.loadAdminPanel();
      });
    }

全屏模式 退出全屏

为什么要使用它?

  • 通过延迟加载非关键代码来减少初始加载时间。
  • 实现懒加载对于现代网页应用来说非常关键。

    • *

4. Promise.allSettled (等待所有 Promise 完成)

当你在处理多个承诺时,有时你可能想知道每个承诺的结果,不论是否成功。与 Promise.all 不同,它一旦失败就停止,Promise.allSettled 则会给你一个全面的结果。

例子:

    const promises = [
      Promise.resolve('成功'),
      Promise.reject('错误'),
      Promise.resolve('还有一次成功')
    ];

    Promise.allSettled(promises).then(results => {
      results.forEach(result => {
        if (result.status === 'fulfilled') {
          console.log('成功:', result.value);
        } else {
          console.log('失败:', result.reason);
        }
      });
    });

进入全屏模式,退出全屏模式

为什么你应该用它

  • 优雅地处理混合结果,不会阻止程序继续运行。
  • 非常适合需要单独处理每个结果的情况。

    • *

5. 逻辑赋值操作符 (&&=, ||=, ??=): 这些操作符用于逻辑赋值

这些简洁的运算符可以同时进行逻辑运算和赋值,让你的代码更简洁。

例子:

    let user = {
      isLoggedIn: false,
      preferences: null
    };

    // 使用逻辑赋值操作符
    user.isLoggedIn ||= true; // 如果为 false 或 undefined,则设为 true
    user.preferences ??= { theme: 'dark' }; // 如果为 null 或 undefined,则设为 { theme: 'dark' }

    控制台输出 user;
    // 输出结果为: { isLoggedIn: true, preferences: { theme: 'dark' } }

全屏模式,退出全屏

这里有几个理由你应该用它:

  • 减少代码冗余。
  • 特别在状态更新或对象修改时提高可读性。

    • *

最后的想法:

这些现代的 JavaScript 特性不仅仅是语法糖,它们还能帮助你写出更安全、更清晰、更高效的代码。如果你还没用过,现在开始再合适不过了。

你觉得这些功能里哪个最有用?或者有没有哪个你已经在用的功能,已经改变你的编码体验?在下面留言区分享你的想法吧!

关注我们并订阅吧:

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消