从零开始学WEB前端——JavaScript流程控制语句，2024年最新web前端常用面试题有哪些

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

——李煜《清平乐·别来春半》

语雀地址：https://www.yuque.com/beilayanmen

Github地址：https://github.com/SuZui-cn/my-web

Gitee地址：https://gitee.com/north_gate/my-web

个人博客地址：https://foollyone.cn/

⌨本文知识点

---

• 流程控制语句

• 条件语句

• if判断

• switch判断

• 循环语句

• for循环

• while循环

• do…while循环

• 函数

• 总结 ECMAScript

最近在写一个网站，所以更新速度变慢了。不过依然会持续更新。这章的内容是流程控制和函数，实践比较多，所以建议多写一下例子。

流程控制语句

---

条件语句

在现实生活中有很多需要进行判断的情况，比如：早上第一讲的网课。如下图

pass：矩形表示要做的处理，菱形表示判断。

如果用代码的视角来看的话菱形就是我们的if判断，为是或者为否就是语句的不同分支。

if判断

var study = true;

if (study) {

//括号中的值为真时执行这里

console.log(‘好好学习，天天向上’);

} else {

//括号为假的时候执行这里

console.log(‘躺平’);

}

同时括号里可以是表达式

语法结构如下：

1. 语法结构 if 如果 else 否则

if (条件表达式) {

// 执行语句1

} else {

// 执行语句2

}

2. 执行思路 如果表达式结果为真 那么执行语句1 否则 执行语句2

比如我们用一个判断闰年的案例来看

//prompt是弹出输入框

var year = prompt(‘请您输入年份：’);

if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {

alert(‘您输入的年份是闰年’);

} else {

alert(‘您输入的年份是平年’);

}

我们输入2022。

得到结果为平年。

如果输入2020。

得到结果为平年。

同时if...else是可以嵌套使用的。

语句结构如下：

我们来看一个嵌套判断的例子：

// 伪代码 按照从大到小判断的思路

// 弹出prompt输入框，让用户输入分数（score），把这个值取过来保存到变量中

// 使用多分支 if else if 语句来分别判断输出不同的值

var score = prompt(‘请您输入分数:’);

if (score >= 90) {

alert(‘宝贝，你是我的骄傲’);

} else if (score >= 80) {

alert(‘宝贝，你已经很出色了’);

} else if (score >= 70) {

alert(‘你要继续加油喽’);

} else if (score >= 60) {

alert(‘孩子，你很危险’);

} else {

alert(‘熊孩子，我不想和你说话，我只想用鞭子和你说话’);

}

这里给大家补充一个知识点三元运算符

// 1. 有三元运算符组成的式子我们称为三元表达式

// 2. ++num 3 + 5 ? :

// 3. 语法结构

// 条件表达式 ？ 表达式1 ： 表达式2

// 4. 执行思路

// 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值

// 5. 代码体验

var num = 10;

var result = num > 5 ? ‘是的’ : ‘不是的’; // 我们知道表达式是有返回值的

console.log(result);

// if (num > 5) {

// result = ‘是的’;

// } else {

// result = ‘不是的’;

// }

switch判断

同时在JavaScript里还有一个条件判断的关键字switch，

// 1. switch 语句也是多分支语句 也可以实现多选1

// 2. 语法结构 switch 转换、开关 case 小例子或者选项的意思

// switch (表达式) {

// case value1:

// 执行语句1;

// break;

// case value2:

// 执行语句2;

// break;

// …

// default:

// 执行最后的语句;

// }

// 3. 执行思路 利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句 如果都没有匹配上，那么执行 default里面的语句

// 4. 代码验证

switch (8) {

case 1:

console.log(‘这是1’);

break;

case 2:

console.log(‘这是2’);

break;

case 3:

console.log(‘这是3’);

break;

default:

console.log(‘没有匹配结果’);

}

但是switch 存在一个缺陷，那就是必须去case 一个条件，这种情况会导致后期的维护困难，所以在这里就不过多的讲述switch 。

循环语句

循环就是不断的重复某个操作（人类的本质就是复读机？）

for循环

先介绍用的最多的for循环。

// 1. for 重复执行某些代码， 通常跟计数有关系

// 2. for 语法结构

// for (初始化变量; 条件表达式; 操作表达式) {

// // 循环体

// }

// 3. 初始化变量 就是用var 声明的一个普通变量， 通常用于作为计数器使用

// 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件

// 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）

// 6. 代码体验 我们重复打印100局 你好

for (var i = 1; i <= 100; i++) {

console.log(‘你好吗’);

}

再来看一个案例，求班级平均分。

// 弹出输入框输入总的班级人数(num)

// 依次输入学生的成绩（ 保存起来 score）， 此时我们需要用到

// for 循环， 弹出的次数跟班级总人数有关系 条件表达式 i <= num

// 进行业务处理: 计算成绩。 先求总成绩（ sum）， 之后求平均成绩（ average）

// 弹出结果

var num = prompt(‘请输入班级的总人数:’); // num 总的班级人数

var sum = 0; // 求和的变量

var average = 0; // 求平均值的变量

for (var i = 1; i <= num; i++) {

var score = prompt(‘请您输入第’ + i + ‘个学生成绩’);

// 因为从prompt取过来的数据是 字符串型的需要转换为数字型

sum = sum + parseFloat(score);

}

average = sum / num;

alert(‘班级总的成绩是’ + sum);

alert(‘班级平均分是：’ + average);

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-anohqldQ-1713453212398)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！