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

流程控制、函数的参数与返回值、对象字面量的简化、模板函数总结

程序员文章站 2022-03-13 12:41:29
...

流程控制、函数的参数与返回值、对象字面量的简化、模板函数总结

一、流程控制

程序执行流程:顺序、分支、循环

1. 顺序:地球人都知道,不用讲了

2. 分支:单分支,双分支(三元语法),多分支

  1. // 单分支
  2. let Scores = 68;
  3. if (Scores >= 60) {
  4. console.log("及格");
  5. }
  6. // 双分支
  7. Scores = 55;
  8. if (Scores >= 60) {
  9. console.log("及格");
  10. } else {
  11. console.log("不及格");
  12. }
  13. // 知识点:双分支使用频繁,系统提供了“语法糖”,即三元语法
  14. // 三元语法: 条件?为True时值:为False时值
  15. let wang = Scores >= 60 ? "及格" : "不及格";
  16. console.log(wang);
  17. // 多分支
  18. // 1. 传统多分支
  19. Scores = 95;
  20. if (Scores < 60) {
  21. console.log("D");
  22. } else if (60 <= Scores && Scores < 75) {
  23. console.log("C");
  24. } else if (75 <= Scores && Scores < 85) {
  25. console.log("B");
  26. } else if (85 <= Scores && Scores < 95) {
  27. console.log("A");
  28. } else {
  29. console.log("A+");
  30. }
  31. // 2. switch分支
  32. function grade(Scores) {
  33. switch (true) {
  34. case Scores < 60:
  35. return "D";
  36. break;
  37. case 60 <= Scores && Scores < 75:
  38. return "C";
  39. break;
  40. case 75 <= Scores && Scores < 85:
  41. return "B";
  42. break;
  43. case 85 <= Scores && Scores < 95:
  44. return "A";
  45. break;
  46. default:
  47. return "A+";
  48. }
  49. }
  50. console.log(grade(88));
  51. // 3. switch分支单值判断
  52. function language(lang) {
  53. lang = lang;
  54. // 转换为小写
  55. switch (lang.toLowerCase()) {
  56. case "html":
  57. return "超文本标记语言";
  58. break;
  59. case "css":
  60. return "层叠样式";
  61. break;
  62. case "javascript": // 没有break,往下执行
  63. case "js":
  64. return "脚本编程语言";
  65. break;
  66. default:
  67. return "I don't know!";
  68. }
  69. }
  70. console.log(language("css"));

3. 循环

  1. // while循环:入口型判断:条件为真时才循环
  2. let Name = ["张", "王", "赵", "李"];
  3. function getValue(Name) {
  4. i = 0;
  5. while (i < Name.length) {
  6. console.log(Name[i]);
  7. i++;
  8. }
  9. }
  10. getValue(Name);
  11. // do {} while ()循环:出口型判断。必须执行一次代码块
  12. i = 0;
  13. do {
  14. console.log(Name[i]);
  15. i++;
  16. } while (i < Name.length);
  17. // for循环:是while循环的简化
  18. // 语法:for (初始条件;循环条件;更新条件){...}
  19. for (let i = 0; i < Name.length; i++) {
  20. console.log(Name[i]);
  21. }
  22. // for of {} 循环,用于遍历数组
  23. // 输出数组中的 "键和值" 对组成的数组
  24. for (let peo of Name.entries()) {
  25. console.log(peo);
  26. }
  27. // 输出数组中的 "值" 对组成的数组
  28. for (let peo of Name.values()) {
  29. console.log(peo);
  30. }
  31. // 默认为values
  32. for (let peo of Name) {
  33. console.log(peo);
  34. }
  35. // for in {} 循环,用于遍历对象
  36. const wei = {
  37. Name: "韦小宝",
  38. cry: function () {
  39. return "疯了!";
  40. },
  41. };
  42. for (let key in wei) {
  43. console.log(wei[key]);
  44. }
  45. // 数组也是对象,但是不要用这个in来遍历

二、函数的参数与返回值

