尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

jstips 第 24 期:为什么应该用 `===` 而不是 `==`——严格相等与宽松相等深度解析

jstips 第 24 期:为什么应该用 `===` 而不是 `==`——严格相等与宽松相等深度解析 教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载导读宽松相等在比较时会按需进行隐式类型转换coercion而严格相等不做任何转换直接同时比较值与类型。本篇文章以 jstips 仓库第 24 期技巧2016-01-24-use_instead_of.md为主体系统梳理两者在类型转换、隐式规则、常见坑点上的差异并给出可落地的编码建议。读完本文你将能准确预判任意比较表达式的结果、避免隐式转换带来的隐蔽 Bug并为团队统一制定相等性判断规范。与的本质区别JavaScript 提供了两套相等性比较运算符相等equality与!不相等比较时如果两边类型不同会先做自动类型转换再比较值严格相等identity/strict equality与!严格不相等不执行任何类型转换直接比较值的同时还要比较类型是否一致。从字面上看似乎更方便但它把类型不同的问题隐藏在背后常常带来与直觉相反的结果。原文档给出的经典示例可原样复制到控制台验证[10] 10 // is true [10] 10 // is false 10 10 // is true 10 10 // is false [] 0 // is true [] 0 // is false false // is true but true a is false false // is false可以看到的一系列结果都源于隐式类型转换而在类型不一致时一律返回false行为稳定、可预测。这也是 jstips 该期技巧tip-number: 24作者 bhaskarmelkani想传达的核心建议默认使用只在明确需要类型转换语义时才使用。隐式类型转换Coercion是如何发生的当两侧类型不一致时引擎会按一定的规则把其中一个操作数转换为另一个的类型再执行比较。常见情形包括字符串与数字字符串被转换为数字后再比较因此10 10为true数组与数字/字符串数组先调用toString()得到字符串再参与后续转换因此[10] 10会先变成10 10最终为true空数组与数字[] 0中[]的toString()结果是再被转换为数字0因此结果为true布尔值参与比较布尔值会先被转换为数字true→1false→0所以 false实际等价于 0为true而true a实际等价于1 aa转为数字是NaN所以为false。与之对应jstips 第 23 期技巧converting-to-number-fast-way.md演示的one、-one一元运算符本质上就是利用了这套隐式转换机制来刻意完成类型转换——这说明 coercion 本身不是错误错误的是在不知情的情况下依赖它。一组最容易踩坑的经典场景1.undefined与null在宽松相等中undefined与null被视为相等而严格相等认为它们完全不同。这在 jstips 第 5 期技巧differences-between-undefined-and-null.md中有明确的对照示例null undefined // true null undefined // false该期文档还给出了正确的判空姿势判断undefined用typeof variable undefined判断null用variable null——两者都建立在严格相等或显式类型判断之上刻意避开了的模糊语义。2. 空字符串、0、false的混同由于会先把布尔值转成数字、0、false在宽松比较中几乎可以互相相等这在实际业务里极易造成逻辑误判。例如if (input false)会把空字符串、0一并当成假而你原本可能只打算判断false。3.NaN的特殊性即使换成NaN NaN依然为false因为NaN按规范不等于任何值包括自身。如果确实需要是否 NaN的判断应使用Number.isNaN()或Object.is()。jstips 第 68 期技巧why-you-should-use-Object.is()-in-equality-comparison.md-in-equality-comparison.md)专门讨论了这一点0 // true null undefined // true [1] true // true NaN NaN // false Object.is(NaN, NaN) // true该期文档把三种比较方式放在一起对照会强制转换宽松但易出错不转换更严格但处理不了NaN与-0/0的特例Object.is()则在的基础上补齐了NaN、-0与0的特殊语义适合对精度有更高要求的场景。对大多数业务代码而言仍是首选默认项。真值Truthy与假值Falsy判断的配套知识点的模糊性常常与真假值判断纠缠在一起。JavaScript 中所有值都可被归类为 truthy 或 falsy其中 falsy 值包括false、0、-0、0n、、null、undefined、NaN。jstips 第 30 期技巧converting-truthy-falsy-values-to-boolean.md给出了用!!快速得到布尔值的做法!! // false !!0 // false !!null // false !!undefined // false !!NaN // false !!hello // true !!1 // true !!{} // true !![] // true需要特别警惕falsy 值集合与 false的结果并不完全一致。例如[]是 truthy!![] true但[] false却为true因为[]先转成再转成0与false转成的0相等。这类悖论正是隐式转换的典型产物也是坚持用或显式布尔转换的强有力理由。实践建议何时用何时可容忍从上述分析可以提炼出一套实用的判断准则默认一律使用/!。类型由你掌控语义清晰不会因为操作数来自函数参数、接口返回值或 DOM 取值而悄悄变脸。只在两种场景下谨慎使用明确想利用 coercion 简化比较例如value null同时判断null与undefined前提是团队接受这种写法并注释说明与库或宿主 API 的既有约定保持一致。判空、判类型、判 NaN 使用专门手段typeof x undefined、x null、Number.isNaN(x)或Object.is(x, NaN)不要依赖的巧合。配合 ESLint 的eqeqeq规则在 CI 层面强制约束从源头杜绝的滥用。小结的自动类型转换让代码表面简洁却把类型语义藏进了隐式规则里同时比较值与类型虽然多写一个字符却换来可预测、可维护的行为。jstips 第 24 期技巧给出的四个对照示例足以说明问题同样的操作数与结果完全不同而后者总是与开发者写下的代码字面含义一致。如果你想继续深入这一主题仓库中还有几篇同主题的延伸资料可以对照阅读differences-between-undefined-and-null.mdundefined与null的严格/宽松比较差异converting-truthy-falsy-values-to-boolean.mdtruthy/falsy 与布尔转换why-you-should-use-Object.is()-in-equality-comparison.md-in-equality-comparison.md)Object.is()对的补充converting-to-number-fast-way.md利用 coercion 完成类型转换的正面用例。赞分享教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载相关推荐jstips 第 68 期解读为什么 JavaScript 相等比较应该使用 Object.is()jstips 第 68 期解读为什么 JavaScript 相等比较应该使用 Object.is 本文基于 jstips 仓库 第 68 期中文技巧 in e教程JavaScript 相等比较深度解析为什么你应该用 Object.is() 替代 与 JavaScript 相等比较深度解析为什么你应该用 Object.is 替代 与 导读 JavaScript 的相等比较一直是开发中的经典坑教程JS Tips 第 24 期使用 严格相等运算符替代 JS Tips 第 24 期使用 严格相等运算符替代 在 JavaScript 日常开发中 宽松相等会在必要时自动进行类型转换而教程创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表