一篇文章搞定JavaScript类型转换(面试常见)


Posted in Javascript onJanuary 21, 2017

为啥要说这个东西?一道面试题就给我去说它的动机。

题如下:

var bool = new Boolean(false);
if (bool) {
 alert('true');
} else {
 alert('false');
}

运行结果是true!!!

其实啥类型转换啊,操作符优先级啊,这些东西都是最最基本的。犀牛书上有详细的介绍。但我很少去翻犀牛书的前5章。。。

比如说优先级那块儿,很多书都教育我们,“不用去背诵优先级顺序,不确定的话,加括号就行了。“平常我们写代码时也确实这么做的。

但现实是啥呢?面试时会出这种题,让你来做。。。真不知道这种题的意义是啥。。。

抱怨到此为止,本文尝试来解决类型转换问题,争取把《JS权威指南》49页那个表背下来。

都有哪些东西是假值?

共6个:

0或+0、-0,NaN
""
false
undefined
null

上面的顺序是按照基本类型来排列的。

除此之外的一律不是!!哪怕是如下形式:

Infinity
'0'、'false'、" "(空格字符)
任何引用类型:[],{},function(){}

if (a && b)的正确理解方式是:a && b进行表达式求值后,然后再转换为Boolean类型。

&&是种短路语法,求值后不一定是个Boolean类型,更不是两边转化布尔值再运算。

比如 2&&3 的结果是3,不是true。

所以if(a && b),我们平常理解的那种,"如果a和b同时为真的话",是一种错误的描述方式。

其他基本类型转化为字符串,基本和预期的一样:

console.log("" + null);   // "null"
console.log("" + undefined); // "undefined"
console.log("" + false);   // "false"
console.log("" + true);   // "true"
console.log("" + 0);     // "0"
console.log("" + NaN);    // "NaN"
console.log("" + Infinity); // "Infinity"

其他基本类型转化为数字,需要特殊记忆:

console.log(+null);     // 0
console.log(+undefined);   // NaN
console.log(+false);     // 0
console.log(+true);     // 1
console.log(+"");      // 0
console.log(+'1');      // 1
console.log(+'1x');     // NaN

其中null,空字符是0,undefined是NaN。

以上,基本类型转换都说明白了。

下面来看看引用类型转换为基本类型。

引用类型转换为布尔,始终为true

引用类型转换为字符串

1.优先调用toString方法(如果有),看其返回结果是否是原始类型,如果是,转化为字符串,返回。

2.否则,调用valueOf方法(如果有),看其返回结果是否是原始类型,如果是,转化为字符串,返回。

3.其他报错。

引用类型转化为数字

1.优先调用valueOf方法(如果有),看其返回结果是否是基本类型,如果是,转化为数字,返回。

2.否则,调用toString方法(如果有),看其返回结果是否是基本类型,如果是,转化为数字,返回。

3.其他报错。

首先我们看看常见引用类型toString和valueOf返回什么?

var a = {};
console.dir(a.toString());  // "[object Object]"
console.dir(a.valueOf());  // 对象本身
var b = [1, 2, 3];
console.dir(b.toString());  // "1,2,3"
console.dir(b.valueOf());  // 对象本身
var c = [[1],[2]];
console.dir(c.toString());  // "1,2"
console.dir(c.valueOf());  // 对象本身
var d = function() {return 2};
console.dir(d.toString());  // "function() {return 2}"
console.dir(d.valueOf());  // 对象本身

因此对应的转换为字符串和数字的情形是:

var a = {};
console.dir(a + "");     // "[object Object]"
console.dir(+a);       // NaN
var b = [1, 2, 3];
console.dir(b + "");     // "1,2,3"
console.dir(+b);       // NaN
var c = [[1],[2]];
console.dir(c + "");     // "1,2"
console.dir(+c);       // NaN
var d = function() {return 2};
console.dir(d + "");     // "function () {return 2}"
console.dir(+d);       // NaN

再来个报错的情形:

var a = {};
a.toString = function() {return {};}
console.log("" + a);     // 报错
console.log(+a)       // 报错

以上类型转换规律基本说完。

最后来说一下万恶的“==”

面试题如下:

var a = false;
var b = undefined;
if (a == b) {
 alert('true');
} else {
 alert('false');
}

本以为会弹出true的。天那!为啥是false?

哈哈。。。

双等号,如果两边类型不同,会有隐式转换发生。犀牛书75页总结如下:

1,null和undefined,相等。

2,数字和字符串,转化为数字再比较。

3,如果有true或false,转换为1或0,再比较。

4,如果有引用类型,优先调用valueOf。

5,其余都不相等。

因此有:

console.log(undefined == false); // false
console.log(null == false);   // false
console.log(0 == false);     // true
console.log(NaN == false);    // false
console.log("" == false);    // true

0 == false之所以为true根据第3条。

"" == false之所以为true根据第3条,变成了"" == 0,再根据第2条。

第4条再来一个例子:

console.log([[2]] == '2')

其上结果为true,原因如下:

[[2]]的valueOf是对象本身,不是基本类型。

尝试调用toString的结果是'2'。

因此变成了'2'和数字2的比较。根据第2条,相等。WTF!!

最后说句,使用"==="就没有这些问题了。

以上所述是小编给大家介绍的一篇文章搞定JavaScript类型转换(面试常见),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 #Javascript
Mongoose学习全面理解(推荐)
Jan 21 #Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 #Javascript
vue实现添加标签demo示例代码
Jan 21 #Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 #Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 #Javascript
Bootstrap框架安装使用详解
Jan 21 #Javascript
You might like
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
javascript实现评分功能
2020/06/24 Javascript
Python如何实现MySQL实例初始化详解
2017/11/06 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python读写csv文件方法详细总结
2019/07/05 Python
python3实现mysql导出excel的方法
2019/07/31 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
2014年检验科工作总结
2014/11/22 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python