博客列表 >JS 流程控制(分支与循环)、函数的参数(不足、剩余)、函数返回值(返回数组与对象)、对象字面量的简化、模板字面量、模板函数

JS 流程控制(分支与循环)、函数的参数(不足、剩余)、函数返回值(返回数组与对象)、对象字面量的简化、模板字面量、模板函数

赵大叔
赵大叔原创
2022年01月02日 22:13:01552浏览

JS 流程控制分支与循环(if、switch、while、do…while、for-of、for-in)

  • 程序默认执行流程:顺序(默认)

分支

  1. // JS 流程控制分支(if、switch)
  2. // 程序默认执行流程:顺序(默认)
  3. // 单分支
  4. let salary = 36000;
  5. // salary >= 36000 true: 执行
  6. if (salary >= 36000) {
  7. console.log("需要交税");
  8. }
  9. // 双分支: 在单分支基础上加一个"默认分支"
  10. salary = 36000;
  11. if (salary >= 36000) {
  12. console.log("税率:3%+");
  13. }
  14. // * 默认分支
  15. else {
  16. console.log("税率:3%");
  17. }
  18. // 双分支的简化语法,三元运算符
  19. // 语法: (条件) ? true : false
  20. salary = 30000;
  21. salary >= 36000 ? console.log('税率:3%+') : console.log('税率:3%');
  22. // 多分支: 有多个"默认分支"
  23. salary = 960001;
  24. if (36000 < salary <= 144000) {
  25. console.log("税率:10% - 2520");
  26. }
  27. // * 第1个默认分支
  28. else if (144000 < salary <= 300000) {
  29. console.log("税率:20% - 16920");
  30. }
  31. // * 第2个默认分支
  32. else if (300000 < salary <= 420000) {
  33. console.log("税率:25% - 31920");
  34. }
  35. // * 第3个默认分支: 异常分支, 使用 "||" 或 , 满足条件之一就可以了, true
  36. else if (420000 < salary <= 660000) {
  37. console.log("税率:30% - 52920");
  38. }
  39. else if (660000 < salary <= 960000) {
  40. console.log("税率:35% - 85920");
  41. }
  42. // * 默认分支(可选)
  43. else {
  44. console.log("税率:45% - 181920");
  45. }
  46. // switch 进行优化
  47. // 多分支 switch
  48. salary = 960001;
  49. // * 区间判断, 使用 true
  50. switch (true) {
  51. case salary <= 36000:
  52. console.log("个税:3% - 0");
  53. break;
  54. case 36000 < salary && salary <= 144000:
  55. console.log("税率:10% - 2520");
  56. break;
  57. case 144000 < salary && salary <= 300000:
  58. console.log("税率:20% - 16920");
  59. break;
  60. case 300000 < salary && salary <= 420000:
  61. console.log("税率:25% - 31920");
  62. break;
  63. case 420000 < salary && salary <= 660000:
  64. console.log("税率:30% - 52920");
  65. break;
  66. case 660000 < salary && salary <= 960000:
  67. console.log("税率:35% - 85920");
  68. break;
  69. default:
  70. console.log("税率:45% - 181920");
  71. }
  72. // 单值判断: 变量
  73. let lang = "html";
  74. lang = "css";
  75. lang = "javascript";
  76. lang = "js";
  77. lang = "CSS";
  78. lang = "JavaScript";
  79. lang = "HTML";
  80. console.log(lang.toLowerCase());
  81. switch (lang.toLowerCase()) {
  82. // 将传入的进行判断的变量值,进行统一化
  83. // 将传入的字符串, 全部小写, 或者 大写
  84. case "html":
  85. console.log("超文本标记语言");
  86. break;
  87. case "css":
  88. console.log("层叠样式表");
  89. break;
  90. case "javascript":
  91. case "js":
  92. console.log("通用前端脚本编程语言");
  93. break;
  94. default:
  95. console.log("不能识别");
  96. }

