JavaScript在应用中的技巧(二)
今天浏览一些技术网站,看到这个题目。虽然觉着代码这么写的可能性低之又低,但是却也考验对js了解的程度。
在 JavaScript 中 (a ==1 && a== 2 && a==3) 可能为 true 吗?解释说nothing is impossible!
这里是两个可能的答案:
<script>
const a = {
i: 1,
toString: function () {
return a.i++;
}
} if(a == 1 && a == 2 && a == 3) {
console.log('Hello World!');
}
</script>
运行代码
<script>
const a = {
i: 1,
valueOf: function () {
return a.i++;
}
} if(a == 1 && a == 2 && a == 3) {
console.log('Hello JavaScript!');
}
</script>
运行代码
最根本的还是强制类型转换。类型==,===运算符和强制转换:
先看个表达式:
<script>
var res = "1.0e0" == { valueOf: function() { return true; } };
console.log(res);
</script>
运行代码
是的,这个结果也是 true。
对于这个表达式我们能够注意到:
它们的类型是不一样的。原因是在运算的时候进行了强制转换。在比较之前,它们被转换成了数字。
字符串”1.0e0“被解析成数字1,而匿名对象通过调用自身的valueOf方法得到true,然后再转换成数字1。
这也是a可以同时为1,2,3的原因。
我们需要知道的是:
1、如果表达式两边的数据类型不一致,==运算符两边会进行强制转换;
2、此对象在被强制转换时,会自动优先调用了自身的valueOf方法
3、如果此对象没有valueOf方法,则会继续尝试调用toString方法
4、如果将==运算符改成===运算符,则不会强制转换;
5、如果表达式两边数据类型一致,==运算符和===运算符返回的结果是一致的
下图为==运算符针对不同类型参数的强制转换规则:

规则看着挺复杂,不幸的是,它其实也是这么复杂。所以在比较操作中,如果不同类型进行比较,不建议使用==运算符,而是使用严格相等===运算符,因为使用严格相等运算符读者会非常清晰地知道:在比较中没有涉及任何强制转换。否则,你需要读者准确的记住这些强制转换规则以解读代码的行为。
另外一个增加代码可读性的方法就是显示的进行数据类型转换:
代码1:
var today = new Date(); if(form.month.value == (today.getMonth() + 1) &&
form.day.value == today.getDate()){
//happy birthday...
}
代码2:
var today = new Date(); if(+form.month.value == (today.getMonth() + 1) &&
+form.day.value == today.getDate()){
//happy birthday...
}
很显然,代码2更加清晰地向读者传达了代码在做什么样的转换,它只是显式的使用Number函数或者一元运算符 + 将值转换为数字,而不要求读者记住这些转换规则。
JavaScript在应用中的技巧(二)的更多相关文章
- JavaScript在应用中的技巧(一)
分享一些在JavaScript中遇到的一些实用的技巧. 理解JavaScript的数值型数据类型 JavaScript的数值型数据类型只有一种:number.即不管是整数还是浮点数,JavaScrip ...
- (译文)12个简单(但强大)的JavaScript技巧(二)
原文链接: 12 Simple (Yet Powerful) JavaScript Tips 其他链接: (译文)12个简单(但强大)的JavaScript技巧(一) 强大的立即调用函数表达式 (什么 ...
- Javascript的闭包及其使用技巧实例
Javascript的闭包及其使用技巧实例 一.闭包的基本概念 闭包(Closure)是一个引用了自由变量的函数,记录了该函数在定义时的scope chain.又称词法闭包(Lexical Closu ...
- SQL开发技巧(二)
本系列文章旨在收集在开发过程中遇到的一些常用的SQL语句,然后整理归档,本系列文章基于SQLServer系列,且版本为SQLServer2005及以上-- 文章系列目录 SQL开发技巧(一) SQL开 ...
- 更快学习 JavaScript 的 6 个思维技巧
更快学习 JavaScript 的 6 个思维技巧 我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前: 有些概念可能会造成混淆,尤其当你是从其他语言转过来的时候 ...
- 细数Javascript技术栈中的四种依赖注入
作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道 ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- SQL开发技巧(二) 【转】感觉他写的很好
本文转自: http://www.cnblogs.com/marvin/p/DevelopSQLSkill_2.html 本系列文章旨在收集在开发过程中遇到的一些常用的SQL语句,然后整理归档,本系列 ...
- Eclipse用法和技巧二十四:当git遇上eclipse
git是非常优秀的代码管理工具,eclipse是非常不错的,免费的IDE.工作中两者碰到一起,有点麻烦了:eclipse对于每个项目会生成一些特定的文件,而这些文件又不是项目必须的,并且每个人的配置是 ...
随机推荐
- Angular页面加载后自动弹窗
首先在控制器内写好一个弹窗,我用的是ionic的默认提示对话框 // 一个确认对话框 $scope.showConfirm = function() { var confirmPopup = $ion ...
- 15. leetcode 349. Intersection of Two Arrays
Given two arrays, write a function to compute their intersection. Example: Given nums1 = [1, 2, 2, 1 ...
- Scala 令人着迷的类设计
尽管 Scala 和 Java 有很多相同的地方, 但是在类的声明, 构造, 访问控制上存在很大的差异, 通过本文你也能看到相比较 Java 很多啰嗦的模板代码, Scala 更加的简洁, 使用 Sc ...
- 在windows平台下electron-builder实现前端程序的打包与自动更新
由于8月份上旬公司开发一款桌面应用程序,在前端开发程序打包更新时遇到一些困扰多日的问题,采用electron-builder最终还是得到解决~ 以下是踩坑的过程及对electron打包与更新思路的梳理 ...
- CSS规范--春风十里不如写好CSS
先吟几句: 最近看了看春风十里不如你,本来很少看剧的,暑假有点闲就看了,感觉不错,挺喜欢这部剧,就套了个名字,嘿嘿嘿.剧里面印象深刻的是<致橡树>这首诗,念几句: 我如果爱你,绝不像攀援的 ...
- oracle 错误码 ORA-00119 / ORA-00130
今天启动oracle时居然报错,错误信息如下: SQL> startup ORA-00119: invalid specification for system parameter LOCAL_ ...
- 举例详解Python中的split()函数的使用方法
这篇文章主要介绍了举例详解Python中的split()函数的使用方法,split()函数的使用是Python学习当中的基础知识,通常用于将字符串切片并转换为列表,需要的朋友可以参考下 函数:sp ...
- 【LeetCode】数组-1(643)-返回规定长度k的最大子数组的平均数
好久没有刷LeetCode了,准备重拾并坚持下去,每天刷个两小时.今天算是开始的第一天,不过出师不利,在一道很简单的题目上墨迹半天.不过还好,现在踩过的坑,应该都不会白踩,这些可能都是以后程序员路上稳 ...
- php通用的树型类创建无限级树型菜单
生成树型结构所需要的2维数组,var $arr = array()数组格式如下: array( 1 => array('id'=>'1','parentID'=>0,'name'=& ...
- .NET Core迁移技巧之web.config配置文件
大家都知道.NET Core现在不再支持原来的web.config配置文件了,取而代之的是json或xml配置文件.官方推荐的项目配置方式是使用appsettings.json配置文件,这对现有一些重 ...