JavaScript 流程控制
程序员文章站
2022-05-21 23:22:51
...
JavaScript 流程控制
-
程序默认执行流程 1.顺序:默认
2.分支:单分支,双分支,多分支
3.循环:单分支的重复执行 -
分支
定义:有条件地执行某个代码块。 - 单分支
仅当表达结果为真时,才执行代码块
例如:
let age = 18;
if (age >= 18) {
console.log("您已通过防沉迷验证");
}
- 双分支
有一个默认分支,例如:
let age = 16;
if (age >= 18) {
console.log("您已通过防沉迷验证");
} else {
console.log("对不起,您未通过防沉迷验证");
}
双分支属于高频操作,系统提供了一个“语法糖”(简化方案):三元
上方的代码在经过简化之后呢效果是这样的:
const age_judgment =
age >= 18 ? "您已通过防沉迷验证" : "对不起,您未通过防沉迷验证";
console.log(age_judgment);
- 多分支
定义:有多个默认分支
例如:
{
let age = 18;
const Age12_17 = 2;
const Age18_59 = 8;
const Age6and60 = 0;
if (age >= 12 && age < 18) {
console.log(`您已通过防沉迷系统验证【剩余游戏时间:${Age12_17}】小时`);
} else if (age >= 18 && age < 60) {
console.log(`您已通过防沉迷系统验证【剩余游戏时间:${Age18_59}】小时`);
} else if (age <= 6 || age >= 60) {
console.log(
`!!!疑似非法年龄,您未通过防沉迷系统验证【剩余游戏时间:${Age6and60}】小时`
);
} else {
console.log("抱歉,您未通过防沉迷验证");
}
}
- 多分支 switch
{
// switch
let age = 10;
const Age12_17 = 2;
const Age18_59 = 8;
const Age6and60 = 0;
switch (true) {
case age >= 12 && age < 18:
console.log(`您已通过防沉迷系统验证【剩余游戏时间:${Age12_17}】小时`);
break;
case age >= 18 && age < 60:
console.log(`您已通过防沉迷系统验证【剩余游戏时间:${Age18_59}】小时`);
break;
case age <= 6 || age >= 60:
console.log(
`!!!疑似非法年龄,您未通过防沉迷系统验证【剩余游戏时间:${Age6and60}】小时`
);
break;
default:
console.log("抱歉,您未通过防沉迷验证");
}
}
区间判断:true 单值判断:变量
{
// vip判断(switch)
let vip = 0;
switch (vip) {
case 0:
console.log("您是普通会员");
break;
case 1:
console.log("您是vip会员");
break;
case 2:
console.log("您是svip会员");
break;
default:
console.log("非法值");
}
}
- 循环
while(入口型判断)循环:
{
const array = ["name", "id", "email"];
let i = 0;
while (i < array.length) {
console.log(array[i]);
i++;
}
}
-
循环三条件
1.初始条件 2.循环条件:为真才执行循环 3.更新条件:必须要有,否则进入死循环
-
do while 循环(出口型循环)
{
const array = ["name", "id", "email"];
let i = 0;
do {
console.log(array[i]);
i++;
} while (i > array.length);
}
for 循环是 while 循环的一个简化
for(初始条件;循环条件;更新条件){…}
{
const array = ["name", "id", "email"];
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
}
for of 遍历数组
{
const array = ["name", "id", "email"];
for (let id of array) {
console.log(array);
}
}
for in 遍历对象
{
const obj = { name: "admin", id: 1, email: "123456@qq.com" };
for(let key in obj){
console.log(obj[key]);
}
}
函数的参数与返回值
-
函数的参数
1.参数不足
我们来看一段代码:这段代码中我们声明了一个名为 demo 的函数给他了两个参数值,但是调用的时候只给他传了一个参数,就会出现 Nan 的结果。那么如何解决呢?{
let demo = (a, b) => a + b;
console.log(demo(1));
}
很简单,只需要给参数一个默认值就可以了
{
let demo = (a, b=0) => a + b;
console.log(demo(1));
}
2.参数过多(正常情况下多传过去的参数会被忽略)
多余的参数如何接收?
…:rest 语法,剩余参数,归并参数,将所有参数全部压缩到一个数组当中。用在集合数据上,可以将它展开成一个个独立的元素,在调用的时候。
{
let demo=(a,b,...i)=>i;
console.log(demo(1,2,3,4));
}
- 返回值
函数默认“单值返回”
如何返回多个值?
1.返回数组
{
f1=()=>[1,2,3]
console.log(f1());
}
2.返回对象(模块)
{
f2 = () => ({ a: 1, b: 2, c: 3, get: function () {} });
console.log(f2());
}
扩展
-
对象字面量的简化,推荐使用
属性简化:变量 name 与属性的 name 同名,并且在同一个作用域中,可以不写变量名。{
const name = "小夫";
let user = {
name,
number: 18888888888,
};
console.log(user.name);
}
方法的简化:
{
const name = "小夫";
const user = {
name,
getName() {
return this.name;
},
};
console.log(user.getName());
}
模板字面量与模板函数
- 模板字面量
模板字面量中可以使用插值(变量,表达式)可以解析变量
例如:
{
const name = "小夫";
console.log(`我的名字是:${name}`);
}
变量,表达式等插值使用${...}
插入到模板字面量中
- 模板函数
定义:使用模板字面量为参数的函数
第一个参数是字面量组成的数组,第二个参数起,是字面量中的插值列表
例如:
{
function sum(zimianliang, ...args) {
console.log(`${zimianliang}${args}`);
}
sum`这些数都有${1}${2}${3}${4}`;
}
1.模板字面量:可以使用插值表达式的字符串
2.模板函数:可以使用“模板字面量”为参数的函数
3.模板函数就是在“模板字面量“之前加一个标签/标识符,而这个标签,就是一个函数名
4.模板函数的参数是有约定的,不能乱写,第一个是字面量数组,从第二个起才是内部的占位符参数