search

博客列表 >JS流程控制和模板字面量及模板函数的学习

JS流程控制和模板字面量及模板函数的学习

#三生
#三生原创
2022年01月06日 02:32:22678浏览

一、流程控制的分支,循环

流程控制：

  • 在一个程序执行的过程中，名条代码的执行顺序对程序的结果是有直接影响的。
  • 很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
  • 简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行
  • 流程控制主要有三种结构,分别是：顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。

1.流程控制：顺序结构

是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行；

2.流程控制：分支结构

流程控制的分支

2.1.单分支
单分支语法：
  1. if（条件表达式）{
  2.    //执行语句
  3. }
单分支示例代码：
  1. // 仅当表达式计算结果为真时, 才执行代码块
  2. let age = 28;
  3. if (age >= 18) {
  4.   console.log("允许观看");
  5. }
2.2.双分支
双分支语法：
  1. if（条件表达式）{
  2.   //执行语句
  3. }else{
  4.   //执行语句
  5. }
双分支示例代码：
  1. //双分支: 有一个"默认分支"
  2. age = 15;
  3. if (age >= 18) {
  4.   console.log("允许观看");
  5. }
  6. else {
  7.   // * 默认分支
  8.   console.log("少儿不宜");
  9. }
2.3.多分支
多分支语法：
  1. if（条件表达式）{
  2.   //执行语句
  3. }else if（条件表达式）{
  4.   //执行语句
  5. }......else if（条件表达式）{
  6.   //可以有多个else if{执行语句}
  7. }else{
  8.   //可选
  9. }
多分支示例代码：
  1. //多分支: 有多个"默认分支"
  2. age = 50;
  3. let res = age >= 18 ? "允许观看" : "少儿不宜";
  4. age = 4;
  5. if (age >= 18 && age < 35) {
  6.   console.log("允许单独观看");
  7. }
  8. // * 第1个默认分支
  9. else if (age >= 35 && age < 60) {
  10.   console.log("建议二人观看");
  11. }
  12. // * 第2个默认分支
  13. else if (age >= 60 && age < 120) {
  14.   console.log("建议在家人陪同下观看");
  15. }
  16. // * 第3个默认分支: 异常分支, 使用 "||" 或 , 满足条件之一就可以了, true
  17. else if (age <= 3 || age >= 120) {
  18.   console.log("非法年龄");
  19. }
  20. // * 默认分支(可选)
  21. else {
  22.   console.log("少儿不宜");
  23. }
2.4.多分支 switch 区间判断
  • 传统多分, if - else if - else if —- , 代码混乱
  • 使用 switch 进行优化
多分支switch语法：
  1. switch (true) {
  2.   case 条件表达式:
  3.     //执行语句
  4.     break;
  5.   case 条件表达式:
  6.     //执行语句
  7.     break;
  8.   case 条件表达式:
  9.     //执行语句
  10.     break;
  11.   case 条件表达式:
  12.     //执行语句
  13.     break;
  14.   default:
  15.     //执行语句
  16. }
多分支switch示例代码：
  1. age = 15;
  2. // * 区间判断, 使用 true
  3. switch (true) {
  4.   case age >= 18 && age < 35:
  5.     console.log(允许单独观看);
  6.     break;
  7.   case age >= 35 && age < 60:
  8.     console.log("建议二人观看");
  9.     break;
  10.   case age > 60 && age < 120:
  11.     console.log("请在家人陪同下观看");
  12.     break;
  13.   case age <= 3 || age >= 120:
  14.     console.log("非法年龄");
  15.     break;
  16.   default:
  17.     console.log("少儿不宜");
  18. }
2.5.多分支 switch 单值判断
  • 传统多分, if - else if - else if —- , 代码混乱
  • 使用 switch 进行优化
多分支switch 单值语法：
  1. switch (lang.toLowerCase()) {
  2.   // 将传入的进行判断的变量值,进行统一化
  3.   // 将传入的字符串, 全部小写, 或者 大写
  4.   case "值":
  5.     //执行语句
  6.     break;
  7.   case "值":
  8.     //执行语句
  9.     break;
  10.   case "值1":
  11.   case "值2":
  12.     //执行语句
  13.     break;
  14.   default:
  15.     //执行语句
  16. }
多分支switch 单值示例代码：
  1. let lang = "html";
  2. switch (lang.toLowerCase()) {
  3.   // 将传入的进行判断的变量值,进行统一化
  4.   // 将传入的字符串, 全部小写, 或者 大写
  5.   case "html":
  6.     console.log("超文本标记语言");
  7.     break;
  8.   case "css":
  9.     console.log("层叠样式表");
  10.     break;
  11.   case "javascript":
  12.   case "js":
  13.     console.log("通用前端脚本编程语言");
  14.     break;
  15.   default:
  16.     console.log("不能识别");
  17. }

3.流程控制：循环

  • 循环三条件
    1.初始条件: 数组索引的引用 ( i = 0 )
    2.循环条件: 为真才执行循环体 ( i < arr.length )
    3.更新条件: 必须要有,否则进入死循环 ( i++ )
3.1.数组循环
数组循环示例代码：
  1. //定义一条数组
  2. const colors = ["red", "green", "blue"];
  3. //array是一个对象, 是对象就会有属性或方法
  6. console.log(colors.length);// colors.length 数组长度, 数组内的成员数量：3
  7. console.log(colors[2]);//2: blue
  8. console.log(colors[colors.length - 1]);//2: blue
  10. console.log(colors[3]);// 遍历结束的标记, 数组越界了, undefined
  11. console.log(colors[colors.length]);// 遍历结束的标记, 数组越界了, undefined
3.2.遍历循环
遍历循环示例代码：
  1. const colors = ["red", "green", "blue"];
  3. // 1. 起始索引:先声明一个当前索引
  4. let i = 0;
  6. //  2. 循环条件
  7. let length = colors.length;
  9. // 3. 更新条件
  10. // 让数据的索引,自动指向下一个成员, 更新必须在代码块中
  11. // ! 必须更新条件，否则进入死循环
  13. // 第1次遍历
  14. if (i < length) {
  15.   console.log(colors[i]); //red
  16.   i++;
  17. }
  18. console.log(i);//1
  20. // 第2次遍历
  21. if (i < length) {
  22.   console.log(colors[i]);//green
  23.   // * 更新条件
  24.   i++;
  25. }
  26. console.log(i);//2
  28. // 第3次遍历
  29. if (i < length) {
  30.   console.log(colors[i]);//blue
  31.   // * 更新条件
  32.   i++;
  33. }
  34. console.log(i);//3
  36. // 第4次遍历, 3 === length, i<length 为 false 不执行了
  37. if (i < length) {
  38.   console.log(colors[i]);
  39.   // * 更新条件
  40.   i++;
  41. }
  42. console.log(i);
3.3. while 循环

while 可以将上面的多次的if()遍历进行合并

while循环示例代码：
  1. const colors = ["red", "green", "blue"];
  2. let i = 0;
  3. let length = colors.length;
  4. while (i < length) {
  5.   console.log(colors[i]); //red, green, blue
  6.   // 更新条件
  7.   i++;
  8. }
3.4. do 循环

do {} while(), 出口型判断,无论条件是否成立, 必须执行一次代码块

do循环示例代码：
  1. const colors = ["red", "green", "blue"];
  2. let i = 0;
  3. let length = colors.length;
  5. do {
  6.   console.log(colors[i]);//不成立 输出red
  7.   // * 更新条件
  8.   i++;
  9. } while (i > length);
3.5. for 循环

语法: for (初始条件; 循环条件; 更新条件) {…}
优化: 将数组长度,提前计算出来缓存到一个变量中

for循环示例代码：
  1. const colors = ["red", "green", "blue"];
  2. let i = 0;
  3. let length = colors.length;
  5. for (let i = 0, length = colors.length; i < length; i++) {
  6.   console.log(colors[i]);
  7. }
3.6. 迭代器
  • 数组内部有一个迭代器的方法, 可以用for-of
  • for of:对数组操作循环
  • for-of优点: 用户不必再去关心索引, 而将注意力集中到数组成员上
