前端常见bug系列4: JavaScript中忘记类型转换所导致的条件判断错误举例

一、忘记类型转换的小数比较错误

举个例子,我们要进行一个字符串型的小数的比较:'8.8'>'8.7',结果自然是true。

那么'8.8'>'8.10'呢?结果仍然是true,但愿你没有将它误以为是8.8>8.10

二、忘记类型转换的版本号比较错误

类似上面的问题,在进行版本号比较时,一样存在。比如,我们这么比较'8.8.1'>'8.10.1',结果就是错误的。合理的比较方法应该是将两个待比较的版本号按'.'作为分隔符进行拆分,并将每一位转换成数字,然后按位比较。

三、字符串型的'true','false'条件判断时导致的错误

来看这个语句:

if('false') console.log(1);

此时你很可能是希望该条件判断为false,而实际上它却是true。这样直接写出来相信每个人都不会弄错,问题在于上面这个语句中的'false',往往是经过诸多计算后得到的一个结果,或者是来自于接口的某个数据项,在这些诸多的表面现象掩盖之下的字符型'false',有时很容易被疏忽。

类似这样的容易出现错误的语句还有:

if('0') console.log(1);
if('undefined') console.log(1);
var a;
if(typeof a) console.log(1);

诸如此类,不一而足。类似这种条件判断语句,在代码中再常见不过,而且往往是业务逻辑执行与否的判断开关,一旦出现判断错误,则整个分支的执行都是错误的,影响相当严重。如果类似上述的错误语句出现在基础工具方法中,影响的面还将更大。所以,可得长点心了!

时间: 2024-07-31 08:36:24

前端常见bug系列4: JavaScript中忘记类型转换所导致的条件判断错误举例的相关文章

前端常见bug系列3:<input type="text">中emoji表情与文字并存时表情被截掉一部分

比如,有这个一个demo页面: <head> <meta charset="UTF-8"> <meta name="format-detection" content="telephone=no, address=no, email=no, time=no"> <meta name="viewport" content="width=device-width,user-sca

前端常见bug系列1:容易被误解的:last-child 和 :first-child

用某个选择器过滤出来一个元素集合,当我们想选中最后一个元素的时候,是不是很容易想到:last-child?比如,有下面一段CSS和HTML片段: <style> .section{ margin-bottom: 50px; } .section1-item:last-child{ color: blue; } </style> <section class="section section1"> <header>header</he

前端常见bug系列2::last-of-type 和 :first-of-type的误用

上一篇中曾提到,someselecttor:last-chid 所表示的并不是someselecttor选中的节点集合的最后一个.那么,怎么达到这个效果呢?对,可以用:last-of-type.来个例子试试看吧! <style> .section{ margin-bottom: 50px; } .section1-item:last-of-type{ color: green; } </style> <section class="section section1&

从零开始学_JavaScript_系列(二)——弹框及读取、条件判断、事件处理、注释、图片、超链和div

(11)导入js文件的潜在问题 假如有一个 <script src="111.js"> js脚本1 </script> 那么,由于导入了111.js的原因,"js脚本1"事实上是不会被执行的. 准确的说,包含导入js脚本功能的script标签,里面的脚本都不会执行(不能保证全部,但目前学到的都不会被执行,如果有可以执行的,其后会在这里修改说明).   (12)补充说明适应人群 至少要有一点的编程概念,毫无编程概念的话,恐怕是有一些难度的. 由

javascript中数据类型转换详解

在js中,数据类型转换分为显式数据类型转换和隐式数据类型转换. 1, 显式数据类型转换 a:转数字: 1)Number转换: 代码: vara = "123";   a = Number(a); 注意: a) 如果转换的内容本身就是一个数值类型的字符串,那么将来在转换的时候会返回自己. b) 如果转换的内容本身不是一个数值类型的字符串,那么在转换的时候结果是NaN. c) 如果要转换的内容是空的字符串,那以转换的结果是0. d) 如果是其它的字符,那么将来在转换的时候结果是NaN. 2

Nginx PHP-Fcgi中因PHP执行时间导致504 Gateway Timeout错误解决记录_nginx

昨天,一个程序需要导出500条数据,结果发现到150条是,Nginx报出504 Gateway Timeout错误 经观察,发现大约30秒时超时,php.ini中执行时间配置已经是300秒: 复制代码 代码如下: max_execution_time = 300 再查nginx的相关配置,无果. 写了一个php的测试页再测: 复制代码 代码如下: echo 'aaa'; set_time_limit(0); sleep(40); echo 'aa'; 依然超时,可以确定set_time_limi

从指向看JavaScript中的难点

前言 开写前大家先来理解一下指向:指向,即目标方向.所对的方位. 很多人刚刚接触前端甚至一些"老"前端都经常会在JavaScript中所谓的难点,如this,原型,继承,闭包等这些概念中迷失了自我.接下来这篇文章会把我自己对于JavaScript中这些点通过指向的概念做个总结并分享给大家,希望可以帮助大家更好的了解这些所谓的难点. 一.this this是什么?其实它本身就是一种指向.this指向可以分为以下几种情况 普通调用,this指向为调用者 call/apply调用,this指

Javascript中数组的使用

Array在Javascript程序开发中是一个经常使用到.一个数组可以存储Javascript支持的任何数据类型. 1.基本知识点 //创建一个对象并初始化它 var preInitArray = new Array("First Item", "Second Item", "Third Item"); for (var i = 0; i < preInitArray.length; i++) { console.log(preInitA

Javascript中字符串转数字方法介绍

们知道最简洁的数字转字符串方法是: 强制类型转换 整数要转换成字符串,必须使用Integer.toString()静态方法或者String.valueOf()静态方法,把字符串转换为整数,必须使用Integer.valueOf(). 可见,不能把JavaScript中的类型转换看作为"强制类型转换". 还可使用强制类型转换(type casting)处理转换值的类型.使用强制类型转换可以访问特定的值,即使它是另一种类型的. ECMAScript中可用的3种强制类型转换如下: Boole