一篇文章搞定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 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
Cocos2d实现刮刮卡效果
Dec 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
Smarty模板配置实例简析
2019/07/20 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
angularjs指令之绑定策略(@、=、&)
2017/04/13 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
用python制作游戏外挂
2018/01/04 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
css3中transition属性详解
2014/09/02 HTML / CSS
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
override和overload的区别
2016/03/09 面试题
公开承诺书格式
2014/05/21 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
大学生支教感言
2015/08/01 职场文书
详解Python中__new__方法的作用
2022/03/31 Python
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL