首页 web前端 js教程 来探讨下JS类型转换的哪些坑

来探讨下JS类型转换的哪些坑

Jan 23, 2017 pm 02:18 PM
js 类型转换

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

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!!
最后说句,使用"==="就没有这些问题了。
本文完。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤 股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤,需要具体代码示例随着互联网和科技的快速发展,股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环,其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息,帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

推荐:优秀JS开源人脸检测识别项目 推荐:优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

如何使用PHP和JS创建股票蜡烛图 如何使用PHP和JS创建股票蜡烛图 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形,通过绘制股票的开盘价、收盘价、最高价和最低价等数据,帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图,并附上具体的代码示例。一、准备工作在开始之前,我们需要准备以下环境:1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

golang函数的类型转换 golang函数的类型转换 Apr 19, 2024 pm 05:33 PM

函数中类型转换允许将一种类型的数据转换为另一种类型,从而扩展函数的功能。使用语法:type_name:=variable.(type)。例如,可使用strconv.Atoi函数将字符串转换为数字,并处理转换失败的错误。

隐式类型转换:类型的不同变体及其在编程中的应用探究 隐式类型转换:类型的不同变体及其在编程中的应用探究 Jan 13, 2024 pm 02:54 PM

探索隐式类型转换的不同类型及其在编程中的作用引言:在编程中,我们经常需要处理不同类型的数据。有时候,我们需要将一种数据类型转换为另一种类型以便进行特定操作或满足特定要求。在这个过程中,隐式类型转换是一个非常重要的概念。隐式类型转换指的是在不需要显式指定转换类型的情况下,编程语言会自动进行数据类型转换的过程。本文将探索隐式类型转换的不同类型及其在编程中的作用,

js和vue的关系 js和vue的关系 Mar 11, 2024 pm 05:21 PM

js和vue的关系:1、JS作为Web开发基石;2、Vue.js作为前端框架的崛起;3、JS与Vue的互补关系;4、JS与Vue的实践应用。

Golang 函数返回值可以强制类型转换吗? Golang 函数返回值可以强制类型转换吗? Apr 13, 2024 am 11:36 AM

Go语言允许函数返回值强制类型转换,其语法格式为value:=variable.(targetType)。强制类型转换可用于将interface{}类型的值转换为特定类型,如map[string]string。注意事项包括类型兼容性、值验证以及谨慎使用。

See all articles