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 相关文章推荐
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
Aug 14 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
原生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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php 远程图片保存到本地的函数类
2008/12/08 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php explode函数实例代码
2012/02/27 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
python网络爬虫采集联想词示例
2014/02/11 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
局域网标准
2016/09/10 面试题
大学生党员个人剖析材料
2014/10/08 职场文书