JS流程控制和模板字面量及模板函数的学习
程序员文章站
2022-05-29 12:48:41
...
一、流程控制的分支,循环
流程控制:
- 在一个程序执行的过程中,名条代码的执行顺序对程序的结果是有直接影响的。
- 很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
- 简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行
- 流程控制主要有三种结构,分别是:顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。
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}`;
上一篇: 请问一个正则 有关问题
下一篇: CSS 响应式布局及定位的使用方法学习
推荐阅读
-
流程控制,循环,模板字面量,模板函数演示
-
JS 流程控制(分支与循环)、函数的参数(不足、剩余)、函数返回值(返回数组与对象)、对象字面量的简化、模板字面量、模板函数
-
流程控制,循环,模板字面量,模板函数演示
-
流程控制的分支、循环,函数的参数与返回——对象字面量的简化方案,模板字面量,模板函数
-
JS 流程控制(分支与循环)、函数的参数(不足、剩余)、函数返回值(返回数组与对象)、对象字面量的简化、模板字面量、模板函数
-
JS流程控制和模板字面量及模板函数的学习
-
流程控制的分支、循环,函数的参数与返回——对象字面量的简化方案,模板字面量,模板函数
-
JS流程控制和模板字面量及模板函数的学习
-
实例演示流程的分支循环和函数参数的返回值,并对对象字面量和模板字面量进行了演示,分析了模板字面量和模板函数的参数功能
-
实例演示流程的分支循环和函数参数的返回值,并对对象字面量和模板字面量进行了演示,分析了模板字面量和模板函数的参数功能