个人主页:学习前端的小z
个人专栏:JavaScript 精粹
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!
✍JavaScript 控制流程
编程的三种基本结构
顺序结构
从上到下执行的代码就是顺序结构
程序默认就是由上到下顺序执行的
分支结构
根据不同的情况,执行对应代码
循环结构
循环结构:重复做一件事情
🌞1 分支结构
🎀1.1 if语句
语法结构
if (/* 条件表达式 */) { // 执行语句 } if (/* 条件表达式 */){ // 成立执行语句 } else { // 否则执行语句 } if (/* 条件1 */){ // 成立执行语句 } else if (/* 条件2 */){ // 成立执行语句 } else if (/* 条件3 */){ // 成立执行语句 } else { // 最后默认执行语句 }
🎀1.2 三元运算符
表达式1 ? 表达式2 : 表达式3 是对if……else语句的一种简化写法
i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
🎀1.3 switch语句
语法格式:
switch (expression) { case 常量1: 语句; break; case 常量2: 语句; break; case 常量3: 语句; break; … case 常量n: 语句; break; default: 语句; break; }
break可以省略,如果省略,代码会继续执行下一个case switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换(例如,字符串'10' 不等于数值 10)
🌞2 交互与写入:alert、prompt 和 confirm / write
由于我们将使用浏览器作为我们的演示环境,让我们看几个与用户交互的函数:alert
,prompt
和confirm
。
🎀2.1 alert
这个我们前面已经看到过了。它会显示一条信息,并等待用户按下 “OK”。
例如:
alert("Hello");
弹出的这个带有信息的小窗口被称为 模态窗。“modal” 意味着用户不能与页面的其他部分(例如点击其他按钮等)进行交互,直到他们处理完窗口。在上面示例这种情况下 —— 直到用户点击“确定”按钮。
🎀2.2 prompt
pormpt有文本消息的模态窗口,还有 input 框和确定/取消按钮。
result = prompt(title, [default]);
浏览器会显示一个带有文本消息的模态窗口,还有 input 框和确定/取消按钮。
title
显示给用户的文本default
可选的第二个参数,指定 input 框的初始值。
语法中的方括号 [...]
上述语法中 default
周围的方括号表示该参数是可选的,不是必需的。
访问者可以在提示输入栏中输入一些内容,然后按“确定”键。然后我们在 result
中获取该文本。或者他们可以按取消键或按 Esc 键取消输入,然后我们得到 null
作为 result
。
prompt
将返回用户在 input
框内输入的文本,如果用户取消了输入,则返回 null
。
举个例子:
var age = prompt('How old are you?', 100); alert("You are" + age +"ars old!");
IE 浏览器会提供默认值
第二个参数是可选的。但是如果我们不提供的话,Internet Explorer 会把 "undefined"
插入到 prompt。
我们可以在 Internet Explorer 中运行下面这行代码来看看效果:
var test = prompt("Test");
所以,为了 prompt 在 IE 中有好的效果,我们建议始终提供第二个参数:
var test = prompt("Test", ''); // <-- 用于 IE 浏览器
🎀2.3 confirm
confirm取消两个按钮的模态窗口。
result = confirm(question);
confirm
函数显示一个带有 question
以及确定和取消两个按钮的模态窗口。
点击确定返回 true
,点击取消返回 false
。
例如:
var isBoss = confirm("Are you the boss?"); alert( isBoss ); // 如果“确定”按钮被按下,则显示 true
🎀2.4 document.write
在JavaScript中document.write()函数可以向文档写入HTML表达式或JavaScript代码,用法“document.write(exp1,exp2,exp3,…)”,该函数可接受任何多个参数,并将其写入文档中。
document.write('我被写入了BODY中','还有我');
🌞3 循环结构
在javascript中,循环语句有三种,while、do…while、for循环。
我们经常需要重复执行一些操作。
例如,我们需要将列表中的商品逐个输出,或者运行相同的代码将数字 1 到 10 逐个输出。
循环 是一种重复运行同一代码的方法。
🎀3.1 while语句
基本语法:
// 当循环条件为true时,执行循环体, // 当循环条件为false时,结束循环。 while (循环条件) { //循环体 }
当 condition
(条件) 为 true
时,执行循环体的代码。
例如,以下将循环输出当 i < 3
时的 i
值:
var i = 0; while (i < 3) { // 依次显示 0、1 和 2 console.log(i); i++; } //递减操作 var i = 10; while (i) { // 10 9 8 7 6 5 4 3 2 1 console.log(i); i--; }
🎀3.2 do…while语句
do…while循环和while循环非常像,二者经常可以相互替代,但是do…while的特点是不管条件成不成立,都会执行一次。
基础语法:
do { // 循环体; } while (循环条件);
代码示例:
// 初始化变量 var i = 1; var sum = 0; do { sum += i;//循环体 i++;//自增 } while (i <= 100);//循环条件
🎀3.3 for语句
while和do…while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便
for循环语法:
// for循环的表达式之间用的是;号分隔的,千万不要写成, for (初始化表达式1; 判断表达式2; 自增or自减表达式3) { // 循环体4 }
执行顺序:1243 ---- 243 -----243(直到循环条件变成false)
- 初始化表达式
- 判断表达式
- 自增表达式
- 循环体
🎀3.4 continue和break
break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号)
continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)
🌞4 调试
- 过去调试JavaScript的方式
- alert()
- console.log()
- 断点调试
断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。
- 调试步骤
浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点
- 调试中的相关操作
Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。 F10: 程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。 F8:跳到下一个断点处,如果后面没有断点了,则程序执行结束。
tips: 监视变量,不要监视表达式,因为监视了表达式,那么这个表达式也会执行。
代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。