2018.12.18运算符,分支结构(循环),异常处理,函数

1复习

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>复习预习</title>
   <style>
      .b { /* 作用域: {}产生的, {作用域开始的标识, }作用域结束的标识 */
           /*出现在作用域中的所有内容,都是属于作用域拥有者 .b*/
      }
      {
           /*如果直接书写作用域, 作用域没有具体拥有者, 但是是一个小的空间(名称空间)*/
      }
      {
           /*局部作用域*/
      }
       /*局部与局部直接数据是否想通? 不相通 <=>
      作用域中只能使用本作用域和所属作用域中的数据 */

       /* python test.py
      // 全局名称空间(全局作用域)
      ① // 只能使用自身空间内容, 不能使用②③
          def a(): // 局部名称空间(局部作用域)
              ② // ②对自身空间内容使用和对①空间内容使用均可以, 不能用③
              pass

          def b(): // 局部名称空间(局部作用域)
              ③ // ③对自身空间内容使用和对①空间内容使用均可以, 不能用②
              pass

          def c():
              ④ // 能④①, 不能②③⑤
              def d():
                  ⑤ // 能①④⑤, 不能②③
                  pass
              return d;

      */
   </style>
</head>
<body>
   <!--1.js引入-->
   <!--书写在行间式的事件全局属性中 - 行间式 -->
   <!--书写在script标签中 - 内联式 -->
   <!--书写在外部js文件中,用script标签src属性引入, 该script内部的js代码会被屏蔽 - 外联式-->

   <!--在html中出现的位置 head底部 | body底部-->
   <!--head底部: 依赖性js库-->
   <!--body底部: 功能性js脚本-->

   <!--2.变量的定义-->
   <!--作用域: 用{}(js)或缩进(python)来标识一个区域内容所属某一对象-->
   <!-- 四种定义方式
       // ES5标准下定义变量, 没有块级作用域概念
       num = 10;
       var num = 10;
       // ES6标准下定义变量, 有块级作用域概念
       let num = 10;
       const NUM = 10;
   -->
   <script>
       // 全局作用域
       // 定义在全局作用域与中的变量(常量),都是全局变量
      {
           // 块级作用域
           // ES5标准下定义变量(无关键词/var), 为全局变量
           // ES6标准下定义变量(let/const), 为局部变量(局部内可以使用,局部外不可以使用)
      }

       function func() {
           // 局部作用域
           // 除了无关键词定义的变量为全局变量, 其他均为局部变量
      }

       // 可以产生块级作用域的方式
       // 直接书写 {}
       // if 后的 {}
       // while 后的 {}
       // switch 后的 {}
       // for 后的 {}
       // do...wihlt 后的 {}
   </script>


   <!--3.弹出框与调试方式-->
   <!--4.数据类型 | 类型转换-->
   <!--
   数字(Number) <= +'10' +true
   字符串(String) <= ''+ 10
   布尔(Boolean) <= Boolean(10)
   未定义(undefined)

   函数(Function)
   对象(Object)
   空(Null)
   -->
   <!--
   "5" + 2 => "52"
   "5" - 2 => 3
   +"5" + 2 => 7
   -->
</body>
</html>

二运算符


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>运算符</title>
</head>
<body>
   运算符
</body>
<script>
   // 算术运算符
   // + | - | * | / | % | ++ | --
   console.log(5 / 2);  // 2.5
   // 取整
   console.log('%d', 5 / 2); // "2"
   var num = parseInt(5 / 2);  // 2
   console.log(num);

   // 取模(求余)
   console.log(5 % 2);  // 1
   // 任何一个自然数对 n 取余, 结果为 [0, n-1]

   // 自增|自减 ++|--
   // ++就是自增1, --就是自减1
   var num = 10
   console.log(num++);  // 10
   console.log(++num);  // 12
   console.log(num);  // 12
   // ++在变量后(num++), 先将变量的值拿去使用,再自身自增1
   // ++再变量前(++num), 先将变量自身自增1, 再将结果拿去使用
   // 总结: 不管++在前在后,运算结束后,变量自身值一定自增1

   // res = ++num <==> num++; res = num
   // res = num++ <==> res = num; ++num