for循环示例代码：
  1. const colors = ["red", "green", "blue"];
  2. let i = 0;
  3. let length = colors.length;
  5. // 输出数组中的 "键值" 对组成的数组
  6. for (let item of colors.entries()) {
  7.   console.log(item);
  8. }
  9. // 输出数组中的 "键" 对组成的数组
  10. for (let item of colors.keys()) {
  11.   console.log(item);
  12. }
  14. // 输出数组中的 "值" 对组成的数组
  15. for (let item of colors.values()) {
  16.   console.log(item);
  17. }
  19. // 默认调用values(),输出值
  20. for (let item of colors) {
  21.   console.log(item);
  22. }
  24. // for - in: 遍历对象
  25. const obj = { a: 1, b: 2, c: 3, say: function () {} };
  27. // 遍历对象
  28. for (let key in obj) {
  29.   console.log(obj[key]);
  30. }
  31. // 数组也是对象
  32. for (let i in colors) {
  33.   console.log(colors[i]);
  34. }

二、函数的参数与返回值

1.函数的参数
  1. // 参数不足: 默认参数
  2. let f = (a, b) => a + b;
  3. console.log(f(1, 2)); //3
  4. console.log(f(1)); //NaN
  6. // 解决方案: 默认参数
  7. f = (a, b = 2) => a + b;
  8. console.log(f(1)); //3
  9. console.log(f(1, 2)); //3
  11. // 数过多, ...rest
  12. f = (a, b) => a + b;
  13. console.log(f(1, 2, 3, 4)); //3  (多余的参数3,4忽略了)
  15. //参数过多的解决方案:
  16. f = (...a) => a;
  17. console.log(f(1, 2, 3, 4, 5, 6));
2.返回值

利用函数返回多个值

  1. // 数组
  2. f = () => ["名字", "年龄", "性别"];
  3. console.log(f()); //['名字', '年龄', '性别']
  4. // 拆分处理
  5. console.log(...f()); //名字 年龄 性别
  7. // 对象
  8. qq = () => ({ a: "名字", b: "年龄", c: "性别" });
  9. console.log(qq());//{ a: '名字', b: '年龄', c: '性别' }

三、字面量的简化方案

  1. let name = "猪老湿";
  3. // 属性简化
  4. let user = {
  5.     name: name,
  6. };
  7. console.log(user.name);//猪老湿
  9. // 方法简化
  10. user = {
  11.     name,
  12.     getName() {
  13.         return this.name;
  14.     },
  15. };
  16. console.log(user.name); //猪老湿
  17. console.log(user.getName());//猪老湿

四、 模板字面量

  • 模板字面量: 可以使用插值表达式的字符串
  • 模板字面量, 也叫”模板字符串” , 是同义词
  1. // 传统
  2. console.log("hello world");
  3. // 模板字面量
  4. console.log(`hello world`);
  5. // 模板字面量中,可以使用"插值"(变量,表达式),可以解析变量
  6. let name = "朱老师";
  7. console.log("Hello " + name);
  8. // 变量/表达式等插值,使用 ${...}插入到模板字面量中
  9. console.log(`Hello ${name}`);
  10. console.log(`10 + 20 = ${10 + 20}`);
  11. console.log(`${10 < 20 ? `大于` : `小于`}`);

五、模板函数

  • 模板函数: 可以使用”模板字面量”为参数的函数
  • 模板函数,就是在”模板字面量”之前加一个标签/标识符,而这个标签,就是一个函数名
  • 模板函数的参数是有约定的, 不能乱写, 第一个是字面量数组,从第二起才是内部的占位符参数
  • 模板函数也叫”标签函数”
  1. // 声明模板函数
  2. function total(strings, num, price) {
  3.     console.log(strings);
  4.     console.log(num, price);
  5. }
  6. let num = 10;
  7. let price = 20;
  8. // 调用模板函数
  9. total `数量: ${10}单价:${500}`;
  11. // 模板函数的优化, 推荐只用这一种：使用 ...rest 将插值进行合并
  12. function sum(strings, ...args) {
  13.     console.log(strings);
  14.     console.log(args);
  15.     console.log(`[${args.join()}] 之和是:  ${args.reduce((a, c) => a + c)}`);
  16. }
  17. #### 
  18. // 调用
  19. sum`计算多个数和: ${1}${2}${3}${4}`;
上一条：javascript中的闭包,访问器属性与类的创建与解构下一条：通过js获取元素表单以及遍历dom树和对元素的增删改查js操作内容演练实战了留言板的操作并对自定义属性: dataset对象初步的了解以及对js操作class和classList属性对象事件的添加与删除练习与了解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议