javascript新语法

发表于 更新于 分类于 ，

Js 第三阶段的新语法

主要介绍 2 个处于 Statge 3 的新语法，目前该语法可以使用 babel 插件进行使用。这两个新语法分别是：

  • proposal-optional-chaining
  • proposal-nullish-coalescing

proposal-optional-chaining

TC39 - 提案 地址： https://github.com/tc39/proposal-optional-chaining

1
2
3
4
5
6
7
8
9
const a = {
  b: {
    c: {
      d: {
        e: 0,
      },
    },
  },
};

旧语法 取值

1
2
const eValue = a && a.b && a.b.c && a.b.c.d && a.b.c.d.e ? a.b.c.d.e : "--";
console.log(eValue); // 输出 --

新语法 取值

1
2
const eValue = a.b?.c?.e || "--";
console.log(eValue); // 输出 --

小结

以 “极少、完美、可阅读” 的代码量，实现了最完美的深度取值的问题。可是观察上面的代码方案时，还是不够完美。如果某个用户的余额就是 0 的化，那么岂不是界面上展示的是 “–”。不科学、不科学，继续阅读，揭开疑惑！

proposal-nullish-coalescing

TC39 - 提案 地址： https://github.com/tc39/proposal-nullish-coalescing

1
2
3
4
5
6
7
8
9
const a = {
  b: {
    c: {
      d: {
        e: 0,
      },
    },
  },
};

旧语法 显示余额为 0

1
2
const eValue = a.b?.c?.d?.e === 0 ? 0 : a.b?.c?.d?.e;
console.log(eValue); // 输出 0

新语法 显示余额为 0

1
2
const eValue = a.b?.c?.d?.e ?? 0;
console.log(eValue); // 输出 0

如何接到已有的项目中

  • 升级 eslint-loader 因为低版本的不支持新语法检查
  • 升级为 babel7
  • 安装 babel

安装 Babel 插件

@babel/plugin-proposal-optional-chaining

@babel/plugin-proposal-nullish-coalescing-operator