一篇文章搞定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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
jQuery 解析xml文件
Aug 09 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 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 中的一些经验积累
2006/10/09 PHP
PHP读取MySQL数据代码
2008/06/05 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
php错误日志简单配置方法
2016/07/11 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
六道php面试题附答案
2014/06/05 面试题
机械加工与数控专业自荐书
2014/06/04 职场文书
绿色环保口号
2014/06/12 职场文书
单位实习鉴定评语
2015/01/04 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
浅析JavaScript中的变量提升
2022/06/01 Javascript