JavaScript使用 nullish coalescing operator（空值合并操作符??）导致部分Android手机打不开H5页面的解决方法

前言

最近H5页面更新了些代码，发布后测试反馈Android手机上页面打不开，iOS是可以打开的。发布之前我在自己的一台Android手机上测试是OK的，然后我在另一台Android手机上测试发现果然打不开。

我猜测肯定是JS代码对浏览器的兼容性有问题，于是我通过git将筛选了可能有问题的提交，依次创建分支进行测试。

最终发现了是使用了空值合并操作符导致的，因为空值合并操作符在部分浏览器上不支持。

空值合并操作符??

我在使用的Dart的时候，就有大量使用可选链式操作符（?.）和空值合并操作符（??），在编程中使用合适的操作符，将大大提交编程效率。

• 空值合并操作符（??）英文名称为“nullish coalescing operator”，是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。见下图
  

• 与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为虚值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为虚值（例如，'' 或 0）时。见下图
  
  在 JavaScript 中只有 8 个 falsy 值（虚值）。

falsy 值 (虚值) 是在 Boolean 上下文中认定为 false 的值。

1. false
2. 0
3. -0
4. 0n
5. NaN
6. null
7. undefined
8. 空字符串: 双引号 "", 单引号 '', 或 模板字面量 ``

解决方法

方法一

使用条件（三元）运算符或if-else语句

方法二

使用Babel

Babel 是一个 JavaScript 编译器
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

后续我会编写一篇关于使用Babel来解决的文章。

如何判断浏览器是否支持ES某一特性

我之前写过一篇文章JavaScript…延展操作符(Spread operator)
中有写到“如何知道node的版本是否支持ES特性”。

浏览器的话，则可以通过http://kangax.github.io/compat-table/es6/这个网站来查询是否支持ES特性

比如你要检测H5中使用空值合并操作符，浏览器是否支持？

1. 打开要检测手机的浏览器
2. 用浏览器打开http://kangax.github.io/compat-table
3. 点击顶部2016+ （因为空值合并操作符属于ES 2020 feature）
   
4. 搜索“nullish coalescing operator”
   
   从上图可以看到nullish coalescing operator在当前浏览器为Yes，则表示支持空值合并操作符

支持🤟

🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟

• 我会持续编写文章，保持每周至少一篇文章。💪
• 有时候编写一篇文章需要大量时间。💪
• 您只需一秒即可完成【点赞👍或关注❤️】。💪
• 您的支持将给与我更大的动力。💪

🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