1. 参数不足情况:设置默认参数

  1. // 1. 参数不足情况:设置默认参数
  2. // 顺便复习箭头函数
  3. let add = (a, b) => a + b;
  4. console.log(add("小王", "和小李"));
  5. console.log(add("小王")); //这句少参数出错
  6. // 设置默认参数
  7. add = (a, b = "不在") => a + b;
  8. console.log(add("小王"));

2. 参数过多情况:用…

  1. // 2. 参数过多情况:用...
  2. let f = (a, b) => a + b;
  3. console.log(f(5, 6, 7, 8)); //后面两参数无效
  4. // 用...接收多出的参数
  5. // 顺便复习模板变量
  6. f = (a, b, ...add) => `${a}交了${b}元学习${add}`;
  7. console.log(f("小张", 5000, "Html", "Js", "Css"));
  8. // 显示:小张交了5000元学习Html,Js,Css

3. 返回值:如何返回多值,用数组或对象

  1. // 返回值
  2. // 如何返回多值:返回值用数组或对象
  3. f = () => ["韦小宝", "张三丰", "小鱼儿"];
  4. console.log(f());
  5. // 显示:[ '韦小宝', '张三丰', '小鱼儿' ]

三、对象字面量的简化方案

  • 属性简化
  1. // 对象字面量的简化;
  2. // 属性简化
  3. let name = "张三丰";
  4. let sect = "武当派";
  5. let nover = { name, sect };
  6. // 说明:对象属性名与变量名相同,并且在同一个作用域时,可简写
  7. // 对象nover的属性属于对象,对象与变量在同一个作用域
  8. console.log(nover.name + nover.sect);
  9. // 显示:张三丰武当派
  • 方法简化
  1. // 方法简化
  2. // 正常
  3. let col = "蓝色";
  4. let f = {
  5. col,
  6. c: function () {
  7. return this.col;
  8. },
  9. };
  10. console.log(f.c());
  11. // 简化:省function
  12. f = {
  13. col,
  14. c() {
  15. return this.col;
  16. },
  17. };
  18. console.log(f.c());

四、模板字面量 与 模板函数

  • 先复习一下模板字面量
  1. // 先复习一下模板字面量;
  2. const novel = {
  3. name: "刘备",
  4. king: "蜀国",
  5. book: "《三国志》",
  6. };
  7. console.log(
  8. `中国玩家都爱玩${novel.book},都喜欢${novel.king}的皇帝${novel.name}`
  9. );
  10. // 显示:中国玩家都爱玩《三国志》,都喜欢蜀国的皇帝刘备 
  11. console.log(`${55 > 60 ? "及格" : "不及格"}`);
  12. //显示:不及格
  • 模板函数:使用模板字面量为参数的函数
  • 模板函数(第一个参数是字面量组成的数组,第二个参数起,是字面量中的插值列表)

模板字面量:也叫”模板字符串” ,

  • 调用要用反引号
  1. // 模板函数
  2. // -模板函数(第一个参数是字面量组成的数组, 第二个参数起, 是字面量中的插值列表) -
  3. // 调用要用反引号;
  4. function n(str, a, b) {
  5. console.log(str); // 显示:[ '', '和', '都是亚洲国家。' ]
  6. console.log(a); // 显示:日本
  7. console.log(b); // 显示:印度
  8. }
  9. // 调用函数,传入字面量数组:str=[ '', '和', '都是亚洲国家。' ]
  10. // 传入插值:日本 印度
  11. n`${"日本"}和${"印度"}都是亚洲国家。`;
  12. // 模板函数的优化, 以后只用这一种;
  13. // 使用...变量名,接收所有插值
  14. function z(str, ...num) {
  15. console.log(str); //显示:[ '国家列表:', '' ]
  16. console.log(arr); //显示:[ '中国', '俄罗斯', '英国', '意大利', '西班牙' ]
  17. }
  18. let arr = ["中国", "俄罗斯", "英国", "意大利", "西班牙"];
  19. z`国家列表:${arr}`;