JS基础学习第四天：条件控制语句、循环语句、函数模块、事件等通用代码块

条件语句

========

if..else 语句

基本的if..else语句

   1.关键字 if，并且后面跟随括号。
   2.要测试的条件，放到括号里（通常是“这个值大于另一个值吗”或者“这个值存在吗”）。这个条件会利 用比较运算符（我们会在最后的模块中讨论）进行比较，并且返回true或者false。
   3.一组花括号，在里面我们有一些代码——可以是任何我们喜欢的代码，并且只会在条件语句返回true的时候运行。
   4.关键字else。
   5.另一组花括号，在里面我们有一些代码——可以是任何我们喜欢的代码，并且当条件语句返回值不是true的话，它才会运行。

if (condition) {  code to run if condition is true} else {  run some other code instead}

else if 语句

   有一种方法来让你的 if…else 连接你的额外的选择和结果——使用else if 。每一个额外的选择要求放到 if() { ... } 和 else { ... } 里——看看下面更多涉及到的例子，它们属于一个普通的天气预报的应用的一部分

<label for="weather">Select the weather type today: </label><select id="weather">  <option value="">--Make a choice--</option>  <option value="sunny">Sunny</option>  <option value="rainy">Rainy</option>  <option value="snowing">Snowing</option>  <option value="overcast">Overcast</option></select><p></p>

var select = document.querySelector('select');var para = document.querySelector('p');select.addEventListener('change', setWeather);function setWeather() {  var choice = select.value;  if (choice === 'sunny') {    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';  } else if (choice === 'rainy') {    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';  } else if (choice === 'snowing') {    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';  } else if (choice === 'overcast') {    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';  } else {    para.textContent = '';  }}

关于比较运算符

   1.=== and !== — 判断一个值是否严格等于，或不等于另一个。
   2.< and > — 判断一个值是否小于，或大于另一个。
   3.<= and >= — 判断一个值是否小于或等于，或者大于或等于另一个。

任何不是 false, undefined, null, 0, NaN 的值，或一个空字符串（''）在作为条件语句进行测试时实际返回true，因此您可以简单地使用变量名称来测试它是否为真，甚至是否存在（即它不是未定义的）

嵌套if else 

   将另一个if..else语句放在另一个中，嵌套他是完全可以行的

逻辑运算符 && || ！

   如果要测试多个条件，而不需要编写嵌套if ... else语句，逻辑运算符可以帮助您。当在条件下使用时，前两个执行以下操作：
&& — 逻辑与; 使得并列两个或者更多的表达式成为可能，只有当这些表达式每一个都返回true时，整个表达式才会返回true.
|| — 逻辑或; 当两个或者更多表达式当中的任何一个返回 true 则整个表达式将会返回 true.

if (choice === 'sunny' && temperature < 86) {  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';} else if (choice === 'sunny' && temperature >= 86) {  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';}

if (iceCreamVanOutside || houseStatus === 'on fire') {  console.log('You should leave the house quickly.');} else {  console.log('Probably should just stay in then.');

if (!(iceCreamVanOutside || houseStatus === 'on fire')) {  console.log('Probably should just stay in then.');} else {  console.log('You should leave the house quickly.');}

switch 语句

   if...else 语句能够很好地实现条件代码，但是它们不是没有缺点。 它们主要适用于您只有几个选择的情况，每个都需要相当数量的代码来运行，和/或 的条件很复杂的情况（例如多个逻辑运算符）。 对于只想将变量设置一系列为特定值的选项或根据条件打印特定语句的情况，语法可能会很麻烦，特别是如果您有大量选择

1. 关键字 switch, 后跟一组括号.
2. 括号内的表达式或值.
3. 关键字 case, 后跟一个选项的表达式/值，后面跟一个冒号.
4. 如果选择与表达式匹配，则运行一些代码.
5. 一个 break 语句, 分号结尾. 如果先前的选择与表达式/值匹配，则浏览器在此停止执行代码块，并执行switch语句之后的代码.
6. 你可以添加任意的 case 选项（选项3-5）.
7. 关键字 default, 后面跟随和 case 完全相同的代码模式 (选项 3–5), except that default 之后不需要再有选项, 并且您不需要 break 语句, 因为之后没有任何运行代码. 如果之前没有选项匹配，则运行default选项.

  switch (choice) {    case 'sunny':      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';      break;    case 'rainy':      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';      break;    case 'snowing':      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';      break;    case 'overcast':      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';      break;    default:      para.textContent = '';  }}

三元运算符

   在我们举一些例子之前，我们要介绍一下最后一句语法。三元或条件运算符是一个语法的小点，用于测试一个条件，并返回一个值/表达，如果它是true，另一个是false-这种情况下是有用的，并且可以占用比if...else块较少的代码块。如果你只有两个通过true/ false条件选择。伪代码看起来像这样：

    

( condition ) ? run this code : run this code instead