</script>
<script>
   // 赋值运算符
   // = | += | -= | *= | /= | %=
   var x = 10;  // 将10的值赋值给变量x
   y = x;  // 将变量x的值传递给变量y
   console.log(y);  // 10

   x += 10;  // x = x + 10, 运算方式由右至左, 将x+10的结果重新复制给x
   console.log(y);  // 10, y的值虽然来源于x, 但y值只由自身控制

   // x /= 10 == x = x / 10
</script>
<script>
   // 比较运算符, 结果为Boolean类型
   // == | ===
   console.log("5" == 5);  // true, 只做值比较
   console.log("5" === 5);  // false, 比较值及类型

   // != | !==
   console.log("5" != 5);  // false, 只做值比较
   console.log("5" !== 5);  // true, 比较值及类型

</script>
<script>
   // 逻辑运算符, 运算结果通常为Boolean(可以不是)
   // 或 | 与 | 非 <==> || | && | !

   // &&(与)
   var a = 10;
   var b = 20;
   var c = "20";
   var res = a < b && b == c;  // true
   console.log(res)
   // 总结&&: 全真为真, 有假则假
   // 总结||: 全假则假, 有真则真
   // 总结!: 真则假, 假则真

   // 逻辑运算符的结果本质上为表达式值
   // 表达式: 由数字,变量,运算符组成的合法式子
   res = a < b && c;
   console.log(res);

   res = (a = 1 || b == c);
   console.log(res);

   // 针对 && | ||
   // 疑问: 逻辑运算符结果可能为逻辑运算符之前表达式的值,也可能是之后表达式的值
   // 当逻辑运算符出现 短路现象 , 就是之前表达式的值, 否则(正常情形下), 就是之后表达式的值

   // &&, 前一个表达式为假时, 整个式子的结果已经确定为假, 后表达式不会被执行, 就是被短路了
   var num = 10;
   res = false && num++;
   console.log(res, num);  // null, 10
   res = null && ++num;
   console.log(res, num);  // null, 10

   // ||, 前一个表达式为真时, 整个式子的结果已经确定为真, 后表达式不会被执行, 就是被短路了
   res = -10 || ++num;
   console.log(res, num);  // -10, 10

   // 特殊小技巧 => 类似于if分支来使用 ***
   /* if a > b:
      print(a)
    */
   var a = 100;
   a > b && console.log("大值a:", a);


</script>
<script>
   // 三目运算符
   // 语法: 条件表达式 ? 表达式1 : 表达式2
   var a = 10, b = 20;
   var res = a < b ? a : b;  // 取小值
   console.log(res);
   res = a < b ? b : a;  // 取大值
   console.log(res);

   // 类似于if...esle...
   a < b ? console.log("表达式结果为true") : console.log("表达式结果为false")


</script>
<script>
   let abc = 10;
   // let abc = 20; // 在es6语法下,有变量的重复定义规则, 不允许在同一作用域下,出现变量的重复定义
  {
       let abc = 20;  // 可以编译运行通过
  }

   // ES6新增
   let [a1, b1, c1] = [1, 2, 3];
   // a1=1,b2=2,c3=3

   let [a2, ...b2] = [1, 2, 3];
   // a2=1,b2=[2,3]

   let {key: a3} = {key: 10};
   // a3=10

   let [a4, b4, c4] = 'xyz';
   // a4='x',b4='y',c4='z'

   console.log("end")
</script>
</html>

三分支结构


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>分支结构</title>
</head>
<body>
   分支结构
