专栏首页云前端[译] 如何处理 JavaScript 比较中的临界情况

[译] 如何处理 JavaScript 比较中的临界情况

  • 原文地址:https://medium.com/javascript-in-plain-english/how-to-handle-comparison-corner-cases-c96ae9a17d4a
  • 原文作者:Alen Vlahovljak
  • 译文出自:"掘金翻译计划"(https://github.com/xitu/gold-miner)
  • 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2020/how-to-handle-comparison-corner-cases.md

?Joshua Aragon 拍摄并发布在 ?Unsplash

“在任何一项足够先进的技术和魔法之间,我们无法做出区分。” — Arthur C. Clarke (?克拉克基本定律三)

在我们开始熟悉 JavaScript 的临界情况之前,我想先区分一下 临界情况(Corner Case)边界情况(Edge Case)

我们可以说 边界情况(Edge Case)是一种仅发生在最小化或最大化参数时的问题。预测这种问题是一项有益之举,因为这些情况可能会被忽视或低估。比如,一台全力运转的 PC 可能会过热,其性能也可能有所折损。

我也想介绍另一种 边界情况(Boundary Case)(这也是一个值得怀疑的问题)。它可能会发生在某个参数逾越了最小化或最大化限制的时候。

那么 临界情况 呢?我并不想给出任何定义,因为在你看过下面的例子之后,你将能自己做到这点。

你将难以置信

如果我问你某些事情能否等于其自己的否定,你的答案会是什么?你肯定会说这是一派胡言,但是:

var arr1 = [];
var arr2 = [];

if (arr1 == !arr2) {
    console.log("Yes, it's true!");
}

if (arr1 != arr2) {
    console.log("It's true again!");
}

你可能会认为 JS 是一个疯狂的语言,并且这本不应该发生在 JS 这样流行的语言中。这个例子看起来很愚蠢,因为你在实际中绝不会对变量去比较其自身的否定。但这是个帮助你理清思绪的绝佳例子。

你压根不应该比较数组和否定的数组。 不应该以这种方式设计代码。上例就是个绝佳的反例。

在下一个例子中,我将细致地解释发生了什么,所以你会对算法做了什么有个清楚的想象:

var arr1 = [];
var arr2 = [];


//1. arr1 == !arr2
//2. [] == false 
//3. "" == false
//4. "" == 0
//5. 0 == 0 
//6. 0 === 0 
if (true) console.log("Yes, it's true!");

首先,我将引用 ?文档 中的规则。在以上代码的第 6 行,比较了一个基本类型值和一个非基本类型值。在这种情况下,采用规则 №11 。该算法的结果是一个空字符串。

在下一步中,将一个空字符串和 false 相比较。根据算法,采用规则 №9 。再下一步(第 8 行)则采用规则 №5 。第 5 步成了比较两个数字。因为使用了相等性比较,我们将会调用严格相等性比较算法

最后一步从严格相等性比较中返回了一个 true。第二个例子更实用一点,因为我们使用了不等于(双等于号的否定)- 检查是否强制相等:

var arr1 = [];
var arr2 = [];


//1. arr1 != arr2
//2. (!(arr1 == arr2))
//3. (!(false))
if (true) console.log("It's true again!");

鉴于我们比较的是两个非基本类型,这就意味着会执行一个同一性比较。 等同于采用了严格相等性比较。

别惹布尔值

让我们谈谈布尔值极其与抽象相等性的联系。这是你会经常碰到的问题。我们应该看看会发生的临界情况:

var students = [];


if (students) {
    console.log("You can see this message!");
}

if (students == true) {
    console.log("You can't see this message!");
}

if (students == false) {
    console.log("Working!");
}

明确的比较有时反倒会带来不必要的麻烦。 在第二个 if 子句中,我们将数组和布尔值做了比较。你可能认为该操作的结果应当为布尔值 true,但并非如此。严格相等性比较也有同样的效果。

比较一个数组和一个布尔值会引起许多临界情况。在我们看例子之前,我要给你个提示:永远不要对布尔值(true 和 false)使用双等于号。让我们分析下算法是如何工作的:

var students = [];


//** if(students) **//
// 1. students 
// 2. Boolean(students)
if (true) console.log("You can see this message!");

//** if(students == true) **//
// 1. "" == true
// 2. "" == 1
// 3. 0 === 1
if (false) console.log("You can't see this message!");

//** if(students == false) **//
// 1. "" == false
// 2. "" == 0
// 3. 0 === 0
if (true) console.log("Working!");

首个 if 子句是自解释的,所以我不会费时赘述。一如之前的例子,我引用了 ?文档 中的规则。当其中一个被比较的值是非基本类型时,比较数组和布尔值会调用 ?ToPrimitive() 抽象操作(规则 №11)。

之后的三步(译注:第二个 if 子句)直接了当。首先,将一个布尔值转换为一个数字(规则 №9:?ToNumber(true)),接下来字符串变为数字(规则 №5:?ToNumber(“”)),最后一步则是执行一次严格相等性比较。第三个子句同样如此。

强制转换的风险之一就是抽象操作 ToNumber()。我不确定将一个空字符串转换成 0 是否应该。返回 NaN 其实会更好,因为 NaN 表示了一个非法的数字。

推论:无意识的输入总会产生无意识的输出。不必总是显式比较,隐式比较有时比前者更佳。

检查数组值的存在性最好的办法就是明确的检查 .length 以确定其是个字符串还是个数组:

const arr1 = [1, 2, 3];
const arr2 = [];


if (arr1) {
    console.log("You should see this message!");
}

if (arr1.length) {
    console.log("Array is not empty!");
}


if (arr2) {
    console.log("You should not see this message!");
}

if (arr2.length) {
    console.log("You can't see this message!");
}

深层检测更为可靠。如你所见,一个空数组将返回 true (强制转换为布尔值之后)。处理对象是也应采用同样的办法 -- 总是做深层检查。当我们想要确定类型是字符串还是数组时,使用 typeof 操作符(或 Array.isArray() 方法)。

说明

你必须遵守若干准则以避免陷入临界情况的陷阱。随处使用的双等号是把双刃剑。 应谨记当两侧被比较的值是 0、一个空字符串或只包含空格的字符串时,使用双等号是个不好的做法。

下一件应牢记之事是避免对非基本类型使用双等号。唯一能使用它的时机是一致性检查时。 但我也不能说这是 100% 安全的,因为它已经足够接近临界情况,不值得冒险。

?ECMAScript 6 引入了一个新的工具方法 ?Object.is()。借助该方法,我们终于可以在无副作用的情况下执行一致性比较。最后我们可以讲,使用双等号只对基本类型安全,对非基本类型则不安全。

最后但并非最不重要的是要避免对布尔值(truefalse)使用双等于号。允许隐式的布尔值强制转换(调用 ToBoolean() 抽象操作)会更好。如果不能启用隐式强制转换,又只能对布尔值(truefalse)使用双等号,那就应该 改为三等号

总结

大多数临界情况都能通过重构代码得以避免。

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从Rust到远方:ASM.js星系

    来源: https://mnt.io/2018/08/28/from-rust-to-beyond-the-asm-js-galaxy/

    MikeLoveRust
  • 前端-WebAssembly 对比 JavaScript 及其使用场景

    现在,我们将会剖析 WebAssembly 的工作原理,而最重要的是它和 JavaScript 在性能方面的比对:加载时间,执行速度,垃圾回收,内存使用,平台 ...

    grain先森
  • Chrome将内置原生的懒加载功能

    未来Google Chrome的某个版本将支持懒加载,这是一种延迟加载图像和iframe的机制,如果它们加载时在用户的屏幕上不可见的话。

    疯狂的技术宅
  • JavaScript优化技巧

    作为开发人员,我们一直在寻找让我们的代码更快更好的方法。但在此之前,编写高性能代码需要做三件事:

    前端小智@大迁世界
  • 前端-现代 js 框架存在的根本原因

    我曾见过很多很多人盲目地使用(前端)框架,如 React,Angular 或 Vue 等等。这些框架提供了许多有意思的东西,然而通常人们(自以为)使用框架是因为...

    grain先森
  • JavaScript 性能优化技巧分享

    JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中。为了提高Web应用的性能,从 JavaScript 的性能优化方向入...

    葡萄城控件
  • 2019年,Flutter 和 React Native 谁主沉浮?

    本文是帮助你了解这两个应用程序开发框架区别指南。咱们知道,几年前开发和维护iOS和Android的应用程序曾经是一项艰巨的任务(独立的代码库|独立的开发团队|开...

    前端小智@大迁世界
  • 临界Hashgard:读懂智能合约与虚拟机,看这一篇就够了!

    本次,临界 (Hashgard) 旗下的研究机构Hashgard Labs与BKFUND研究院共同完成了一篇研究报告,对虚拟机进行了深度分析。

    区块链观察
  • JavaScript 性能优化技巧分享

    葡萄城控件
  • JavaScript 性能优化技巧分享

    英文: Ivan Čurić 译文:葡萄城控件 http://www.cnblogs.com/powertoolsteam/p/javascript-per...

    企鹅号小编
  • Google Chrome 工程师:JavaScript 不容错过的八大优化建议

    本文为 Google Chrome 团队的开发项目工程师 Addy Osmani 在PerfMatters 2019 网页性能大会发表的“JavaScript性...

    苏南
  • WebAssembly 不完全指北

    随着JavaScript的快速发展,目前它已然成为最流行的编程语言之一,这背后正是 Web 的发展所推动的。但是随着JavaScript被广泛的应用,它也暴露了...

    腾讯IVWEB团队
  • 编写高质量可维护的代码之优化逻辑判断

    ? 这是第 64 篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队 关注我们吧~

    政采云前端团队
  • 基于QT的webkit与ExtJs开发CB/S结构的企业应用管理系统

    一:源起 1.何为CB/S的应用程序     C/S结构的应用程序,是客户端/服务端形式的应用程序,这种应用程序要在客户电脑上安装一个程序,客户使用这个程序与...

    liulun
  • Kotlin Native凭什么吸引你

    IT大咖说
  • 都2021年了,你怎么还在说webassembly?

    What is webssembly? 首先,按照惯例,科普下啥是 webssembly 一种新的、抽象的虚拟机指令集(W3C)标准; 四大浏览器已经支持该标...

    QQ音乐前端团队
  • JavaScript大师必须掌握的12个知识点

    为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

    Fundebug
  • 一文带你彻底搞懂Java和JavaScript的区别与相似之处(纯干货建议收藏)

    Java是一种OOP(面向对象的编程语言)、基于类的、具有VM(虚拟机)平台的多平台编程语言。OOP 是一种基于包含代码和数据的对象概念的编程范式。虚拟机可帮助...

    海拥
  • 7个 Javascript 面试题及回答策略 [每日前端夜话0x30]

    这个问题用来评估基础编码知识。答案可以有多种,所以应该注意倾听具体的问题,并尽量全面回答,来展示自己对单体应用与微服务架构的理解。

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券