美文网首页
web开发学习日志4-if...else

web开发学习日志4-if...else

作者: 奋斗的岑爸 | 来源:发表于2018-02-21 16:34 被阅读0次

学到了Javascript条件语句部分,对大部分人来说是块硬骨头,我上学的时候在计算机课有接触,当时似懂非懂的蒙混过关,但在内心深处一直对条件语句有恐惧。这次重新拾起这部分内容仍然是困难重重,通过一个下午地钻研,算是入门了。在今天的学习日志里,我尝试着把条件语句讲清楚。

为什么条件语句学不好

  • 对条件语句的规则不清晰
  • 条件增多时逻辑混乱,无从下手

规则

if...else语句

根据是否满足一定的条件而执行特定的代码,代码结构如下:

if (/* 如果条件1为true */) {
// 运行代码1
} else {
// 运行代码2
}

注意:

if 语句中的值始终转换为 true 或 false。根据该值,if 语句中的代码会运行(true),或 else 语句中的代码会运行(false)。if 和 else 语句中的代码位于花括号 {...} 里,以便区分条件,并表明要运行哪段代码。

else if 语句

在某些情况下两个条件语句(非此即彼)并不够用,可以想象以下场景:

  • 如果在餐馆消费大于100元且点菜品A,会赠送饮料一瓶
  • 如果消费大于100元但没点菜品A,会赠送小菜一碟
  • 如果消费小于100元,没有赠品

当出现上述这种情况时,需要引入else if语句,增加条件,代码结构如下:

if (/* 如果条件1为true */) {
// 运行代码1
} else if (/* 如果条件2为true */) {
// 运行代码2
... ...
} else {
// 运行代码n
}

注意:

通过额外添加一个 else if 语句,就增加了一个条件语句。如果条件1false,代码就会跳到 else if 语句,看看条件2。 如果条件2仍为false,代码就会跳到else 语句。本质上 else 语句充当的是默认条件,以防所有其他 if 语句都为 false。

逻辑

在编程语言里,逻辑就是一系列判断条件(true或者false(Yes或者No))的顺序。为了解决问题,需要理清各个条件之间的逻辑关系,通过流程图可以清晰展示:

流程图是一种图表,通过一系列的逻辑语句概述了问题的解决方案。这些语句的评估和执行顺序叫做控制流程

下面的例子展示了银行卡余额查询程序从流程图到代码实现的整个过程,

要实现的方案:

1) 否要查询账户
2),账户否有效且余额大于0,,输出“Your balance if $ + 余额”
3),账户否无效,,输出“Your account is no longer active.”
4),余额是否为0,,输出“Your account if empty.”
5),输出“Your balance if negative. Please contact bank.”
6),输出“Thank you. Have a nice day!”
其中斜体“”和“”为一条逻辑线,正体“”和“”为另一条逻辑线。

流程图:

流程图(www.udacity.com)

代码如下:

var balance = 156.00;
var checkBalance = true;
var isActive = true;
1. if (checkBalance) {
2. if (isActive && balance > 0) {
3. console.log("Your balance is $" + balance.toFixed(2) + ".");
4. } else if (!isActive) {
5. console.log("Your account is no longer active.");
6. } else if (balance === 0) {
7. console.log("Your account is empty.");
8. } else {
9. console.log("Your balance is negative. Please contact bank.");
10. }
11. } else {
12. console.log("Thank you. Have a nice day!");
13. }

总结

搞清楚逻辑,熟悉规则,条件语句就不是那么难了。而要真正做到上述两点,需要辅之大量的练习。本文仅是入门,后面随着应对场景越来越复杂,还会接触到高级条件语句,到时候再用另起一篇总结。

相关文章

  • web开发学习日志4-if...else

    学到了Javascript条件语句部分,对大部分人来说是块硬骨头,我上学的时候在计算机课有接触,当时似懂非懂的蒙混...

  • web开发学习日志1

    之前在一个学习编程的网站花费一万多元,没多久就坚持不下去了,感觉自己虎头蛇尾(确切的说是虎头无尾)的性格一时间也无...

  • Java日志体系(commons-logging)

    Java日志系统学习 作为一名Java开发者,日志是我们工作中经常接触到的一项技术。对于Web应用而言,日志的重要...

  • java日志简介

    前言 最近学习开java web服务器开发,开始学习java,处理业务逻辑,但对其中的日志比较好奇,之前没怎么接触...

  • web开发学习日志7-数组

    之前学习过数字、字符串、布尔值等数据类型,它们都是单一的数据结构。如果将大量的数据存储在一个地方或者一个变量中,无...

  • web开发学习日志6-函数

    到了相对复杂的一章,函数。 什么是函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。---http...

  • web开发学习日志5-循环

    概念 循环:程序中用于重复执行特定操作的一段代码。任何循环都具有以下三个主要部分: 何时开始:设置循环的代码(例如...

  • web开发学习日志3-CSS

    CSS简述 CSS (Cascading Style Sheets),即层叠样式表,是一种标记语言(markup ...

  • 阿里大牛谈:前端必备知识点!

    web开发是什么??web前端开发薪资有多少?工资高吗?web开发学习路线是什么?Web前端开发工程师是一个很新的...

  • web开发学习路线图

    各类程序员学习路线图 web前端开发学习路径图 2016/2017 Web 开发者路线图 怎么学习前端开发?求推荐...

网友评论

      本文标题:web开发学习日志4-if...else

      本文链接:https://www.haomeiwen.com/subject/sfbntftx.html