一篇文章搞定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 相关文章推荐
JavaScript 数组运用实现代码
Apr 13 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
javascript this指向相关问题及改变方法
Nov 19 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
调整PHP的性能
2013/10/30 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
python单元测试unittest实例详解
2015/05/11 Python
Python编码类型转换方法详解
2016/07/01 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python的常用模块之collections模块详解
2018/12/06 Python
Django获取应用下的所有models的例子
2019/08/30 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
中专自荐信
2013/10/13 职场文书
大学生入党思想汇报
2014/01/01 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2016年父亲节寄语
2015/12/04 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
Python socket如何解析HTTP请求内容
2022/02/12 Python
Python利用capstone实现反汇编
2022/04/06 Python