你可曾见过如此简单粗暴的JavaScript解说
toyiye 2024-09-09 08:56 3 浏览 0 评论
你可曾见过如此简单粗暴的JavaScript解说 -- if 判断的正确打开方式？
在JavaScript中，对于 if else 的逻辑判断你肯定非常熟悉，本文罗列了几种你不一定知道的简写方式，仅供参考。
例子：
已知小明考了68分，小于60分为不及格，大于60分为及格，问：小明是否通过了考试？
1.传统的写法
if(score < 60){
alert('不及格');
}else{
alert('及格');
}
这没什么好说的，最基本的if else语法。可读性应该是最好的。
2.利用三目运算符来进行判断
score < 60 ? alert('不及格') : alert('及格') ;
这种写法应该还算是比较多见的，而且，如果只有单纯的一个if判断的话，可读性也不是很差。
3.利用&& 来判断
score < 60 && alert('不及格') ;
score >= 60 && alert('及格') ;
&&的用法： 如果左边的结果为真，那么运行右边的表达式，如果右边的也为真，那么就返回真。其中，只要有一个为假，结果就是假。并且，一旦左边的结果为假，右边的就不执行了。
这里就是取了一个巧，因为我只是想要执行右边的表达式，无所谓返回值是什么。
那么，如果score < 60 为真，我不管三七二十一，都去执行一下右边的代码。我们的目的已经达到了。
这不就相当于这样吗：
if(score < 60 == true){
alert('不及格') ;
}if(score >= 60 == true){
alert('及格') ;
}
简写：
if(score < 60){
alert('不及格') ;
}if(score >= 60){
alert('及格') ;
}
就是说，一旦 ( ) 里面的表达式为真，就执行 { } 里面的内容。否则就不执行。
4.利用 || 来判断
score < 60 || alert('及格') ;
score >= 60 || alert('不及格') ;
|| 的用法： 如果左边的结果为真，那么直接返回true，右边的就忽略了！
如果左边为假，那么就运行右边的，看看右边的结果如何？如果右边为真，就返回真，否则返回假。
也就是说，不管右边的结果怎样，只要左边为假了，右边就无论如何会被执行一次的。这边也就是利用这个原理，相当于这样：
if(score < 60 == false){
alert('及格') ;
}if(score >= 60 == false){
alert('不及格') ;
}
如果分数 < 60 是假的，是骗你的，不就是说分数 > 60 才是真相吗?哦，超过60分就是及格了，所以alert出来的是及格。
如果分数 >= 60 是假的，是骗你的，不就是说分数 < 60 才是真相吗?哦，不满60分就是不及格了，所以alert出来的是不及格。
这样应该说的比较清楚了吧。
再说得白一点，就是：
你要么给我 < 60 ,要么给我 alert('及格') ;
你要么给我 >= 60 ,要么给我 alert('不及格') ;
5.实战演练
我们来一个小案例，看看可以怎么运用这些知识点？
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.box1 { height:200px; width:300px; border: 1px solid #666;
}
.box2 { background: green;
}
</style>
<script>
</script>
</head>
<body>
<div id='myBox' class='box1'></div>
</body></html>
Paste_Image.png
我们引入了jQuery，现在希望自己来编写一个toggelClass，如何实现呢？
当我们点击这个div的时候，就自动将class换成box2。再次点击的时候，就把box2的样式去掉，依此循环。
上代码：
$('document').ready(function(){ function toggleClass(dom , className){ //判断该class是否已经存在
if(dom.hasClass(className)){ //如果存在，就去掉这个class
dom.removeClass(className);
}else{ //如果不存在，就加上这个class
dom.addClass(className);
}
}
$('#myBox').click(function(){
toggleClass($(this),'box2');
});
});
1.gif
我猜想，jQuery对toggleClass的实现应该也差不多是这个意思。现在，我们考虑做如下简化：
第一种方式，用三目运算符简化：
function toggleClass(dom , className){
dom.hasClass(className) ? dom.removeClass(className) : dom.addClass(className);
}
第二种方式，用&& 和 ||：
!dom.hasClass(className) && dom.addClass(className) || dom.removeClass(className);
可能有点绕，而且我也不是很推荐这种方式，一般来说，这种方式用于一些给变量赋值的场合。
我大概解释一下：
!dom.hasClass(className) && dom.addClass(className)
这表示如果dom元素不包含你指定的className，那么 !dom.hasClass(className) 是真，于是无论如何我都要执行右边的代码： dom.addClass(className) ，也就是说，给dom元素添加这个class。
这样一来，
!dom.hasClass(className) && dom.addClass(className)
这句话是不是已经成立了，OK，那么因为右边是 || ， 左边都已经成立了，那么我右边的代码是不是可以不执行了呀？
好的，第二次点击：
!dom.hasClass(className)的意思是说，你这个dom元素是不是没有指定的class啊，不，我们刚才已经添加了，所以是有的。
那么，这句话就不成立了，&& 左边的是假，那么右边的就不执行了、
就是说：
dom.addClass(className)
这句话不执行了。
综合来看：
!dom.hasClass(className) && dom.addClass(className)
这个条件就是不成立的。
好的， || 左边的不成立，是不是说，我们无论如何都要执行一下||右边的代码呢？
恩， dom.removeClass(className) 就被执行了。
本章结束 ...
剽悍一小兔，电气自动化毕业。
参加工作后对计算机感兴趣，深知初学编程之艰辛。
希望将自己所学记录下来，给初学者一点帮助。
免责声明： 博客中所有的图片素材均来自百度搜索，仅供学习交流，如有问题请联系我，侵立删，谢谢。
文／剽悍一小兔（简书作者）
原文链接：http://www.jianshu.com/p/6a6e28188c4d
相关推荐
- 为何越来越多的编程语言使用JSON（为什么编程）
-
JSON是JavascriptObjectNotation的缩写，意思是Javascript对象表示法，是一种易于人类阅读和对编程友好的文本数据传递方法，是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON（数据库用json格式存储）
-
在本文中，您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?，Devops，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?...
- MySQL 从零开始:05 数据类型（mysql数据类型有哪些,并举例）
-
前面的讲解中已经接触到了表的创建，表的创建是对字段的声明，比如：上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶（json格式对象）
-
一、引言在现代Web开发中，JSON（JavaScriptObjectNotation）已经成为数据交换的标准格式。无论是从前端向后端发送数据，还是从后端接收数据，JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data（json和formdata提交区别）
-
在讨论现代网络开发与API设计的语境下，理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里，特别值得关注的是两种主流数据格式：...
- JSON 语法（json 语法 priority）
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解（json的语法规则）
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意：json的key是字符串,且必须是双引号，不能是单引号...
- MySQL JSON数据类型操作（mysql的json）
-
概述mysql自5.7.8版本开始，就支持了json结构的数据存储和查询，这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库，在处理json这种非结构化的数据...
- JSON的数据模式（json数据格式示例）
-
像XML模式一样，JSON数据格式也有Schema，这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解（后端json格式）
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势（什么叫json）
-
现在程序员还有谁不知道JSON吗？无论对于前端还是后端，JSON都是一种常见的数据格式。那么JSON到底是什么呢？JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型，以存储结构化数据。JSON是一种开放的数据格式，可用于存储各种类型的值。什么是JSON类型？JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类（javascript 包）
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递，以达到通信的目的，最佳方式就是将一个对象转换为字符串的形式JSON（JavaScriptObjectNotation）-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介：Json，全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?（json和xml哪个好）
-
JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)