流程控制、函数的参数与返回值、对象字面量的简化、模板函数总结
程序员文章站
2022-03-03 21:30:43
...
流程控制、函数的参数与返回值、对象字面量的简化、模板函数总结
一、流程控制
程序执行流程:顺序、分支、循环
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}`;
上一篇: 搭建JS环境及基本知识
推荐阅读
-
JS 流程控制(分支与循环)、函数的参数(不足、剩余)、函数返回值(返回数组与对象)、对象字面量的简化、模板字面量、模板函数
-
流程控制的分支、循环,函数的参数与返回——对象字面量的简化方案,模板字面量,模板函数
-
JS 流程控制(分支与循环)、函数的参数(不足、剩余)、函数返回值(返回数组与对象)、对象字面量的简化、模板字面量、模板函数
-
JS流程控制和模板字面量及模板函数的学习
-
流程控制的分支、循环,函数的参数与返回——对象字面量的简化方案,模板字面量,模板函数
-
JS流程控制和模板字面量及模板函数的学习
-
实例演示流程的分支循环和函数参数的返回值,并对对象字面量和模板字面量进行了演示,分析了模板字面量和模板函数的参数功能
-
实例演示流程的分支循环和函数参数的返回值,并对对象字面量和模板字面量进行了演示,分析了模板字面量和模板函数的参数功能
-
流程控制语句、函数的参数与返回值、模板字符串与模板函数
-
流程控制、函数的参数与返回值、对象字面量的简化、模板函数总结