一、流程控制的分支,循环
流程控制：
- 在一个程序执行的过程中，名条代码的执行顺序对程序的结果是有直接影响的。
- 很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
- 简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行
- 流程控制主要有三种结构,分别是：顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。
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个默认分支: 异常分支, 使用 "||" 或 , 满足条件之一就可以了, trueelse 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;// * 区间判断, 使用 trueswitch (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 数组长度, 数组内的成员数量：3console.log(colors[2]);//2: blueconsole.log(colors[colors.length - 1]);//2: blueconsole.log(colors[3]);// 遍历结束的标记, 数组越界了, undefinedconsole.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]); //redi++;}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)); //3console.log(f(1)); //NaN// 解决方案: 默认参数f = (a, b = 2) => a + b;console.log(f(1)); //3console.log(f(1, 2)); //3// 数过多, ...restf = (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}`;
