欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript 流程控制

程序员文章站 2022-05-21 23:22:51
...

JavaScript 流程控制

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

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

  • 单分支
    仅当表达结果为真时,才执行代码块
    例如:
  1. let age = 18;
  2. if (age >= 18) {
  3. console.log("您已通过防沉迷验证");
  4. }
  • 双分支
    有一个默认分支,例如:
  1. let age = 16;
  2. if (age >= 18) {
  3. console.log("您已通过防沉迷验证");
  4. } else {
  5. console.log("对不起,您未通过防沉迷验证");
  6. }

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

  1. const age_judgment =
  2. age >= 18 ? "您已通过防沉迷验证" : "对不起,您未通过防沉迷验证";
  3. console.log(age_judgment);
  • 多分支
    定义:有多个默认分支
    例如:
  1. {
  2. let age = 18;
  3. const Age12_17 = 2;
  4. const Age18_59 = 8;
  5. const Age6and60 = 0;
  6. if (age >= 12 && age < 18) {
  7. console.log(`您已通过防沉迷系统验证【剩余游戏时间:${Age12_17}】小时`);
  8. } else if (age >= 18 && age < 60) {
  9. console.log(`您已通过防沉迷系统验证【剩余游戏时间:${Age18_59}】小时`);
  10. } else if (age <= 6 || age >= 60) {
  11. console.log(
  12. `!!!疑似非法年龄,您未通过防沉迷系统验证【剩余游戏时间:${Age6and60}】小时`
  13. );
  14. } else {
  15. console.log("抱歉,您未通过防沉迷验证");
  16. }
  17. }
  • 多分支 switch
  1. {
  2. // switch
  3. let age = 10;
  4. const Age12_17 = 2;
  5. const Age18_59 = 8;
  6. const Age6and60 = 0;
  7. switch (true) {
  8. case age >= 12 && age < 18:
  9. console.log(`您已通过防沉迷系统验证【剩余游戏时间:${Age12_17}】小时`);
  10. break;
  11. case age >= 18 && age < 60:
  12. console.log(`您已通过防沉迷系统验证【剩余游戏时间:${Age18_59}】小时`);
  13. break;
  14. case age <= 6 || age >= 60:
  15. console.log(
  16. `!!!疑似非法年龄,您未通过防沉迷系统验证【剩余游戏时间:${Age6and60}】小时`
  17. );
  18. break;
  19. default:
  20. console.log("抱歉,您未通过防沉迷验证");
  21. }
  22. }

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

  1. {
  2. // vip判断(switch)
  3. let vip = 0;
  4. switch (vip) {
  5. case 0:
  6. console.log("您是普通会员");
  7. break;
  8. case 1:
  9. console.log("您是vip会员");
  10. break;
  11. case 2:
  12. console.log("您是svip会员");
  13. break;
  14. default:
  15. console.log("非法值");
  16. }
  17. }
  • 循环
    while(入口型判断)循环:
  1. {
  2. const array = ["name", "id", "email"];
  3. let i = 0;
  4. while (i < array.length) {
  5. console.log(array[i]);
  6. i++;
  7. }
  8. }
  • 循环三条件

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

  • do while 循环(出口型循环)

  1. {
  2. const array = ["name", "id", "email"];
  3. let i = 0;
  4. do {
  5. console.log(array[i]);
  6. i++;
  7. } while (i > array.length);
  8. }

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

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

for of 遍历数组

  1. {
  2. const array = ["name", "id", "email"];
  3. for (let id of array) {
  4. console.log(array);
  5. }
  6. }

for in 遍历对象

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

函数的参数与返回值

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

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

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

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

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

  1. {
  2. let demo=(a,b,...i)=>i;
  3. console.log(demo(1,2,3,4));
  4. }
  • 返回值
    函数默认“单值返回”
    如何返回多个值?
    1.返回数组
  1. {
  2. f1=()=>[1,2,3]
  3. console.log(f1());
  4. }

2.返回对象(模块)

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

扩展

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

    1. {
    2. const name = "小夫";
    3. let user = {
    4. name,
    5. number: 18888888888,
    6. };
    7. console.log(user.name);
    8. }

    方法的简化:

  1. {
  2. const name = "小夫";
  3. const user = {
  4. name,
  5. getName() {
  6. return this.name;
  7. },
  8. };
  9. console.log(user.getName());
  10. }

模板字面量与模板函数

  • 模板字面量
    模板字面量中可以使用插值(变量,表达式)可以解析变量
    例如:
  1. {
  2. const name = "小夫";
  3. console.log(`我的名字是:${name}`);
  4. }

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

  • 模板函数
    定义:使用模板字面量为参数的函数
    第一个参数是字面量组成的数组,第二个参数起,是字面量中的插值列表
    例如:
  1. {
  2. function sum(zimianliang, ...args) {
  3. console.log(`${zimianliang}${args}`);
  4. }
  5. sum`这些数都有${1}${2}${3}${4}`;
  6. }

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