JavaScript中的一些隐式转换和总结(推荐)


Posted in Javascript onDecember 22, 2017

js中的不同的数据类型之间的比较转换规则如下:

1. 对象和布尔值比较

对象和布尔值进行比较时,对象先转换为字符串,然后再转换为数字,布尔值直接转换为数字

[] == true; //false []转换为字符串'',然后转换为数字0,true转换为数字1,所以为false

2. 对象和字符串比较

对象和字符串进行比较时,对象转换为字符串,然后两者进行比较。

[1,2,3] == '1,2,3' // true [1,2,3]转化为'1,2,3',然后和'1,2,3', so结果为true;

3. 对象和数字比较

对象和数字进行比较时,对象先转换为字符串,然后转换为数字,再和数字进行比较。

[1] == 1; // true `对象先转换为字符串再转换为数字,二者再比较 [1] => '1' => 1 所以结果为true

4. 字符串和数字比较

字符串和数字进行比较时,字符串转换成数字,二者再比较。

'1' == 1 // true

5. 字符串和布尔值比较

字符串和布尔值进行比较时,二者全部转换成数值再比较。

'1' == true; // true

6. 布尔值和数字比较

布尔值和数字进行比较时,布尔转换为数字,二者比较。

true == 1 // true

许多刚接触js的童鞋看到这么多的转换规则就懵圈了,其实规律很简单,大家可以记下边这个图

JavaScript中的一些隐式转换和总结(推荐)

如图,任意两种类型比较时,如果不是同一个类型比较的话,则按如图方式进行相应类型转换,如对象和布尔比较的话,对象 => 字符串 => 数值 布尔值 => 数值。
另外,我们来看下一些需要"特别照顾"的。

来看一个有趣的题

[] == false;
![] == false;

这两个的结果都是true,第一个是,对象 => 字符串 => 数值0 false转换为数字0,这个是true应该没问题,
第二个前边多了个!,则直接转换为布尔值再取反,转换为布尔值时,空字符串(''),NaN,0,null,undefined这几个外返回的都是true, 所以! []这个[] => true 取反为false,所以[] == false为true。

还有一些需要记住的,像:

undefined == null //true undefined和null 比较返回true,二者和其他值比较返回false
Number(null) //0

曾经看到过这样一个代码:  (!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]*~+[]]] = sb , 你敢相信, 当时就吓了 宝宝一跳。

刚接触到时候,Js很让我困惑,正是由于它‘善变',下面我来总结一下:

7. JS的数据类型: Number,Boolean,String,Undefined,Null,Symbol(es6新定义的)和 Object (注: Array是特殊的Object)

typeof 返回的7中类型: number boolean string object undefined object function

JavaScript中的一些隐式转换和总结(推荐)

MDN 这样介绍Javascript: JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据

8. 下面来看下常见的隐式转换:

基本类型:

 运算符(+,-,*,/,%)操作时 转换类型

”+“ 号运算符 :

JavaScript中的一些隐式转换和总结(推荐) JavaScript中的一些隐式转换和总结(推荐) JavaScript中的一些隐式转换和总结(推荐)

JavaScript中的一些隐式转换和总结(推荐)JavaScript中的一些隐式转换和总结(推荐)

 

 总结: 当加号运算符时,String和其他类型时,其他类型都会转为 String;其他情况,都转化为Number类型 , 注: undefined 转化为Number是 为'NaN‘, 任何Number与NaN相加都为NaN。

 

其他运算符时, 基本类型都转换为 Number,String类型的带有字符的比如: '1a' ,'a1' 转化为 NaN 与undefined 一样。

tip:(1)NaN 不与 任何值相等 包括自身,所以判断一个值 是否为 NaN, 即用 "!==" 即可。

(2) 转换为 Boolean类型为 false 的有:null,0,'',undefined,NaN,false

JavaScript中的一些隐式转换和总结(推荐)

(3)number() 与 parseInt() 都可以将对象转化为Number类型,Number函数要比parseInt函数严格很多。基本上,只要有一个字符无法转成数值,整个字符串就会被转为NaN。

JavaScript中的一些隐式转换和总结(推荐)

Object类型

当object与基本类型运算时:

var obj = {
  toString: function(){
    return 6;
  },
  valueOf: function(){
    return 5;
  }
};
var obj1 = {
  valueOf: function(){
    return 'a';
  },
  toString: function(){
    return 'b';
  }
};

JavaScript中的一些隐式转换和总结(推荐)

JavaScript中的一些隐式转换和总结(推荐)

 

JavaScript中的一些隐式转换和总结(推荐)

JavaScript中的一些隐式转换和总结(推荐)

JavaScript中的一些隐式转换和总结(推荐)

当对 obj,obj1 用Number()和String()换转时

JavaScript中的一些隐式转换和总结(推荐)

JavaScript中的一些隐式转换和总结(推荐)

总结: Number类型会先调用valueOf(), String类型会先调用toString(),  如果结果是原始值,则返回原始值,否则继续用toString 或 valueOf(),继续计算,如果结果还不是原始值,则抛出一个类型错误; 

看如下情况:

JavaScript中的一些隐式转换和总结(推荐)

为什么 {} + [] = 0 ?  因为 javascript在运行时, 将 第一次{} 认为是空的代码块,所以就相当于 +[] = 0.  还有 {} +5 = 5, 同理。

总结:

1. 类型错误有可能会被类型转换所隐藏。

2. “+”既可以表示字符串连接,又可以表示算术加,这取决于它的操作数,如果有一个为字符串的,那么,就是字符串连接了。

3. 对象通过valueOf方法,把自己转换成数字,通过toString方法,把自己转换成字符串。

4.具有valueOf方法的对象,应该定义一个相应的toString方法,用来返回相等的数字的字符串形式。

5.检测一些未定义的变量时,应该使用typeOf或者与undefined作比较,而不应该直接用真值运算。

总结

以上所述是小编给大家介绍的JavaScript中的一些隐式转换和总结(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木的支持!

Javascript 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
原生JS写Ajax的请求函数功能
Dec 22 #Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 #Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 #Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 #Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 #Javascript
Webpack框架核心概念(知识点整理)
Dec 22 #Javascript
详解webpack+express多页站点开发
Dec 22 #Javascript
You might like
十天学会php之第二天
2006/10/09 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python中的两个内置模块介绍
2015/04/05 Python
分享vim python缩进等一些配置
2018/07/02 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
python利用线程实现多任务
2020/09/18 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
中级会计职业生涯规划书
2014/03/01 职场文书
爱耳日活动总结
2014/04/30 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python