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

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

一、流程控制

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

1. 顺序：地球人都知道，不用讲了

2. 分支：单分支，双分支（三元语法），多分支

// 单分支
let Scores = 68;
if (Scores >= 60) {
  console.log("及格");
}
// 双分支
Scores = 55;
if (Scores >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}
// 知识点：双分支使用频繁，系统提供了“语法糖”，即三元语法
// 三元语法：  条件?为True时值:为False时值
let wang = Scores >= 60 ? "及格" : "不及格";
console.log(wang);
// 多分支
// 1. 传统多分支
Scores = 95;
if (Scores < 60) {
  console.log("D");
} else if (60 <= Scores && Scores < 75) {
  console.log("C");
} else if (75 <= Scores && Scores < 85) {
  console.log("B");
} else if (85 <= Scores && Scores < 95) {
  console.log("A");
} else {
  console.log("A+");
}
// 2. switch分支
function grade(Scores) {
  switch (true) {
    case Scores < 60:
      return "D";
      break;
    case 60 <= Scores && Scores < 75:
      return "C";
      break;
    case 75 <= Scores && Scores < 85:
      return "B";
      break;
    case 85 <= Scores && Scores < 95:
      return "A";
      break;
    default:
      return "A+";
  }
}
console.log(grade(88));
// 3. switch分支单值判断
function language(lang) {
  lang = lang;
  // 转换为小写
  switch (lang.toLowerCase()) {
    case "html":
      return "超文本标记语言";
      break;
    case "css":
      return "层叠样式";
      break;
    case "javascript": // 没有break，往下执行
    case "js":
      return "脚本编程语言";
      break;
    default:
      return "I don't know！";
  }
}
console.log(language("css"));

3. 循环

// while循环：入口型判断：条件为真时才循环
let Name = ["张", "王", "赵", "李"];
function getValue(Name) {
  i = 0;
  while (i < Name.length) {
    console.log(Name[i]);
    i++;
  }
}
getValue(Name);
// do {} while ()循环：出口型判断。必须执行一次代码块
i = 0;
do {
  console.log(Name[i]);
  i++;
} while (i < Name.length);
// for循环：是while循环的简化
// 语法：for (初始条件；循环条件；更新条件){...}
for (let i = 0; i < Name.length; i++) {
  console.log(Name[i]);
}
// for  of {} 循环，用于遍历数组
// 输出数组中的 "键和值" 对组成的数组
for (let peo of Name.entries()) {
  console.log(peo);
}
// 输出数组中的 "值" 对组成的数组
for (let peo of Name.values()) {
  console.log(peo);
}
// 默认为values
for (let peo of Name) {
  console.log(peo);
}
// for in {} 循环，用于遍历对象
const wei = {
  Name: "韦小宝",
  cry: function () {
    return "疯了！";
  },
};
for (let key in wei) {
  console.log(wei[key]);
}
// 数组也是对象，但是不要用这个in来遍历

二、函数的参数与返回值

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

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

2. 参数过多情况：用…

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

3. 返回值：如何返回多值，用数组或对象

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

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

• 属性简化

// 对象字面量的简化;
// 属性简化
let name = "张三丰";
let sect = "武当派";
let nover = { name, sect };
// 说明：对象属性名与变量名相同，并且在同一个作用域时，可简写
// 对象nover的属性属于对象，对象与变量在同一个作用域
console.log(nover.name + nover.sect);
// 显示：张三丰武当派

• 方法简化

// 方法简化
// 正常
let col = "蓝色";
let f = {
  col,
  c: function () {
    return this.col;
  },
};
console.log(f.c());
// 简化：省function
f = {
  col,
  c() {
    return this.col;
  },
};
console.log(f.c());

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

• 先复习一下模板字面量

// 先复习一下模板字面量;
const novel = {
  name: "刘备",
  king: "蜀国",
  book: "《三国志》",
};
console.log(
  `中国玩家都爱玩${novel.book}，都喜欢${novel.king}的皇帝${novel.name}`
);
// 显示：中国玩家都爱玩《三国志》，都喜欢蜀国的皇帝刘备 
console.log(`${55 > 60 ? "及格" : "不及格"}`); 
//显示：不及格

• 模板函数：使用模板字面量为参数的函数
• 模板函数(第一个参数是字面量组成的数组,第二个参数起,是字面量中的插值列表)

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

• 调用要用反引号

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