Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS流程控制和模板字面量及模板函数的学习
Blogger Information
Blog 14
fans 0
comment 0
visits 8287
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS流程控制和模板字面量及模板函数的学习
#三生
Original
676 people have browsed it

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

流程控制：

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

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}`;
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post