JavaScript 流程控制

JavaScript 流程控制

• 程序默认执行流程 1.顺序：默认
  2.分支：单分支，双分支，多分支
  3.循环：单分支的重复执行

• 分支
  定义：有条件地执行某个代码块。

• 单分支
  仅当表达结果为真时，才执行代码块
  例如：

let age = 18;
if (age >= 18) {
  console.log("您已通过防沉迷验证");
}

• 双分支
  有一个默认分支，例如：

let age = 16;
if (age >= 18) {
  console.log("您已通过防沉迷验证");
} else {
  console.log("对不起，您未通过防沉迷验证");
}

双分支属于高频操作，系统提供了一个“语法糖”（简化方案）：三元
上方的代码在经过简化之后呢效果是这样的：

const age_judgment =
  age >= 18 ? "您已通过防沉迷验证" : "对不起，您未通过防沉迷验证";
  console.log(age_judgment);

• 多分支
  定义：有多个默认分支
  例如：

{
  let age = 18;
  const Age12_17 = 2;
  const Age18_59 = 8;
  const Age6and60 = 0;
  if (age >= 12 && age < 18) {
    console.log(`您已通过防沉迷系统验证【剩余游戏时间:${Age12_17}】小时`);
  } else if (age >= 18 && age < 60) {
    console.log(`您已通过防沉迷系统验证【剩余游戏时间:${Age18_59}】小时`);
  } else if (age <= 6 || age >= 60) {
    console.log(
      `!!!疑似非法年龄，您未通过防沉迷系统验证【剩余游戏时间:${Age6and60}】小时`
    );
  } else {
    console.log("抱歉，您未通过防沉迷验证");
  }
}

• 多分支 switch

{
  // switch
  let age = 10;
  const Age12_17 = 2;
  const Age18_59 = 8;
  const Age6and60 = 0;
  switch (true) {
    case age >= 12 && age < 18:
      console.log(`您已通过防沉迷系统验证【剩余游戏时间:${Age12_17}】小时`);
      break;
    case age >= 18 && age < 60:
      console.log(`您已通过防沉迷系统验证【剩余游戏时间:${Age18_59}】小时`);
      break;
    case age <= 6 || age >= 60:
      console.log(
        `!!!疑似非法年龄，您未通过防沉迷系统验证【剩余游戏时间:${Age6and60}】小时`
      );
      break;
    default:
      console.log("抱歉，您未通过防沉迷验证");
  }
}

区间判断：true 单值判断：变量

{
  // vip判断(switch)
  let vip = 0;
  switch (vip) {
    case 0:
      console.log("您是普通会员");
      break;
    case 1:
      console.log("您是vip会员");
      break;
    case 2:
      console.log("您是svip会员");
      break;
    default:
      console.log("非法值");
  }
}

• 循环
  while(入口型判断)循环:

{
  const array = ["name", "id", "email"];
  let i = 0;
  while (i < array.length) {
    console.log(array[i]);
    i++;
  }
}

• 循环三条件

  1.初始条件 2.循环条件：为真才执行循环 3.更新条件：必须要有，否则进入死循环

• do while 循环（出口型循环）

{
  const array = ["name", "id", "email"];
  let i = 0;
  do {
    console.log(array[i]);
    i++;
  } while (i > array.length);
}

for 循环是 while 循环的一个简化
for(初始条件;循环条件;更新条件){…}

{
  const array = ["name", "id", "email"];
  for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
  }
}

for of 遍历数组

{
  const array = ["name", "id", "email"];
  for (let id of array) {
    console.log(array);
  }
}

for in 遍历对象

{
  const obj = { name: "admin", id: 1, email: "123456@qq.com" };
  for(let key in obj){
    console.log(obj[key]);
  }
}

函数的参数与返回值

• 函数的参数
  1.参数不足
  我们来看一段代码：这段代码中我们声明了一个名为 demo 的函数给他了两个参数值，但是调用的时候只给他传了一个参数，就会出现 Nan 的结果。那么如何解决呢？

  {
    let demo = (a, b) => a + b;
  console.log(demo(1));
  }

  很简单，只需要给参数一个默认值就可以了

  {
    let demo = (a, b=0) => a + b;
  console.log(demo(1));
  }

  2.参数过多（正常情况下多传过去的参数会被忽略）
  多余的参数如何接收？
  …:rest 语法，剩余参数，归并参数，将所有参数全部压缩到一个数组当中。用在集合数据上，可以将它展开成一个个独立的元素，在调用的时候。

{
    let demo=(a,b,...i)=>i;
    console.log(demo(1,2,3,4));
}

• 返回值
  函数默认“单值返回”
  如何返回多个值？
  1.返回数组

{
  f1=()=>[1,2,3]
  console.log(f1());
}

2.返回对象（模块）

{
  f2 = () => ({ a: 1, b: 2, c: 3, get: function () {} });
  console.log(f2());
}

扩展

• 对象字面量的简化，推荐使用
  属性简化：变量 name 与属性的 name 同名，并且在同一个作用域中，可以不写变量名。

  {
  const name = "小夫";
  let user = {
    name,
    number: 18888888888,
  };
  console.log(user.name);
  }

  方法的简化：

{
  const name = "小夫";
  const user = {
    name,
    getName() {
      return this.name;
    },
  };
  console.log(user.getName());
}

模板字面量与模板函数

• 模板字面量
  模板字面量中可以使用插值(变量，表达式)可以解析变量
  例如：

{
  const name = "小夫";
  console.log(`我的名字是:${name}`);
}

变量，表达式等插值使用${...}插入到模板字面量中

• 模板函数
  定义：使用模板字面量为参数的函数
  第一个参数是字面量组成的数组，第二个参数起，是字面量中的插值列表
  例如：

{
  function sum(zimianliang, ...args) {
      console.log(`${zimianliang}${args}`);
  }
  sum`这些数都有${1}${2}${3}${4}`;
}

1.模板字面量：可以使用插值表达式的字符串
2.模板函数：可以使用“模板字面量”为参数的函数
3.模板函数就是在“模板字面量“之前加一个标签/标识符，而这个标签，就是一个函数名
4.模板函数的参数是有约定的，不能乱写，第一个是字面量数组，从第二个起才是内部的占位符参数