JS流程控制和模板字面量及模板函数的学习

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

流程控制：

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

1.流程控制：顺序结构

是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行；

2.流程控制：分支结构

流程控制的分支

2.1.单分支

单分支语法：

if（条件表达式）{
   //执行语句
}

单分支示例代码：

// 仅当表达式计算结果为真时, 才执行代码块
let age = 28;
if (age >= 18) {
  console.log("允许观看");
}

2.2.双分支

双分支语法：

if（条件表达式）{
  //执行语句
}else{
  //执行语句
}

双分支示例代码：

//双分支: 有一个"默认分支"
age = 15;
if (age >= 18) {
  console.log("允许观看");
}
else {
  // * 默认分支
  console.log("少儿不宜");
}

2.3.多分支

多分支语法：

if（条件表达式）{
  //执行语句
}else if（条件表达式）{
  //执行语句
}......else if（条件表达式）{
  //可以有多个else if{执行语句}
}else{
  //可选
}

多分支示例代码：

//多分支: 有多个"默认分支"
age = 50;
let res = age >= 18 ? "允许观看" : "少儿不宜";
age = 4;
if (age >= 18 && age < 35) {
  console.log("允许单独观看");
}
// * 第1个默认分支
else if (age >= 35 && age < 60) {
  console.log("建议二人观看");
}
// * 第2个默认分支
else if (age >= 60 && age < 120) {
  console.log("建议在家人陪同下观看");
}
// * 第3个默认分支: 异常分支, 使用 "||" 或 , 满足条件之一就可以了, true
else if (age <= 3 || age >= 120) {
  console.log("非法年龄");
}
// * 默认分支(可选)
else {
  console.log("少儿不宜");
}

2.4.多分支 switch 区间判断

• 传统多分, if - else if - else if —- , 代码混乱
• 使用 switch 进行优化

多分支switch语法：

switch (true) {
  case 条件表达式:
    //执行语句
    break;
  case 条件表达式:
    //执行语句
    break;
  case 条件表达式:
    //执行语句
    break;
  case 条件表达式:
    //执行语句
    break;
  default:
    //执行语句
}

多分支switch示例代码：

age = 15;
// * 区间判断, 使用 true
switch (true) {
  case age >= 18 && age < 35:
    console.log(允许单独观看);
    break;
  case age >= 35 && age < 60:
    console.log("建议二人观看");
    break;
  case age > 60 && age < 120:
    console.log("请在家人陪同下观看");
    break;
  case age <= 3 || age >= 120:
    console.log("非法年龄");
    break;
  default:
    console.log("少儿不宜");
}

2.5.多分支 switch 单值判断

• 传统多分, if - else if - else if —- , 代码混乱
• 使用 switch 进行优化

多分支switch 单值语法：

switch (lang.toLowerCase()) {
  // 将传入的进行判断的变量值,进行统一化
  // 将传入的字符串, 全部小写, 或者 大写
  case "值":
    //执行语句
    break;
  case "值":
    //执行语句
    break;
  case "值1":
  case "值2":
    //执行语句
    break;
  default:
    //执行语句
}

多分支switch 单值示例代码：

let lang = "html";
switch (lang.toLowerCase()) {
  // 将传入的进行判断的变量值,进行统一化
  // 将传入的字符串, 全部小写, 或者 大写
  case "html":
    console.log("超文本标记语言");
    break;
  case "css":
    console.log("层叠样式表");
    break;
  case "javascript":
  case "js":
    console.log("通用前端脚本编程语言");
    break;
  default:
    console.log("不能识别");
}

3.流程控制：循环

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

3.1.数组循环

数组循环示例代码：

//定义一条数组
const colors = ["red", "green", "blue"];
//array是一个对象, 是对象就会有属性或方法
console.log(colors.length);// colors.length 数组长度, 数组内的成员数量：3
console.log(colors[2]);//2: blue
console.log(colors[colors.length - 1]);//2: blue
console.log(colors[3]);// 遍历结束的标记, 数组越界了, undefined
console.log(colors[colors.length]);// 遍历结束的标记, 数组越界了, undefined

3.2.遍历循环

遍历循环示例代码：

const colors = ["red", "green", "blue"];
// 1. 起始索引:先声明一个当前索引
let i = 0;
//  2. 循环条件
let length = colors.length;
// 3. 更新条件
// 让数据的索引,自动指向下一个成员, 更新必须在代码块中
// ! 必须更新条件，否则进入死循环
// 第1次遍历
if (i < length) {
  console.log(colors[i]); //red
  i++;
}
console.log(i);//1
// 第2次遍历
if (i < length) {
  console.log(colors[i]);//green
  // * 更新条件
  i++;
}
console.log(i);//2
// 第3次遍历
if (i < length) {
  console.log(colors[i]);//blue
  // * 更新条件
  i++;
}
console.log(i);//3
// 第4次遍历, 3 === length, i<length 为 false 不执行了
if (i < length) {
  console.log(colors[i]);
  // * 更新条件
  i++;
}
console.log(i);

