本章节复习的是JS中的控制流语句,让我们能实现更多的交互功能。

注意一点:在ES6之前,JS是没有块作用域的,如果在语句块外部声明的变量,如果在块内部声明一个相同名称的变量,那么程序将取后声明的这个变量的值:

  1. var a = 1;
  2. {
  3. var a = 2;
  4. }
  5. a; // 2

但是ES6开始,用let声明的变量是块作用域的:

  1. let a = 1;
  2. {
  3. let a = 2;
  4. }
  5. a; // 1

1.条件判断语句

用于根据指定条件返回结果,常见的是if...elseswitch

if…else语句

若条件为,则执行if后面的语句,若条件为,则执行else后面的语句:

  1. if(condition){
  2. // do something
  3. }else{
  4. // else 为可选
  5. // do something
  6. }

False等效值
在JS中下面的值常常被计算为false

  • false
  • undefined
  • null
  • 0
  • NaN
  • 空字符串(””)

注意
不要使用原始布尔值truefalse 与 Boolean对象的真和假混淆:

  1. let a = new Boolean(false); // Boolean {true}
  2. if (a); // 永真
  3. if (a == true); // 永假

2.switch语句

通过匹配表达式的值到每个case标签,若匹配成功则执行相关语句:

  1. switch ( 'leo' ){
  2. case 'pingan':
  3. // do something
  4. break; // 可选
  5. case 'leo':
  6. // do something
  7. break;
  8. default: // 都不匹配 则执行默认
  9. // do something
  10. break;
  11. }

break为可选,目的用于保证在正确匹配后,能跳出程序的switch语句,并继续执行其他代码,若没有break则程序会继续执行下一个case语句。

3.异常处理语句

throw语句抛出的异常,我们可以使用try...catch捕获并处理,这里需要先介绍两个概念:

throw语句:

用于抛出异常,后面可以是任何表达式:

  1. throw "error !";
  2. throw 404;
  3. throw {msg: 'err'};

try…catch语句:

用于捕获异常,try后面是程序正常时候执行的程序,catch后面是当前面有错误抛出的时候执行,并且捕获错误信息作为参数,并且在catch块执行完成,参数不可再用。

  1. function f(){
  2. throw 'test error!'
  3. }
  4. try{
  5. f();
  6. console.log('success');
  7. }catch (err){ // err 为前面返回的错误信息
  8. console.log(err);
  9. console.log('failed');
  10. }
  11. // test error!
  12. // failed

通常在try...catch后还有一个finally语句块,用于不论前面是否有报错,都会执行finally语句:

  1. try{
  2. // do something
  3. }catch(err){
  4. // do something
  5. }finally{
  6. // do something
  7. }

try...catch常常也用在做网络请求的情况下:

  1. function getData (){
  2. try{
  3. let a = fetch(url);
  4. }catch(err){
  5. console.log(err);
  6. }
  7. }

参考资料

1.MDN 流程控制与错误处理


本部分内容到这结束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues
ES小册 js.pingan8787.com