2024年Web前端最全javascript百炼成仙 第一章 掌握JavaScript基础 1(5)，HTML表格标签

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

“你的循环判断条件是当i小于10的时候，才会进入循环体。也就是后面用大括号扩起来的部分，对吧？”叶老问到。

“没错，最开始的时候i=0，第一次循环i自然是小于10的，于是就进入循环体，像这样。”说着，叶小凡催动内力，让这段JavaScript代码开始执行。

当执行到这一行代码的时候，叶小凡特意用debug让代码停止了下来。

“嗯，很好，我且问你，现在代码停在了这一行，如果我往下执行一部，会调到第四行还是停留在第三行呢？” 叶老问到。

“那还用问，肯定是调到第四行啦。”叶小凡不可置否地说道。

“先别着急下结论，走一步试试。”叶老平淡地对叶小凡说道。

“试就试。”

说着，叶小凡就用debug走了一步。结果发现：

“这是怎么回事？”叶小凡讶然，同时皱了皱眉。

“你再走一步试试？”叶老笑呵呵地说道。

就这样，叶小凡又走了一步，这才发现走到了第四行。经过反复地测试，叶小凡紧皱的眉头终于松开了。原来，第一次跳到第三行代码的时候，是在准备运行for循环的语句一，也就是var i = 0 这句话。因此，刚才第一次跳到第三行代码的时候，i变量的值是undefined（未定义），因为这个时候只是去声明了i变量，还没有运行 i = 0这个赋值语句，所以是undefined。

而当叶小凡往下再走一步的时候，则是运行了i = 0这个赋值语句，这个时候i变量的值才如愿以偿地变成了0，整个语句一才算是执行完毕了。至于为什么再走一步就能够跳转到第四行代码？那是因为，语句一执行完毕后，自然去执行语句二了。也就是“i<10”这句话，这就好比是一个if判断：

var i = 0;

if(i < 10){

console.log(i);

}

第一次循环的时候，i=0自然是小于10的，因此就直接进入了循环体。循环体执行完毕后，开始执行语句三，i++，i从0变成了1，然后进入第二次循环再次判断i是否小于10。

听着叶小凡的论述，叶老微微点了点头，道：“是这样的，那么问题来了，刚才的例子中，i是从0一直自增到10，当然，它最后会变成10，但是却无法再满足i<10的判断条件。所以，当i等于10的时候，就没办法进入循环体了。可是，这并没有关系，因为第一次i等于0，是符合条件的，最后一次进入循环体，是当i等于9的时候，像这样。”说完，叶老随手一挥，将这段代码的运行结果显示了出来：

“嗯嗯，我明白了，因为i变量是从0开始的，所以0~9还是循环了10次。至于刚才说的自减，其实也是一样的，只是改变一下循环条件和初始化变量i的值就行了。”

说完，叶小凡修改了一下代码：

for(var i=10;i>0;i–){

console.log(i);

}

“同样是循环10次，这回就是变量i从10减到0的过程了。”叶小凡说到。

“没有错，是这样的。while循环的话，只是语法上有所不同，作用上和for循环是一样的。很好，看来你已经掌握了循环的奥妙。”

小结：

---

For 循环

for 循环是您在希望创建循环时常会用到的工具。就是说，如果某一段代码你需要多次执行，如果不用循环，则需要将相同的代码重复多遍。

下面是 for 循环的语法：

for (语句 1; 语句 2; 语句 3)

{

被执行的代码块

}

语句 1 在循环（代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

while 循环

While 循环会在指定条件为真时循环执行代码块。

语法

while (条件)

{
需要执行的代码
}

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-j1wR1WWe-1714828341701)]