3.3. while 循环

while 可以将上面的多次的if()遍历进行合并

while循环示例代码：

const colors = ["red", "green", "blue"];
let i = 0;
let length = colors.length;
while (i < length) {
  console.log(colors[i]); //red, green, blue
  // 更新条件
  i++;
}

3.4. do 循环

do {} while(), 出口型判断,无论条件是否成立, 必须执行一次代码块

do循环示例代码：

const colors = ["red", "green", "blue"];
let i = 0;
let length = colors.length;
do {
  console.log(colors[i]);//不成立 输出red
  // * 更新条件
  i++;
} while (i > length);

3.5. for 循环

语法: for (初始条件; 循环条件; 更新条件) {…}
优化: 将数组长度,提前计算出来缓存到一个变量中

for循环示例代码：

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

3.6. 迭代器

• 数组内部有一个迭代器的方法, 可以用for-of
• for of:对数组操作循环
• for-of优点: 用户不必再去关心索引, 而将注意力集中到数组成员上

for循环示例代码：

const colors = ["red", "green", "blue"];
let i = 0;
let length = colors.length;
// 输出数组中的 "键值" 对组成的数组
for (let item of colors.entries()) {
  console.log(item);
}
// 输出数组中的 "键" 对组成的数组
for (let item of colors.keys()) {
  console.log(item);
}
// 输出数组中的 "值" 对组成的数组
for (let item of colors.values()) {
  console.log(item);
}
// 默认调用values(),输出值
for (let item of colors) {
  console.log(item);
}
// for - in: 遍历对象
const obj = { a: 1, b: 2, c: 3, say: function () {} };
// 遍历对象
for (let key in obj) {
  console.log(obj[key]);
}
// 数组也是对象
for (let i in colors) {
  console.log(colors[i]);
}

二、函数的参数与返回值

1.函数的参数

// 参数不足: 默认参数
let f = (a, b) => a + b;
console.log(f(1, 2)); //3
console.log(f(1)); //NaN
// 解决方案: 默认参数
f = (a, b = 2) => a + b;
console.log(f(1)); //3
console.log(f(1, 2)); //3
// 数过多, ...rest
f = (a, b) => a + b;
console.log(f(1, 2, 3, 4)); //3  (多余的参数3,4忽略了)
//参数过多的解决方案:
f = (...a) => a;
console.log(f(1, 2, 3, 4, 5, 6));

2.返回值

利用函数返回多个值

// 数组
f = () => ["名字", "年龄", "性别"];
console.log(f()); //['名字', '年龄', '性别']
// 拆分处理
console.log(...f()); //名字 年龄 性别
// 对象
qq = () => ({ a: "名字", b: "年龄", c: "性别" });
console.log(qq());//{ a: '名字', b: '年龄', c: '性别' }

三、字面量的简化方案

let name = "猪老湿";
// 属性简化
let user = {
    name: name,
};
console.log(user.name);//猪老湿
// 方法简化
user = {
    name,
    getName() {
        return this.name;
    },
};
console.log(user.name); //猪老湿
console.log(user.getName());//猪老湿

四、 模板字面量

• 模板字面量: 可以使用插值表达式的字符串

• 模板字面量, 也叫”模板字符串” , 是同义词

// 传统
console.log("hello world");
// 模板字面量
console.log(`hello world`);
// 模板字面量中,可以使用"插值"(变量,表达式),可以解析变量
let name = "朱老师";
console.log("Hello " + name);
// 变量/表达式等插值,使用 ${...}插入到模板字面量中
console.log(`Hello ${name}`);
console.log(`10 + 20 = ${10 + 20}`);
console.log(`${10 < 20 ? `大于` : `小于`}`);

五、模板函数

• 模板函数: 可以使用”模板字面量”为参数的函数

• 模板函数,就是在”模板字面量”之前加一个标签/标识符,而这个标签,就是一个函数名

• 模板函数的参数是有约定的, 不能乱写, 第一个是字面量数组,从第二起才是内部的占位符参数

• 模板函数也叫”标签函数”

// 声明模板函数
function total(strings, num, price) {
    console.log(strings);
    console.log(num, price);
}
let num = 10;
let price = 20;
// 调用模板函数
total `数量: ${10}单价:${500}`;
// 模板函数的优化, 推荐只用这一种：使用 ...rest 将插值进行合并
function sum(strings, ...args) {
    console.log(strings);
    console.log(args);
    console.log(`[${args.join()}] 之和是:  ${args.reduce((a, c) => a + c)}`);
}
#### 
// 调用
sum`计算多个数和: ${1}${2}${3}${4}`;