</body>
<script>
   // 程序本质分为三大结构: 顺序结构 | 分支结构 if|switch | 循环结构 for|while|do...while
   // 根据程序代码执行的方式 划分为 三大结构

   // 逻辑运算符 => 类似于 if单分支结构
   // 三目运算符 => 类似于 if...else分支结构

   /* py 语法
      if 条件表达式:
          代码块;

      js 语法
      if (表达式) {
          代码块
      }
    */
   if (1) {
       var a = 10;
       let b = 20;
       console.log("d:%d只能在块级作用域中访问", b);
  }
   console.log("a:%d在块级作用域内外都可以访问", a);

   /* 全语法
      if (表达式1) {

      } else if () {

      }
      ...
      else if () {

      }
      else {

      }
    */
   /*
  if 与 if直接可以随意嵌套
    */
   var salary = prompt("请输入所发工资:");
   if (salary > 0) {
       console.log("工资已发, 打算还账!");
       salary -= 100000;
       if (salary > 0 ) {
           console.log("拯救世界...");
      } else if (salary == 0) {
            console.log("家里蹲, 峡谷见");
      } else {
           console.log("借钱, 填窟窿, 谁来拯救我...");
           console.log("借%d元钱", -salary);
      }
  } else {
       console.log("拿我刀来, 允许你跑49m");
  }
</script>
<script>
   // switch分支
   /* 语法
      switch (结果为整数|字符串的表达式) {
          case 值1(值需要和表达式进行类型统一): 代码块; break;
          ...
          case 值n: 代码块; break;
          default: 代码块;
      }
    */

   // 用例
   var num = prompt("请输入一个自然数: ");  // 输入接收的默认为字符串类型数据
   var num = +num;
   switch (num) {
       case "0": console.log("用户输入的是数字0"); break;
       case "1": console.log("用户输入的是数字1"); break;
       case 0: console.log("change, 用户输入的是数字0"); break;
       case 1: console.log("change, 用户输入的是数字1"); break;
       default: console.log("用户输入的是数字非0和1");
  }
   // default分支, 出现在所有case之下, 当所有case没有匹配上, 走该分支,
   // 该分支也可以省略, 代表没有未匹配到的动作

   // switch()中的表达式结果为 整型 或 字符串, case的值要与其对应

   // break作用是结束分支结构(结束所属switch语句), 可以省略

   var month = +prompt("请输入月份");
   switch (month) {
       case 1: case 3: case 5: case 7: case 8: case 10:  case 12:
           console.log("%d月天数为31天", month); break;
       case 4: case 6: case 9: case 11:
           console.log("%d月天数为30天", month); break;
       case 2:
           console.log("%d月天数为28天", month);
  }
   
</script>
</html>

四.1分支结构(循环结构)


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>循环结构</title>
</head>
<body>
循环结构
</body>
<script>
   /* 循环
  py
  while 条件表达式:
      代码块;

  js
  while (条件表达式) {
      代码块;
  }
    */

   var count = 0;
   while (count < 5) {
       console.log("我最棒, 我最帅, 我是天下第一!");
       count++;
  }

   // for循环
   /*
  for (循环变量定义并初始化①; 循环变量条件表达式②; 循环变量增量③) {
      代码块④;
  }
  执行顺序 ① ②④③ ... ②④③ ②, ②④③个数就是循环次数
    */

   for (var i = 0; i < 5; i++) {
       console.log("我最棒, 我最帅, 我是天下第一!");
  }

   // 所有for循环可以解决的问题, 都可以由while来解决
   // while循环可以解决不明确循环次数的循环需求

   // break: 结束当前所属循环体
   // continue: 结束本次循环,进入下一次循环

   for (var i = 0; i < 5; i++) {
       if (i == 3) break;
       console.log(i);  // 0, 1, 2
  }
   for (var i = 0; i < 5; i++) {
       if (i == 3) continue;
       console.log(i);  // 0, 1, 2, 4
  }

   // do...while循环
   // 无论条件是否满足, 都需要执行一次循环体 (循环体只是要被执行一次)
   var num = 0;
   do {
       console.log("我最棒, 我最帅, 我是天下第一!");
       num++;
  } while (num < 5);  // 当条件满足时, 返回循环体



</script>
</html>

五异常处理


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>异常处理</title>
</head>
<body>
异常处理
</body>
<script>
   // 了解
   let num = 10;
   try {
       console.log(num);  // try...catch捕获的是runtime时的异常
       let num = 20;
  } catch (e) {
       console.log(e)  // catch为处理异常的分支
  } finally {
       console.log('无论是否出现异常,该分支都会被执行')
  }
