Python-JS基础(基础结构~函数)

程序本质上分为三大结构: 顺序结构、分支结构、循环结构
JavaScript中的程序结构也是这样,下面我们来分别介绍JS中的三种基本程序结构:
我们上篇博客中介绍到的使用逻辑运算符&&实现的就是类似于if单分支结构、
还有使用三目运算符实现的就是类似于if...else的分支结构,
下面我们就来正式介绍我们今天所要学的三个结构: 其中顺序结构在这里我们不在进行介绍,
因为JavaScript是解释型的脚本语言,所以它的执行顺序是从上而下顺序执行的, 我们主要介绍另外两种程序结构

一、分支结构
1、if语句
if 基础语法

  if (条件表达式) {
      代码块;
  }
  // 当条件表达式结果为true，会执行代码块；反之不执行
  // 条件表达式可以为普通表达式
  // 0、undefined、null、""、NaN为假，其他均为真
if 复杂语法

// 1.双分支
  if (表达式1) {
      代码块1;
  } else {
      代码块2;
  }
  ​
  // 2.多分支
  if (表达式1) {
      
  } else if (表达式2) {
      
  }
  ...
  else if (表达式2) {
      
  } else {
      
  }
if 嵌套

if 和 if 直接可以随意嵌套

  if (表达式1) {
      if (表达式2) {
          
      }...
  }...
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");
    }
2、switch语句
  switch (表达式) {
      case 值1: 代码块1; break;
      case 值2: 代码块2; break;
      default: 代码块3;
  }
  // 1.表达式可以为 整数表达式 或 字符串表达式
  // 2.值可以为 整数 或 字符串
  // 3.break可以省略 break作用是结束分支结构(break结束所属switch语句)
  // 4.default为默认代码块，需要出现在所有case最下方，在所有case均未被匹配时执行
switch案例一:

  var num = prompt("请输入一个自然数")  //输入接受的默认是字符串类型数据
  var num = +num;
  switch (num){
          case"0":console.log("用户输入的数字是0");break;
          case"1":console.log("用户输入的数字是1");break;
      default:console.log("用户输入的数字非0和1");
  }
default分支,

出现在所有case之下, 当所有case没有匹配上, 走该分支,
该分支也可以省略, 代表没有未匹配到的动作
switch案例二:
该案例想要展示的是省略break的情况, 该省的时候省,不该省的时候不能省,
比如在该程序中, 输入月份之后,省略了多个break,让case公用一个,如果在第一行匹配成功并且打印出来该月份为31天,如果后面没有break,就会继续往下执行,不会继续进行匹配,会直接进行打印操作,这样就背离了我们的需求.所以在适当的位置还是要加上break的.

    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);
    }
 二、循环结构
1、for循环
  for (循环变量定义并初始化①; 循环变量条件表达式②; 循环变量增量③) {
      代码块④;
  }
  // 1.循环变量可以在外、在内声明
  // 2.执行逻辑 ① ②④③ ... ②④③ ②，入口为①，出口为②(最终总会因为不满足条件而退出)，②④③个数为[0, n]
简单案例:

    for (var i = 0; i < 5; i++) {
        console.log("我最棒, 我最帅, 我是天下第一!");
    }
2、while循环
  while (条件表达式) {
      代码块;
  }
简单案例:

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

所有for循环可以解决的问题,都可以由while来解决

while循环可以解决不明确循环次数的循环需求

break | continue  在JS的循环体中同样适用
     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
    }
3、do...while循环
  do {
      代码块;
  } while (条件表达式);
无论条件是否满足,都需要执行一次循环体 (循环体至少被执行一次)
简单案例:

    var num = 0;
    do {
        console.log("我最棒, 我最帅, 我是天下第一!");
        num++;
    } while (num < 5);  // 当条件满足时, 返回循环体
4、for...in循环
用于遍历对象：遍历的结果为key，通过[ ]语法访问对应的value

  obj = {"name": "zero", "age": 8}
  for (k in obj) {
      console.log(k, obj[k])
  }
5、for...of循环
 1.用于遍历可迭代对象：遍历结果为index，通过[]语法访问对应的value
 2.ES6新增，可迭代对象有 字符串、数组、Map、Set、Anguments、NodeList等

  iter = ['a', 'b', 'c'];
  for (i of iter) {
      console.log(iter[i])
  }
6、break，continue关键词
break：结束本层循环

continue：结束本次循环进入下一次循环

三、异常处理(了解)
JS是一个处理前端的脚本语言,很大一部分页面中需要的数据都是直接从后台获取的,所以在JS中不用对数据进行太精确的处理, 所以JS中的异常处理的使用场景非常少,我们在这做一个简单的介绍:

<script>
    // 了解
    let num = 10;
    try {
        console.log(num);  // try...catch捕获的是runtime时的异常
        let num = 20;
    } catch (e) {
        console.log(e)  // catch为处理异常的分支
    } finally {
        console.log('无论是否出现异常,该分支都会被执行')
    }
</script>
四、函数初级
什么是函数: 具有特定功能的代码块

函数与方法的区别: 调用方式的不同: 函数通过函数名 | 方法通过调用者.语法调用

如何定义函数:

  function 函数名(参数列表){
      函数体
  }
函数的分类:

无参函数:

  function fn1(){
      console.log("无参函数")
  }
  fn1();
有参函数:

  function fn2(a,b){
      console.log("a,b的和:".a + b)
  }
  fn2(10,20);
 
1、函数的定义
ES5中定义函数

  function 函数名 (参数列表) {
      函数体;
  }
  ​
  var 函数名 = function (参数列表) {
      函数体;
  }
ES6中定义函数

  let 函数名 = (参数列表) => {
      函数体;
  }
匿名函数
  (function (参数列表) {
      函数体;
  })
  ​
  // 匿名函数需要自调用
  (function (参数列表) {
      函数体;
  })(参数列表);
 
  var fn3=function(){
      // 匿名函数虽然没有名字,但会开辟内存空间,所以当然可以用一个变量来指向这个内存空间
       console.log("没有直接定义名字的函数")
  }
  fn3();
匿名函数的自调用:

  (function(){
      // 定义一个匿名函数,至少需要使用一次,使用一次的方式就叫做匿名函数的自调用
      // 如果匿名函数不存在任何使用,编译就无法通过
      // 匿名函数的自调用:
      //    1.将整个匿名函数作为一个整体,用()将其包裹
      //    2.完成函数的调用,添加参数列表
      console.log("匿名函数的自调用")
  })()
为什么要出现匿名函数的自调用

在ES5 的时候,没有块级作用域的概念,想要产生局部作用域的变量只能通过在函数体内部定义变量了, 所以匿名函数的自调用很多时候是为了生成一个局部的作用域

  (function(){
      // 为了生成一个局部作用域
      var num = 10;
  })();
2、函数的调用
函数名(参数列表)

注意: 函数的调用()一定不可以省略,参数列表看情况(不管需不需要,均可以传或不传)

 

系统不会在()()之间添加; 作为结束语句,需要添加分号时一定需要手动添加

3、函数的参数
JS中有参函数调用的原则:

JS中只有位置参数,没有关键字参数
传参数的时候, 无论传多少个值,严格按照位置参数进行一一对应进行传值, 多传的参数没有对应的位置参数进行接收时会自动被丢弃
在传参的时候指定哪个值为多少时要按照位置进行传值,按照参数名进行传值是无效的
    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中函数传参时的大致规则:

个数不需要统一

  function fn (a, b, c) {
      console.log(a, b, c);  // 100 undefined undefined
  }
  fn(100);
  ​
  function fn (a) {
      console.log(a)  // 100
  }
  fn(100, 200, 300)  // 200,300被丢弃
可以任意位置具有默认值

  function fn (a, b=20, c, d=40) {
      console.log(a, b, c, d);  // 100 200 300 40
  }
  fn(100, 200, 300);
通过...语法接收多个值

  function fn (a, ...b) {
      console.log(a, b);  // 100 [200 300]
  }
  fn(100, 200, 300);
  // ...变量必须出现在参数列表最后
函数的参数小结::
    1.实参与形参个数可以不匹配,随意规定
    2.形参可以设置默认值(并非为py中的关键字参数)
    3.实参对形参进行传值时,完全采用位置匹配(eg:第n个实参一定将值传递给第n个形参)

4、返回值
  function fn () {
      return 返回值;
  }
  // 1.可以空return操作，用来结束函数
  // 2.返回值可以为任意js类型数据
  // 3.函数最多只能拥有一个返回值
js的函数只能返回一个值, 这个值可以为任意类型(如果想返回多个值,将多个值放到数组或对象中)

    let func4 = () => {
        // return 1000, 8888, 6666;  // 这种情况返回的是最后一个值
        return [1000, 8888, 6666];
    };
    console.log(func4())
函数的返回值小结::
    1.函数的返回值有return来明确,没有明确,则相当于返回undefined
    2.函数只能返回一个值
    3.函数的返回值就是函数的执行结果,也就是函数值
---------------------
原文：https://blog.csdn.net/Onion_cy/article/details/85075731