隐式转换、IF判断、逻辑【与、或、非】、三目运算的用法（基础）
1.0 隐式转换
隐式转换 => 隐式的转换数据类型 => js机制(原理),不是语法.判断 => 语法
隐式转换什么时候发生?
- 操作符对操作数的类型是有要求的,如果操作数的类型不符合要求,就会有隐式转换.
- 判断语句的()内的数据类型也是有要求,不符合要求就隐式转换.
- 某些方法的参数的类型是有要求的,不符合要求的隐式转换.
- 算术运算符要求操作数的类型是Number.如果不是,隐式转换成number再计算
- 比较运算符要求操作数的类型是Number.(==除外),如果不是,隐式转换成number在比较
- 判断的()内的数据类型应该是boolean.如果不是,隐式转换成boolean再比较
- alert()的参数类型应该是string.如果不是,隐式转换成string,再弹出
隐式转换的规律是什么?
- 1 * '零' => '零'不是number,需要转换成数字后再和1相乘.
- '零'转换成number是多少? => Number('零') => 返回的值就是'零'转换后的number
- NaN和任何数字进行计算，结果都还是NaN
- 字符串转换成number的规律
- 非数字字符串转换成number都是NaN.
- 空字符串会隐式转换成0
- 纯数字字符串转直接换成number
- 布尔值转换成number
- true是1
- false是0
- undefinded转换成number是NaN
- null转换成number是0
- 把数字开头的字符串转换成数字.
- parseInt('100px') === 100;
- 转换小数.
- parseFloat('1.4px') === 1.4
1 + true;
2.0 字符串的隐式转换
字符串拼接的 + 不是算术运算的 +
如果 + 的操作数有一个是字符串,则这个+就是拼接的 + , 而不是算术的 +
如果 + 的操作数有一个是对象,则这个+就是拼接的 + , 而不是算术的 +
拼接的 + .要求操作数是字符串.不是就隐式转换成字符串.然后再拼接.
<script>100 + '' === '100';100 + true === 101;100 + 'true' === '100true';100 + window === '100[object Window]';</script>3.0 布尔值隐式转换
<body><div id='wrap'></div><script>// 100写在if的判断条件里,100不是布尔值,需要隐式转换为布尔值.// 显示转换100位布尔值: Boolean(100) === true// if (100) {// alert('100是真的');// }// if (window) {// alert('window是true');// }const oDiv = document.getElementById('wrap1');if (oDiv === null) {console.log('div不存在');} else {console.log('div存在');}// 推荐利用隐式转换来判断一个标签的存在与否。if (oDiv) {console.log('div存在');} else {console.log('div不存在');}if (1<2) {console.log('1<2');}if (1<2 === true) {console.log('1<2');}// 哪些值转换成布尔值是false?// 0,NaN,'',undefined,null// 6个数据类型记不住.// 5个但记不住.</script></body>4.0 常见的判断形式
1.如何判断一个div的内容是空的
<script>const oDiv = document.getElementById('wrap');const oText = document.getElementById('text');const oCheck = document.getElementById('check');console.dir(oDiv);console.dir(oText);if (oDiv.innerHTML === '') {console.log('div的内容是空的');}if (oDiv.innerHTML) {console.log('div的内容不是空的');} else {console.log('div的内容是空的');}</script>2.如果判断一个文本框是空的
<script>if (oText.value) {console.log('文本框有输入内容');} else {console.log('文本框没有输入内容');}
</script>3.如何判断一个div的class是不是active
<script>if (oDiv.className === 'active') {console.log('oDiv的class是active')}
</script>4.如何判断一个复选框是不是打钩的.
// checked是一个布尔属性,属性值是布尔值.
// true表示打钩，false表示不打钩。
<script>console.log(oCheck.checked);// trueif (oCheck.checked === true) {console.log('打钩的')} else {console.log('不是打钩的')}if (oCheck.checked) {console.log('打钩的')} else {console.log('不是打钩的')}
</script>5.如何判断一个标签的背景色是不是红的
<script>if (oDiv.style.backgroundColor === 'red') {console.log('红色的')}// 如何判断一个标签是不是显示的if (oDiv.style.display === 'none') {console.log('隐藏的')}
</script>6.如何判断一个标签是不是div
<script>if (oDiv.localName === 'div') {console.log('oDiv是一个div标签')}if (oDiv.nodeName === 'DIV') {console.log('oDiv是一个div标签')}
</script>7.判断一个变量的类型是不是number
<script>let num = '';if (typeof num === 'number') {console.log('num是数字类型')}
</script>5.0 判断是不是数字
<body><input type="text" id='text'><input type="button" value='按钮' id='btn'><script>// NaN的两个特性:// 1: NaN和任何数字进行计算都是NaN// 2: NaN自己和自己比较是false.(只有NaN是这样)const oText = document.getElementById('text');const oBtn = document.getElementById('btn');oBtn.onclick = function() {// 把用户的输入的内容转换成number类型.// 如果输入的不是纯数字,隐式转换成NaN.// 只有NaN自己和自己不等.不等证明输入的不是数字.if (oText.value * 1 === oText.value * 1) {// 只有整数经过parseInt和parseFloat转换之后的值是一样的.小数不一样.if (parseFloat(oText.value) === parseInt(oText.value)) {alert('输入的是整数');} else {alert('输入的是小数');}} else {alert('输入的不是数字');}}// 要判断一个值是不是小数，你得先判断它是不是数字，然后再判断是不是小数。</script>6.0 逻辑与和或
<script>// 区间判断.// 判断一个数是不是在10-20之间.let num = 5;// 10 < num < 20 => 永远都是true. // 因为: 10 < num 隐式转换为数字不是0就是1, 0或者1永远小于20if (10 < num < 20) {alert('在10-20之间')} else {alert('不在10-20之间')}</script><script>// 区间判断.// 判断一个数是不是在10-20之间.let num = 5;// 这个数必须同时大于10并且小于20.if (num > 10) {if (num < 20) {alert('在10-20之间')} else {alert('不在10-20之间')}} else {alert('不在10-20之间')}</script>&& => 并且的意思.
if ( 条件1 && 条件2 ) => 条件1和条件2都是true,判断条件才是true, 只要有一个是false,条件就是false
if ( 条件1 && 条件2 && 条件3 .....)
<script>// 区间判断.// 判断一个数是不是在10-20之间.let num = 5;if (num > 10 && num < 20) {alert('在10-20之间')} else {alert('不在10-20之间')}</script>7.0 逻辑或
let num = 15;if (num < 10) {alert('不在10-20之间')} else if (num > 20) {alert('不在10-20之间')} else {alert('在10-20之间')}|| => 或者意思.
if ( 条件1 || 条件2 ) => 条件1或者条件2为true,判断条件就是true.两个条件都是false,条件就是false
if ( 条件1 || 条件2 || 条件3 ...... )
<script>// 判断一个数不在10-20之间.// 数字小于10,或者大于20.let num = 15;if (num < 10 || num > 20) {alert('不在10-20之间')} else {alert('在10-20之间')}</script>8.0 逻辑非
! => 取反 (true变false,false变true) (逻辑非)
!需要操作数是布尔值,如果不是,就隐式转换为布尔值再取反
<script>let flag = true;console.log(!flag);console.log(!100);</script>9.0 反选
<body><input type="checkbox" id='check' ><input type="button" id='btn' value='切换'><script>const oCheck = document.getElementById('check');const oBtn = document.getElementById('btn');oBtn.onclick = function() {if (oCheck.checked === true) {oCheck.checked = false;} else {oCheck.checked = true;}}</script></body><body><input type="checkbox" id='check' ><input type="button" id='btn' value='切换'><script>const oCheck = document.getElementById('check');const oBtn = document.getElementById('btn');oBtn.onclick = function() {// 取反操作.oCheck.checked = !oCheck.checked;}</script>
</body>
- 三目写法赋值
<body><input type="checkbox" id='check' ><input type="button" id='btn' value='切换'><script>const oCheck = document.getElementById('check');const oBtn = document.getElementById('btn');oBtn.onclick = function() {// 三目赋值oCheck.checked = oCheck.checked ? false : true;}</script>
</body>2.0 逻辑或和逻辑与的运算
&& || ! => 都是运算符 => 都能构成表达式 => 有返回值。
短路操作 => 只需要判断一个条件是否成立,就能知道整个条件是否成立.
逻辑&& => 操作数1是true,就返回第二个操作数,否则返回第一个操作数.
逻辑|| => 操作数1是true,就返回第一个操作数,否则返回第二个操作数.
let x = 100 && '幂幂';
let x = 100 || '幂幂';
if (num < 20 && num > 10) => 操作数是什么类型就返回什么类型
console.log(x);
<script>// 女朋友的消息.let toBf = '';// 男朋友的消息let toGf = '';// 判断赋值// if (toBf === '分手吧') {// toGf = '滚吧！'// }toGf = toBf === '分手吧' && '滚吧！';// if (toBf === '我饿了') {// toGf = '多喝热水'// }toGf = toBf === '我饿了' && '滚吧！';</script>2.1 三目运算
三目运算符，三元运算符，条件运算符
单目运算符 => typeof ++, --, ! delete
三目运算符有三个操作数.
操作数1 ? 操作数2 : 操作数3
运算规律 => 操作数1是true,就返回操作数2,否则返回操作数3.
<script> if (1<2) {alert('1<2')} else {alert('1>=2')}// 以上的判断可以改写成三目.1 < 2 ? alert('1<2') : alert('1>=2');
</script><script> if (1<2) {alert('1<2');console.log('我是多余的');} else {alert('1>=2');console.log('我也是多余的');}// 以上代码可以改写成下面的三目.1 < 2 ? (alert('1<2'),console.log('我是多余的')) : (alert('1>=2'),console.log('我也是多余的'));
</script><script> if (是数字) {if (是小数) {console.log('输入的是小数')} else {console.log('输入的不是小数')}} else {console.log('输入的不是数字')}// 以上代码可以改写成下面的三目.是数字? 是小数? console.log('输入的是小数'): console.log('输入的不是小数'): console.log('输入的不是数字')
</script>2.2 判断赋值
<script>// 女朋友的消息.let toBf = '';// 男朋友的消息let toGf = '';// 判断赋值if (toBf === '分手吧') {toGf = '滚吧！';} else {toGf = '多喝热水';}// 根据条件toBf === '分手吧'的真假,给toGf赋值不同的字符串toGf = toBf === '分手吧' ? '滚吧！' : '多喝热水';</script>2.3 逻辑与改写if
<script>// && 可以改写单个if判断.if (1<2) {alert('1<2');}// 通过&&改写if判断.1<2 && alert('1<2');// if 判断 可以用 && 改写.// if else 判断可以用 三目改写.</script>2.4 运算符优先级
<script>// 先乘除后加减 => 运算符优先级问题.// 粗劣的优先级.// ++ -- >!>算术 > 比较 > 逻辑 > 三目 > 赋值 > ,// let num = 100 && null + 200 * typeof '赵六' || NaN ? console.log('哈哈') && !alert(100) : 1+3;// num = 100 && null + 200 * 'string' || NaN ? undefined && !undefined : 1+3;// num = 100 && null + 200 * 'string' || NaN ? undefined && true : 1+3;// num = 100 && null + NaN || NaN ? undefined && true : 1+3;// num = 100 && NaN || NaN ? undefined && true : 4;// num = NaN || NaN ? undefined : 4;// num = NaN ? undefined : 4;// num = 4;console.log(num);// 4</script>隐式转换、IF判断、逻辑【与、或、非】、三目运算的用法（基础）相关推荐
- 从 ++[[]][+[]]+[+[]]==10? 深入浅出弱类型 JS 的隐式转换
起因 凡是都有一个来源和起因,这个题不是我哪篇文章看到的,也不是我瞎几把乱造出来的,我也没这个天赋和能力,是我同事之前丢到群里,叫我们在浏览器输出一下,对结果出乎意料,本着实事求是的精神,探寻事物的本 ...
- javaScript基础之隐式转换
隐式转换,这个是JavaScript,这个时候的一些java中的经验不但不会帮助自己,还有可能会错误的引导自己. 数据类型 JavaScript的变量可以分为三种方式,字面量形式,包装器方式,以及ne ...
- 7.Java中变量的隐式转换以及强类型转换
1.变量的相加,(变量的数据类型一致),直接运算即可! 结论: Java中变量的 隐式转换(数据类型的默认类型提升) byte,short,char- ...
- 如何找到隐式转换的SQL？
隐式转换相关的文章, <从隐式转换案例,来挖掘开发人员的技能提升> <浅谈显式转换和隐式转换> <隐式转换的案例场景> 我们知道,隐式转换是在开发过程中非常容易进的 ...
- JS的隐式转换与显式转换
隐式转换: 所谓隐式转换,就是当运算符在运算时,两边数据不统一,编译器会自动将两边数据进行数据类型转换成统一的再计算 常见隐式转换: 1.算术运算符:加(+).减(-).乘(*).除(/).取模(%) ...
- 隐式转换和显式转换及强制转换的区别
string strType = "123"; object objType= (object)strType;//可以不要,隐式转换, 要的为显式转换 string strTyp ...
- mysql数据库隐式表_详解MySQL数据库常见的索引问题：无索引，隐式转换，附实例说明...
概述 在这些年的工作之中,由于SQL问题导致的数据库故障层出不穷,而索引问题是SQL问题中出现频率最高的,常见的索引问题包括:无索引,隐式转换. 索引问题 1.无索引 当数据库中出现访问表的SQL无索 ...
- 每天多一点（2016.12.04）》Javascript隐式转换
乱想 javascript为什么需要隐式转换?如果没有会出现什么情况? 找了一圈没有看到关于这个的讨论,只好自己研究了,可能不一定正确,自行辨知. 郁闷就是郁闷在好好的,为什么要搞个隐式转换,一般来讲 ...
- mysql to double_MySQL令人咋舌的隐式转换 - 惊觉...
导读 作者徐晨亮, MySQL DBA,知数堂学员.热衷于数据库优化,自动化运维及数据库周边工具开发,对 MySQL源码有一定的兴趣 本文建议横屏观看,效果更佳 一.问题描述 [email prote ...
最新文章
- python全栈开发基础【第十七篇】面向对象反射和内置方法
- python htmlparser使用问题小结
- Python 3.x标准模块库目录
- 5G频谱相争“兵戎相见”各相部署风起云涌
- 配置vim支持源码浏览（vim+ctags+cscope)
- 学习Winform了解到switch和if-else的妙处
- jquery --- Poshy Tip jQuery Plugin
- GitHub贡献统计
- c语言 表盘指针旋转,请教下，表盘指针图片旋转 ？？
- 浅析微信小程序的底层架构原理
- IP和MAC地址的区别与联系
- 被低估的BIRT报表 二 Birt也可以很漂亮
- 换算rem的宽度和高度不生效 chrome字体最小为12px
- Android 高仿百度地图的LBS服务——基础地图篇（v 3.1.1）
- java—JSON(课堂笔记篇)
- 数据载入、存储及文件格式——《利用python数据分析》第六章学习
- 计算几何与图形学有关的几种常用算法（二）
- Redis核心数据结构ZSET、GeoHash 、 Stream--排行榜、消息Pull推送、附近搜索、布隆过滤器 、IM聊天室
- 基于JavaWeb的教务管理系统(SSM)
- 厂商SSD对数据库性能影响 测试报告