这应该是
JavaScript系列教程的第五期了，本期讲讲基础知识之条件语句，也是项目中常用的。比如有个挺火的小程序，今天吃什么？其实基本上就是列举了很多的食物，然后使用随机数或者使用条件语句来给你选择其中一个出来。
解释
什么是条件语句？
简单的理解就是当代码运行到条件语句这里，就需要选择运行，要么选择一个，要不选择另一个。
举个栗子，在生活中，到了吃饭的时候，我们就面临着选择，这个时候就是到了条件语句了，我们是选择吃麻辣烫呢？还是麻辣香锅又或者是冒菜？
后面我会用代码对这个栗子翻译。
当然，条件语句也有好几个写法，常用的就是以下几种。
if...else
这个是我们在代码中最最最常见的写法
const age = 18;
if (age > 20) {
console.log("我今年20啦");
} else {
console.log("我永远18！");
}
可以看到最终输出的是我永远18！。
简单的翻译一下，就是定义了个年龄为18，if表示如果，如果年龄大于20，那么输出我今年20啦！，else表示否则，否则年龄不大于20，输出`我永远18！``
当然，你说这只能是两个选择，万一选择多的话呢？我有三个四个五个甚至更多怎么办？
else if
如果你可以想要更多选项，那么就要试试else if这个语法了！
将上面这个麻辣烫栗子改成代码试试，我们规定，早上吃麻辣烫，中午吃麻辣香锅，晚上吃冒菜：
/**
* 早上吃麻辣烫
* 中午吃麻辣香锅
* 晚上吃冒菜
*/
const time = "早上";
if (time === "早上") {
console.log("早上吃麻辣烫");
} else if (time === "中午") {
console.log("中午吃麻辣香锅");
} else {
console.log("晚上吃冒菜");
}
运行一下，可以看到输出了早上吃麻辣烫的文本。当然你还想早上加个餐，想吃茶叶蛋还是煎蛋呢？那我们还可以再加一个！
/**
* 早上吃麻辣烫
* 中午吃麻辣香锅
* 晚上吃冒菜
*/
const time = "早上";
const moreEat = "茶叶蛋";
if (time === "早上") {
console.log("早上吃麻辣烫");
if (moreEat === "茶叶蛋") {
console.log("我选择吃茶叶蛋！");
} else {
console.log("煎蛋yyds！");
}
} else if (time === "中午") {
console.log("中午吃麻辣香锅");
} else {
console.log("晚上吃冒菜");
}
我们在早上这里再加上一个if else判断，打印一下，输出以上结果！
你说以上看的太麻烦了，要是很多个选择，就有很多个if else，那真的是看的眼睛疼，别慌，我们还有个语法。
switch
当我们的选项太多了，看的眼花缭乱，难以维护的时候，我们就可以使用这个条件语句switch！它也可以和if else混用！还是以上面的栗子举栗：
/**
* 早上吃麻辣烫
* 中午吃麻辣香锅
* 晚上吃冒菜
*/
const time = "早上";
const moreEat = "茶叶蛋";
switch (time) {
case "早上":
console.log("早上吃麻辣烫");
if (moreEat === "茶叶蛋") {
console.log("我选择吃茶叶蛋！");
} else {
console.log("煎蛋yyds！");
}
break;
case "中午":
console.log("中午吃麻辣香锅");
break;
default:
console.log("晚上吃冒菜");
break;
}
打印一下，发现结果一模一样！现在来解释一下这个语法！
switch后面的括号，就是相当于咱们做选择题的括号，我们选择的每一个，都是下面的选项内容。与下面选项一一对应的。括号内部可以是表达式也可以是其他的。case关键字就是后面就是选项，上面的括号的内容结果和case后面的选项一致的话，就会执行这个里面的代码。break关键词，正如翻译的中文一样打破，意思就是打断后面的选择，我们选择一个就成。default关键词，就是当前面的所有选项完美避开了，都没有执行，那么将会执行default这个里面的代码，正如翻译的中文一样默认，他是在所有都没执行的时候，执行默认的代码。- 注意，当你确定是
csae后面要执行代码的话，请保证一定要有break，不然它不会按照你的预期执行对应选项的代码，会一直往下走，直到遇到了break才会停止选择。
你可以想说，那我要是真的只有两个或者三个选项，用if else或者switch是不是太长了，想简洁一点！
三目运算符
上一期讲过了运算符，其中就包含了三目运算符。我们可以将以上代码改造一下：
const age = 18;
age > 20 ? console.log("我今年20啦") : console.log("我永远18！");
以上是两个条件，简简单单完成！
const time = "早上";
time === "早上"
? console.log("早上吃麻辣烫")
: time === "中午"
? console.log("中午吃麻辣香锅")
: console.log("晚上吃冒菜");
看起来也挺简简单单的，当然，三目运算符虽然也可以做条件语句使用，但是尽量保持两个或者三个选项的时候使用，多了就别用了，因为看起来以及维护起来是真的很麻烦，多了建议还是直接用switch吧，看起来舒服很多，也更加利于维护！
今天吃什么？
思路很简单，如果不考虑早饭，中午，下午茶，晚饭，宵夜这几种使用场景的话，只需要列举所有的食物放在一个数组中，然后使用随机数获取就可以了。代码如下：
// 列举几个食物
const foodList = ['麻辣烫', '麻辣香锅', '冒菜', '炒米粉', '小笼包', '豆浆', '茶叶蛋', '拌饭', '火锅', '肉夹馍', '麻辣米线'];
// 设置一个均衡分布随机数，随机数最大数以及最小数一定是在上面这个数组中，然后我们要取整数
const random = Math.floor(Math.random() * (foodList.length - 1));
console.log(foodList[random]);
运行一下，发现其实还是很不错，每次都有不一样的惊喜！三行代码的事情！
如果我们要考虑到各种时间吃的东西，就要对进行分类，在写代码的时候，就需要用到了条件语句，代码如下：
/**
* 今天吃什么？
* 考虑时间版本
*/
// 早餐
const breakfastList = ['包子', '豆浆', '油条', '米粉', '肉夹馍'];
// 午餐
const lunchList = ['火锅', '麻辣烫', '麻辣香锅', '冒菜', '炒米粉', '兰州炒饭', '回锅肉', '宫保鸡丁', '小炒肉', '麻婆豆腐'];
// 下午茶
const afternoonTeaList = ['水果捞', '清补凉', '冰粉', '奶茶'];
// 晚餐
const dinnerList = ['火锅', '韩式烤肉', '油泼面'];
// 宵夜
const midnightSnack = ['烤串', '煎饼果子', '小龙虾'];
// 设置一个均衡分布随机数，随机数最大数以及最小数一定是在上面这个数组中，然后我们要取整数
let random;
// 设置时间
const time = '宵夜';
// 打印时间
console.log("现在是：",time);
switch (time) {
case '早餐':
random = Math.floor(Math.random() * (breakfastList.length - 1));
console.log(breakfastList[random]);
break;
case '午餐':
random = Math.floor(Math.random() * (lunchList.length - 1));
console.log(lunchList[random]);
break;
case '下午茶':
random = Math.floor(Math.random() * (afternoonTeaList.length - 1));
console.log(afternoonTeaList[random]);
break;
case '晚餐':
random = Math.floor(Math.random() * (dinnerList.length - 1));
console.log(dinnerList[random]);
break;
default:
random = Math.floor(Math.random() * (midnightSnack.length - 1));
console.log(midnightSnack[random]);
break;
}
运行一下代码，我们就能看到以上的结果，发现是不是和那个小程序一样？可以很好的解决选择困难症！但是你发现似乎有点重复代码，能不能简洁点呢？
/**
* 今天吃什么？
* 考虑时间版本，简洁点
*/
// 食物
const foodList = {
// 早餐
breakfastList: ['包子', '豆浆', '油条', '米粉', '肉夹馍'],
// 午餐
lunchList: ['火锅', '麻辣烫', '麻辣香锅', '冒菜', '炒米粉', '兰州炒饭', '回锅肉', '宫保鸡丁', '小炒肉', '麻婆豆腐'],
// 下午茶
afternoonTeaList: ['水果捞', '清补凉', '冰粉', '奶茶'],
// 晚餐
dinnerList: ['火锅', '韩式烤肉', '油泼面'],
// 宵夜
midnightSnack: ['烤串', '煎饼果子', '小龙虾'],
};
// 设置一个均衡分布随机数，随机数最大数以及最小数一定是在上面这个数组中，然后我们要取整数
let random;
// 设置时间
const time = '下午茶';
// 打印时间
console.log('现在是：', time);
// 定义一个函数
const outputFood = list => {
random = Math.floor(Math.random() * (list.length - 1));
console.log(list[random]);
};
switch (time) {
case '早餐':
outputFood(foodList.breakfastList);
break;
case '午餐':
outputFood(foodList.lunchList);
break;
case '下午茶':
outputFood(foodList.afternoonTeaList);
break;
case '晚餐':
outputFood(foodList.dinnerList);
break;
default:
outputFood(foodList.midnightSnack);
break;
}
再运行一下，输出的结果如上，你可能说其实没有怎么简洁，但是我们使用了一个对象，维护了所有的食物，并且使用函数，将重复的代码定义在一起了，方便复用，这种思想在正式的项目中是非常重要的！
总结
以上代码都在一个文件中，名称就是条件语句.js，你可以在我的个人博客中找到下载方式，如果没有看到，那可能就是我太懒了，没放上去，你可以去公众号回复JavaScript系列代码获取下载连接即可。
系列教程持续更新，欢迎关注，时不时再写几个案例分享！