循环

  1. // 流程控制: 循环
  2. /**
  3. * * 循环三条件
  4. * * 1. 初始条件: 数组索引的引用 ( i = 0 )
  5. * * 2. 循环条件: 为真才执行循环体 ( i < arr.length )
  6. * * 3. 更新条件: 必须要有,否则进入死循环 ( i++ )
  7. */
  8. const numroom = ["101", "102", "105", 106, 107];
  9. // !while 循环
  10. i = 0;
  11. while (i < numroom.length) {
  12. console.log(numroom[i]);
  13. // * 更新条件
  14. i++;
  15. }
  16. // * do {} while(), 出口型判断,无论条件是否成立, 必须执行一次代码块
  17. i = 0;
  18. do {
  19. console.log(numroom[i]);
  20. // * 更新条件
  21. i++;
  22. } while (i > numroom.length);
  23. // ! for () 是 while 的简化
  24. // * 语法: for (初始条件; 循环条件; 更新条件) {...}
  25. for (let i = 0; i < numroom.length; i++) {
  26. console.log(numroom[i]);
  27. }
  28. // 优化, 将数组长度,提前计算出来缓存到一个变量中
  29. for (let i = 0, length = numroom.length; i < length; i++) {
  30. console.log(numroom[i]);
  31. }
  32. // ! for - of : 快速迭代处理集合数据
  33. // * 数组内部有一个迭代器的方法, 可以用for-of
  34. // * for-of优点: 用户不必再去关心索引, 而将注意力集中到数组成员上
  35. // v 输出数组中的 "键值" 对组成的数组
  36. for (let item of numroom.entries()) {
  37. console.log(item);
  38. }
  39. // v 输出数组中的 "键" 对组成的数组
  40. for (let item of numroom.keys()) {
  41. console.log(item);
  42. }
  43. // v 输出数组中的 "值" 对组成的数组
  44. for (let item of numroom.values()) {
  45. console.log(item);
  46. }
  47. // ! 默认调用values(),输出值
  48. for (let item of numroom) {
  49. console.log(item);
  50. }
  51. // ! for - in: 遍历对象
  52. const obj = { '101': "sun", '102': "xu", '103': "du", noi: function () {} };
  53. // 遍历对象
  54. for (let key in obj) {
  55. console.log(obj[key]);
  56. }
  57. // 数组也是对象
  58. for (let i in numroom) {
  59. console.log(numroom[i]);
  60. }
  61. // 数组也能用for-in,但不要这么用, for - of, forEach, map...

函数的参数与返回值

参数不足: 使用默认函数,默认参数一般放最后

  1. f = (a, b = 0) => a + b;
  2. console.log(f(1));
  3. console.log(f(1, 2));

参数过多: 使用...rest

  • 将多余的参数以数组形式全部接收
  • 将数组形式参数展开
  1. // 将多余的参数,全部接收? ...rest
  2. f = (...arr) => arr;
  3. // ...: rest语法,剩余参数,归并参数,将所以参数全部压入到一个数组中
  4. console.log(f(1, 2, 3, 4, 5));
  5. // ...集合数据,可以将它"展开"成一个个独立的元素,用在调用的时候
  6. console.log(...[1, 2, 3, 4]);

函数返回值: 返回多值

  • 返回数组形式
  • 返回对象形式
  1. // * 数组
  2. f = () => [1, 2, 3];
  3. console.log(f());
  4. // * 对象: 模块
  5. f = () => ({ a: 1, b: 2, get: function () {} });
  6. console.log(f());

对象字面量的简化方案

  • 属性简化:1 变量 name 与 属性 name 同名;2 且在同一个作用域中,可以不写变量名
  • 方法简化:方法—本质仍是属性,只不过它的值是一个函数声明
  • 方法简化不能用箭头函数
  1. let name = "help";
  2. let user = {
  3. // 属性简化
  4. // name = name;
  5. name,
  6. /* function getName(){
  7. return user.name;
  8. } */
  9. getName() {
  10. return this.name;
  11. },
  12. };
  13. console.log(user.name());
  14. console.log(user.getName());

模板字面量

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

模板函数

  • 就是使用”模板字面量’为参数的函数
  • 模板函数(第一个参数是字面量组成的数组,第二个参数起,是字面量中的插值列表)
  1. // y 声明模板函数
  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. // y 调用模板函数
  9. total`数量: ${10}单价:${500}`;
  10. // ! 模板函数的优化, 以后只用这一种, 上面也要能看懂
  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. sum`计算多个数和: ${1}${2}${3}${4}`;
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议