</script>
<script>
   console.log(num)
</script>
</html>

六函数


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>函数</title>
</head>
<body>
</body>
<script>
   // 什么函数: 具有特定功能的代码块
   // 函数与方法: 调用方式的不同 函数通过函数名 | 方法通过调用者.语法调用
   // 如何定义函数:
   /*
  function 函数名(参数列表) {
      函数体;
      (函数体可以包含函数的返回值)
  }
  */
   // 函数的调用: 函数名(参数列表)
   //     函数的调用()一定不可以省略, 参数列表看情况(不管需不需要,均可以传或不传)
   // 函数的分类:
   // 无参函数:
   function fn1() {
       console.log("无参函数")
  }
   fn1();
   // 有参函数:
   function fn2(a, b) {
       console.log("a,b的和:", a + b)
  }
   fn2(10, 20);
   // 匿名函数:
   var fn3 = function () {
       // 匿名函数虽然没有名字, 但会开辟内存空间, 所以当然可以用一个变量来指向这个内存空间
       console.log("没有直接定义名字的函数");
  };
   fn3();  // 系统不好在()()之间添加;作为语句结束,需要添加分号时一定需要手动添加
   fn4 = fn3;
   fn4();
   // 匿名函数的自调用
  (function () {
       // 定义一个匿名函数, 至少需要使用一次, 使用一次的方式就叫做 匿名函数的自调用
       // 如果匿名函数不存在任何使用, 编译就无法通过
       // 匿名函数的自调用:
       //     1.将整个匿名函数作为一个整体, 用()将其包裹
       //     2.并完成函数的调用, 添加 (参数列表)
       console.log(" 匿名函数的自调用");
  })();

   // 函数的参数:
   function func1() {
       console.log("无参");
  }
   // 均可以调用
   func1();
   func1(10, 20);

   function func2(a, b) {
       console.log(">>>", a + b);
  }
   func2()
   func2(10)
   func2(10, 20)
   func2(10, 20, 30)

   // 默认值参数
   function func3(a, b=20, c, d=40) {  // 定义在函数声明中的参数为形参
       console.log("***", a + b + c + d);
  }
   var temp = 1000;
   func3(10, 100, temp)  // 函数调用传入的实际值,或拥有实际值的变量为实参

   // 函数的返回值:
   // js的函数只能返回一个值, 这个值可以为任意类型(如果想返回多个值,将多个值放到数组或对象中)
   let func4 = () => {
       return 1000, 8888, 6666;  // 这种情况返回的是最后一个值
       // return [1000, 8888, 6666];
  };
   console.log(func4())

   // 函数的嵌套(定义 | 调用)
</script>

<!-- 一个人写的js -->
<script>
   // 为什么要出现匿名函数的自调用
  (function () {  // 为了生成一个局部作用域,为了让其他的地方访问步到里面的变量
       var num = 10;
  })();

   function abc() {
       var abc = 20;
       console.log(abc)
  }
</script>
<!-- 另一个人写的js -->
<script>
   // console.log(num);
   abc()
</script>

<script>
   // 函数的定义
  (function () {
       // 匿名函数定义并调用
  })()
   
   // ES5
   function fun1() {
       
  }
   var fun2 = function () {

  };
   // ES6
   let fun3 = () => {
       
  }

   // 函数的调用
   // 函数名(参数列表)
</script>
<script>
   // 函数的参数:
   // 1.实参与形参个数可以不匹配,随意规定
   // 2.形参可以设置默认值(并非为py中的关键字参数)
   // 3.实参对形参进行传值时,完全采用位置匹配(eg:第n个实参一定将值传递给第n个形参)
</script>
<script>
   // 函数的返回值:
   // 1.函数的返回值有return来明确,没有明确,则相当于返回undefined
   // 2.函数只能返回一个值
   // 3.函数的返回值就是函数的执行结果,也就是函数值
</script>
</html>

猜你喜欢

转载自www.cnblogs.com/jutao/p/10140103.html