JS 流程控制分支与循环(if、switch、while、do…while、for-of、for-in)
分支
// JS 流程控制分支(if、switch)
// 程序默认执行流程:顺序(默认)
// 单分支
let salary = 36000;
// salary >= 36000 true: 执行
if (salary >= 36000) {
console.log("需要交税");
}
// 双分支: 在单分支基础上加一个"默认分支"
salary = 36000;
if (salary >= 36000) {
console.log("税率:3%+");
}
// * 默认分支
else {
console.log("税率:3%");
}
// 双分支的简化语法,三元运算符
// 语法: (条件) ? true : false
salary = 30000;
salary >= 36000 ? console.log('税率:3%+') : console.log('税率:3%');
// 多分支: 有多个"默认分支"
salary = 960001;
if (36000 < salary <= 144000) {
console.log("税率:10% - 2520");
}
// * 第1个默认分支
else if (144000 < salary <= 300000) {
console.log("税率:20% - 16920");
}
// * 第2个默认分支
else if (300000 < salary <= 420000) {
console.log("税率:25% - 31920");
}
// * 第3个默认分支: 异常分支, 使用 "||" 或 , 满足条件之一就可以了, true
else if (420000 < salary <= 660000) {
console.log("税率:30% - 52920");
}
else if (660000 < salary <= 960000) {
console.log("税率:35% - 85920");
}
// * 默认分支(可选)
else {
console.log("税率:45% - 181920");
}
// switch 进行优化
// 多分支 switch
salary = 960001;
// * 区间判断, 使用 true
switch (true) {
case salary <= 36000:
console.log("个税:3% - 0");
break;
case 36000 < salary && salary <= 144000:
console.log("税率:10% - 2520");
break;
case 144000 < salary && salary <= 300000:
console.log("税率:20% - 16920");
break;
case 300000 < salary && salary <= 420000:
console.log("税率:25% - 31920");
break;
case 420000 < salary && salary <= 660000:
console.log("税率:30% - 52920");
break;
case 660000 < salary && salary <= 960000:
console.log("税率:35% - 85920");
break;
default:
console.log("税率:45% - 181920");
}
// 单值判断: 变量
let lang = "html";
lang = "css";
lang = "javascript";
lang = "js";
lang = "CSS";
lang = "JavaScript";
lang = "HTML";
console.log(lang.toLowerCase());
switch (lang.toLowerCase()) {
// 将传入的进行判断的变量值,进行统一化
// 将传入的字符串, 全部小写, 或者 大写
case "html":
console.log("超文本标记语言");
break;
case "css":
console.log("层叠样式表");
break;
case "javascript":
case "js":
console.log("通用前端脚本编程语言");
break;
default:
console.log("不能识别");
}
循环
// 流程控制: 循环
/**
* * 循环三条件
* * 1. 初始条件: 数组索引的引用 ( i = 0 )
* * 2. 循环条件: 为真才执行循环体 ( i < arr.length )
* * 3. 更新条件: 必须要有,否则进入死循环 ( i++ )
*/
const numroom = ["101", "102", "105", 106, 107];
// !while 循环
i = 0;
while (i < numroom.length) {
console.log(numroom[i]);
// * 更新条件
i++;
}
// * do {} while(), 出口型判断,无论条件是否成立, 必须执行一次代码块
i = 0;
do {
console.log(numroom[i]);
// * 更新条件
i++;
} while (i > numroom.length);
// ! for () 是 while 的简化
// * 语法: for (初始条件; 循环条件; 更新条件) {...}
for (let i = 0; i < numroom.length; i++) {
console.log(numroom[i]);
}
// 优化, 将数组长度,提前计算出来缓存到一个变量中
for (let i = 0, length = numroom.length; i < length; i++) {
console.log(numroom[i]);
}
// ! for - of : 快速迭代处理集合数据
// * 数组内部有一个迭代器的方法, 可以用for-of
// * for-of优点: 用户不必再去关心索引, 而将注意力集中到数组成员上
// v 输出数组中的 "键值" 对组成的数组
for (let item of numroom.entries()) {
console.log(item);
}
// v 输出数组中的 "键" 对组成的数组
for (let item of numroom.keys()) {
console.log(item);
}
// v 输出数组中的 "值" 对组成的数组
for (let item of numroom.values()) {
console.log(item);
}
// ! 默认调用values(),输出值
for (let item of numroom) {
console.log(item);
}
// ! for - in: 遍历对象
const obj = { '101': "sun", '102': "xu", '103': "du", noi: function () {} };
// 遍历对象
for (let key in obj) {
console.log(obj[key]);
}
// 数组也是对象
for (let i in numroom) {
console.log(numroom[i]);
}
// 数组也能用for-in,但不要这么用, for - of, forEach, map...
函数的参数与返回值
参数不足: 使用默认函数
,默认参数一般放最后
f = (a, b = 0) => a + b;
console.log(f(1));
console.log(f(1, 2));
参数过多: 使用...
rest
// 将多余的参数,全部接收? ...rest
f = (...arr) => arr;
// ...: rest语法,剩余参数,归并参数,将所以参数全部压入到一个数组中
console.log(f(1, 2, 3, 4, 5));
// ...集合数据,可以将它"展开"成一个个独立的元素,用在调用的时候
console.log(...[1, 2, 3, 4]);
函数返回值: 返回多值
// * 数组
f = () => [1, 2, 3];
console.log(f());
// * 对象: 模块
f = () => ({ a: 1, b: 2, get: function () {} });
console.log(f());
对象字面量的简化方案
- 属性简化:1 变量 name 与 属性 name 同名;2 且在同一个作用域中,可以不写变量名
- 方法简化:方法—本质仍是属性,只不过它的值是一个函数声明
- 方法简化不能用箭头函数
let name = "help";
let user = {
// 属性简化
// name = name;
name,
/* function getName(){
return user.name;
} */
getName() {
return this.name;
},
};
console.log(user.name());
console.log(user.getName());
模板字面量
- 模板字面量中,可以使用”插值”(变量,表达式),可以解析变量
// 传统
console.log("hello world");
// 模板字面量中,可以使用"插值"(变量,表达式),可以解析变量
let name = "help";
console.log("Hello " + name);
// 变量/表达式等插值,使用 ${...}插入到模板字面量中
console.log(`Hello ${name}`);
console.log(`10 + 20 = ${10 + 20}`);
console.log(`${10 < 20 ? `大于` : `小于`}`);
模板函数
- 就是使用”模板字面量’为参数的函数
- 模板函数(第一个参数是字面量组成的数组,第二个参数起,是字面量中的插值列表)
// y 声明模板函数
function total(strings, num, price) {
console.log(strings);
console.log(num, price);
}
let num = 10;
let price = 20;
// y 调用模板函数
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}`;