javascript每日必学之条件分支


Posted in Javascript onFebruary 17, 2016

大家好,我们今天接着前面的讲,前面已经大概了讲了一下运算符,今天的任务主要就是讲解逻辑条件分支,循环。
我们先就来模拟一个逻辑块,就用我们经常接触到的买车票来说吧,车票的价格对不同的人价格是有差别的,但是我们都是一样的去执行买票这个行为,我们就可以把买票写成一个函数BuyTicket

//代码
function BuyTicket(){
console.log("请付款200元");
}

大家看到了这个函数体,其实是有缺陷的,我们每个人去买票的时候,都是执行这一个函数,如果是军人,或者是学生,这个函数就不适用了,他们 的折扣就没有办法使用了,我们只能多写一个函数来解决这样的问题,然后,我们的javascript语言已经给我们提供了分支语句,我们就可以轻松的解决这样的问题了,我们可以把函数给修改一下,我们来看一下接下来修改后的代码

function BuyTicket(identity){
if(identity == "学生"){


console.log("请付款100元");

}

if(identity == "军人"){


console.log("请付款150元");

}

if(identity == "普通人"){


console.log("请付款200元");

}
}

//模拟3种人去买票
BuyTicket("学生");
BuyTicket("军人");
BuyTicket("普通人");

javascript每日必学之条件分支

这样使用是不是比前面的写法更科学,后面我还会慢慢升级,慢慢地大家就会明白程序的可爱之处。

通过上面的示例,我们不难看出,这样一个函数,就可以解决分支的问题,我们现在来讲解一下if分支语法

if(条件){
//执行语句
}

条件就是我们前面讲到的,非空对象,非未定义对象,布尔值true,非0数字,所有字符串,我们函数体里面是用的 == 比较符来运算后得到一个布尔值来进行的判断,这也是我们经常用到的一种方式,我们同样可以用其他值来作为条件,再上一张图片,让大家来理解一下

javascript每日必学之条件分支

 A处:条件全部成立,所以都打印出了“执行了”几个字;B处:条件都不是if条件的合格值,所以没有执行。注:这里我们都是使用的明值,有时候我们就会使用运算后的返回值,就如前面的BuyTicket函数中所使用的 == 运算,返回的如果是true,就执行,如果返回的是false,肯定就不执行,我们每次执行BuyTicket时,所传入的值,就只能符合一个条件。

接下来,我们学习一下完整的if分支

//第一种,两个分支
if(条件){
//执行
}else{

//执行
}

直接上图,一下就明白了

javascript每日必学之条件分支

 A处:执行了前面的代码;B处条件不合格,所以就执行了else块里面的语句。很简单,不多作解释。

两个分支的情况,就是始终会执行二者之一,不会两个同时执行

//第二种,多个分支
if(条件){
//执行
}else if(条件){

//执行
}else if(条件){

//执行
}…else if(条件){

//执行
}else{

//执行
}

多个分支的情况,始终只执行其中之一,如果执行其中的某一个分支后,就不会再继续下面的条件比较,是一种效率比较高的方式,如果单纯地去写if块,就会像上面的BuyTicket函数一样,那是一个效率很低的写法,三个if块都会去比较所以,我们可以改造一下BuyTicket函数

//代码 
funciton BuyTicket(identity){
if("学生"){


console.log("请付款100元");

}else if("军人"){


console.log("请付款150元");

}else{


console.log("请付款200元");

}
}

这种写法就比较科学了,执行的效果也跟前面一样,这样写的好处就是执行效率高了,条件逐一匹配,如果条件合格就执行,而不会再去匹配其他的条件块,这样效率就比前面写的函数代码优秀,然而,还有一种多分支的替换写法,switch结构体,先看语法

switch(表达式){
case 常量表达式1:


//执行


break;

case 常量表达式1:


//执行


break;

case 常量表达式1:


//执行


break;

default:


//执行


break;
}

从上往下执行的过程,就是,用表达式与下面的常量表达式逐个匹配,如果匹配上了,就执行里面的语句,记得,在每个case块后面加上break关键字,不然,会依次执行后面的case块里面的语句,直到遇到break为止,所以这个特性我们也可以利用起来,在合适的情况下,我们也会不写break关键字。好了,我们先就用switch结构体来修改一下前面的BuyTicket函数

function BuyTicket(identity){
switch(identity){


case "学生":



console.log("请付款100元");


  break;


case "军人":



console.log("请付款150元");



break;


case "普通人":



console.log("请付款200元");


  break;


default:



console.log("请出示身份证");


}
}

default块就是当一个表达式都没有匹配上情况,我们默认执行这一块的代码,因为这也是最后一个代码块,所以也可以省略break关键字

 javascript每日必学之条件分支

总结一下,今天,只说了条件分支之类的知识,if , if--else , if--else if--else , switch就这几个条件分支语句块,每天我也只能抽出一定的时间来写,篇幅有限,下一篇就是写循环了,好了,大家先去消化了,下一篇我们继续。

Javascript 相关文章推荐
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
JavaScipt中栈的实现方法
Feb 17 #Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 #Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 #Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 #Javascript
Bootstrap入门书籍之(一)排版
Feb 17 #Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 #Javascript
分享自己用JS做的扫雷小游戏
Feb 17 #Javascript
You might like
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
使用js画图之饼图
2015/01/12 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
简单谈谈python中的多进程
2016/11/06 Python
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
公开服务承诺制度
2014/03/26 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
公司放假通知范文
2015/04/14 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js