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

流程控制、字面量与函数

程序员文章站 2022-05-16 21:25:46
...

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

1、流程控制:分支

①单分支

单分支:仅当表达式计算结果为真时, 才执行代码块;

  1. let age = 29;
  2. if (age >= 18) {
  3. console.log("允许观看");
  4. }

②双分支

根据条件,有2条不同的执行语句;
一般样式:

  1. age = 15;
  2. if (age >= 18) {
  3. console.log("允许观看");
  4. } else {
  5. console.log("少儿不宜");
  6. }

“语法糖”样式:

  1. age = 30;
  2. console.log(age >= 18 ? "允许观看" : "少儿不宜");

③多分支

有多个条件的执行语句;
if…else写法:

  1. age = 12;
  2. if (age >= 18 && age < 35) {
  3. console.log("允许单独收看");
  4. } else if (age >= 45 && age < 60) {
  5. console.log("建议二人收看");
  6. } else if (age >= 60 && age < 120) {
  7. console.log("建议家人陪同收看");
  8. } else if (age >= 120 || age <= 3) {
  9. console.log("非法年龄");
  10. } else {
  11. console.log("少儿不宜观看");
  12. }

Switch写法:

  1. age = 46;
  2. // * 区间判断, 使用 true
  3. switch (true) {
  4. case age >= 18 && age < 35:
  5. console.log("允许单独收看");
  6. break;
  7. case age >= 45 && age < 60:
  8. console.log("建议二人收看");
  9. break;
  10. case age >= 60 && age < 120:
  11. console.log("建议家人陪同收看");
  12. break;
  13. case age >= 120 || age <= 3:
  14. console.log("非法年龄");
  15. break;
  16. default:
  17. console.log("少儿不宜观看");
  18. break;
  19. }

2、流程控制:循环

循环三条件
a. 初始条件: 数组索引的引用 ( i = 0 )
b. 循环条件: 为真才执行循环体 ( i < arr.length )
c. 更新条件: 必须要有,否则进入死循环 ( i++ )

①While语句循环:

  1. const colors = ["red", "green", "blue"];
  2. i = 0;
  3. while (i < length) {
  4. console.log(colors[i]);
  5. i++;
  6. }

②do…while语句循环:

  1. const colors = ["red", "green", "blue"];
  2. i = 0;
  3. do {
  4. console.log(colors[i]);
  5. i++;
  6. } while (i < length);

③for语句循环:

  1. const colors = ["red", "green", "blue"];
  2. for (let i = 0, length = colors.length; i < length; i++) {
  3. console.log(colors[i]);
  4. }

④for…of语句循环:

  1. const colors = ["red", "green", "blue"];
  2. for (let item of colors) {
  3. console.log(item);
  4. }

⑤for…in语句循环:

  1. const colors = ["red", "green", "blue"];
  2. const obj = { a: 1, b: 2, c: 3, say: function () {} };
  3. //遍历对象
  4. for (let key in obj) {
  5. console.log(obj[key]);
  6. }
  7. //遍历数组
  8. for (let key in colors) {
  9. console.log(colors[key]);
  10. }

二、函数参数与返回值

1、函数参数

①参数不足: 默认参数:

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

②参数过多, …rest:

  1. f = (a, b, c, ...arr) => `${a},${b},${c},${arr}`;
  2. console.log(f(1, 2, 3, 4, 5, 6, 7, 8));
  1. // 计算任何数量的数据之和
  2. f = (...arr) => arr.reduce((a, b) => a + b);
  3. console.log(f(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));

2、函数返回值

  1. // * 数组
  2. f = () => [1, 2, 3];
  3. console.log(f());
  1. // * 对象: 模块
  2. f = () => ({ a: 1, b: 2, get: function () {} });
  3. console.log(f());

3、对象字面量简化版

  1. let name = "Harvey";
  2. user = {
  3. name,
  4. getName() {
  5. return this.name;
  6. },
  7. };
  8. console.log(user.getName());

4、模板字面量

  1. console.log(`Hello world`);

模板字面量中,可以使用”插值”(变量,表达式),可以解析变量

  1. let name = "Harvey";
  2. console.log("Hello " + name);
  1. console.log(`${10 < 20 ? "大于" : "小于"}`);

5、模板函数

就是使用”模板字面量’为参数的函数;

  1. function sum(strings, ...args) {
  2. console.log(strings);
  3. console.log(args);
  4. console.log(`[${args.join()}]之和是: ${args.reduce((a, b) => a + b)}`);
  5. }
  6. //调用
  7. sum`计算多个数的和:${1}${2}${3}${4}${5}${6}${7}`;