JavaScript从入门到精通视频直通车:
【1-200】JavaScript视频教程,从入门到精通,超多案例实践,通俗易懂!
【201-300】JavaScript视频教程,从入门到精通,超多案例实践,通俗易懂!
JavaScript流程控制语句
语句的定义
在ECMAScript 中,所有的代码都是由语句来构成的。
一行代码就是一条简单语句。形式上可以是单行语句,或者由一对大括号“{}”括起来的复合语句,复合语句包含若干条简单语句,它可以作为一个单行语句处理。复合语句也称为语句块。
单行语句:一行代码简单语句
复合语句:由一对大括号“{}”括起来的若干条简单语句,也叫语句块
流程控制语句分类
任何复杂的程序逻辑都可以通过”顺序”、”条件(分支)”和”循环”三种基本的程序结构来实现。
顺序程序结构就是从上往下顺序执行语句;程序默认就是由上到下顺序执行的
条件(分支)程序结构就是根据不同的情况执行不同的语句;
循环程序结构就是某些语句要循环执行多次。
条件语句(分支语句)
if单分支语句
if-else双分支语句
if - else if多分支语句
switch开关语句
循环语句
for循环语句
while循环语句
do-while循环语句
for/in循环语句 (增强for循环、foreach循环)
条件语句
if语句即条件判断语句,一共有三种格式:
单分支的条件语句;
双分支的条件语句
多分支的条件语句。
条件语句用于基于不同的条件来执行不同的动作。
单分支的条件语句
if(){} 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
if (/* 条件表达式 */) {
// 执行语句
}
注意:
(1) 放在if之后的括号里的返回值为boolean类型的表达式或boolean值,即这个表达式的返回值只能是true或false。
(2) 如果表达式的值为true,则执行语句;如果表达式的值为false,则什么也不执行。
(3) 花括号括起来的语句块可以只有一行语句,也可以由多行代码构成。一个语句块通常被当成一个整体来执行。 如果语句块只有一行语句时,则可以省略花括号,因为单行语句本身就是一个整体,无须花括号来把它们定义成一个整体。建议都加花括号;
双分支的条件语句
if()...else 语句 - 当条件为 true 时执行语句1,当条件为 false 时执行语句2
if (/* 条件表达式 */){
// 成立执行语句
} else {
// 否则执行语句
}
if (条件表达式){
语句1;
}else {
语句2;
}
注意:
(1)放在if之后的括号里的返回值为boolean类型的表达式或boolean值,即这个表达式的返回值只能是true或false。
(2)如果if表达式的值为true,则执行语句1;如果表达式的值为false,则执行语句2。
多分支的if条件语句
if()...else if()....else 语句 - 使用该语句来选择多个代码块之一来执行.
if (/* 条件1 */){
// 成立执行语句
} else if (/* 条件2 */){
// 成立执行语句
} else if (/* 条件3 */){
// 成立执行语句
} else {
// 最后默认执行语句
}
语法:
if (条件表达式) {
语句1;
} else if (条件表达式) {
语句2;
} ...
else{
语句n;
}
注:if语句()中的表达式会自动转换成布尔值。
满足条件即执行对应语句,然后语句就结束;如果都不满足,则执行else语句块;当然else语句块可以不存在。
switch多条件选择语句
switch语句又称开关语句,它与多重if语句类似,前者用于等值判断,后者用于区间值和等值判断。switch语句的作用是根据表达式的值,跳转到不同的语句。switch 语句用于基于不同的条件来执行不同的动作。
语法:
switch (expression) {
case 常量1:
语句;
break;
case 常量2:
语句;
break;
case 常量3:
语句;
break;
…
case 常量n:
语句;
break;
default:
语句;
break;
}
switch多条件选择语句:
首先设置表达式,随后表达式的值会与结构中的每个case 的常量表达式做比较。如果存在匹配,则与该 case 关联的代码块会被执行。
使用 break 来阻止代码自动地向下一个 case 运行。default 关键词来规定匹配不存在时做的事情,也就是说,当没有匹配的值时,执行default下的语句。
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换(例如,字符串'10' 不等于数值 10)
工作原理:
首先设置表达式 n(通常是一个变量)。
随后表达式的值会与结构中的每个 case 的值做比较。
如果存在匹配,则与该 case 关联的代码块会被执行。
请使用 break 来阻止代码自动地向下一个 case 运行。
default 关键词来规定匹配不存在时做的事情;相当于if里的else
注意: 1、每个case语句下的break语句一般不可以省略,break语句表示退出switch语句,如果省略,则会继续执行下一个case语句中的代码,直到遇到break语句跳出switch语句。 2、default语句可以出现在switch语句中任何地方,如果放在最后,其中的break语句可省略。default语句也可省略。 3、每个case语句没有先后顺序之分,但建议按照常量表达式的值从小到大的顺序。 4、switch语句用于等值判断,也就是说表达式的结果是个具体的值;而多重if选择结果的表达式的值是个区间,比如大于100而小于200。
输入一个数字,打印对应的星期
var day = 10;
switch (day) {
case 1:
console.log('星期一');
break;
case 2:
console.log('星期二');
break;
case 3:
console.log('星期三');
break;
case 4:
console.log('星期四');
break;
case 5:
console.log('星期五');
break;
case 6:
console.log('星期六');
break;
case 7:
console.log('星期日');
break;
default:
console.log('输入的值不在星期范围内');
break;
}
条件语句练习
案例:
求两个数的最大数
var num1 = 2;
var num2 = 5;
if (num1 > num2) {
console.log('最大值是:' + num1);
} else {
console.log('最大值是: ' + num2);
}
判断一个数是偶数还是奇数
// 判断一个数是偶数还是奇数
var num = 5;
if (num % 2 === 0) {
console.log('num是偶数');
} else {
console.log('num是奇数');
}
分数转换,把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A
// 分数转换,把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A
var score = 59;
if (score >= 90 && score <= 100) {
console.log('A');
} else if (score >= 80 && score < 90) {
console.log('B');
} else if (score >= 70 && score < 80) {
console.log('C');
} else if (score >= 60 && score < 70) {
console.log('D');
} else {
console.log('E');
}
var score = 59;
if (score >= 90) {
console.log('A');
} else if (score >= 80) {
console.log('B');
} else if (score >= 70) {
console.log('C');
} else if (score >= 60) {
console.log('D');
} else {
console.log('E');
}
var score = 6;
score = parseInt(score / 10);
switch (score) {
case 10:
case 9:
console.log('A');
break;
case 8:
console.log('B');
break;
case 7:
console.log('C');
break;
case 6:
console.log('D');
break;
default:
console.log('E');
break;
}
循环程序结构
如果希望一遍又一遍地运行相同的代码,那么使用循环是很方便的。比如在页面上输出100遍“我爱HTML5编程”,如果不用循环,document.write("我爱HTML5编程<br/>
");要写100遍。如果用循环则代码这样写即可:
for(var i=1;i<=100;i++){
document.write("我爱HTML5编程<br/>");
}
循环程序的结构有三要素:循环的初始值、循环条件(循环的结束值)和循环的迭代,所谓循环的迭代就是如何从初始值到结束值,比如是每次加1还是每次加2,诸如此类等。当然,一个循环程序还有包含一个循环体。
while 语句
while循环会在指定条件为真时循环执行代码块,它是一种先判断,后运行的循环语句,也就是说,必须满足条件了之后,方可运行循环体。用于不太确定循环次数的场合。
语法:
// 当循环条件为true时,执行循环体,
// 当循环条件为false时,结束循环。
while (循环条件) {
//循环体
}
代码示例:
// 打印1-100之间所有的数字
var i = 1;
while (i <= 100) {
console.log(i);
// i = i + 1;
// i += 1;
i++;
}
// 计算1-100之间所有数的和
// 初始化变量
var i = 1;
var sum = 0;
// 判断条件
while (i <= 100) {
// 循环体
sum += i;
// 自增
i++;
}
console.log(sum);
案例:
打印100以内 7的倍数
// 打印100以内 7的倍数
var i = 1;
while (i <= 100) {
// 判断当前的i是否是7的倍数
if (i % 7 === 0) {
console.log(i);
}
// i自身+1
i++;
}
打印100以内所有偶数
// 打印100以内所有偶数
var i = 1;
while (i <= 100) {
// 判断当前的i是否是偶数
if (i % 2 === 0) {
console.log(i);
}
// i自身+1
i++;
}
打印100以内所有偶数的和
// 打印100以内所有偶数的和
var i = 1;
var sum = 0;
while (i <= 100) {
// 判断当前的i是否是偶数,如果是偶数的话累加
if (i % 2 === 0) {
sum += i;
}
// i自身+1
i++;
}
console.log(sum);
案例1:循环输出从1开始的数值; 直到这个数值(n*2+8)/3 为20才结束循环
案例2:从弹出框循环输入字符串,直到输入的值为end才结束循环
var inputStr = prompt("请输入一个字符串");
do...while循环
do...while 循环是 while 循环的变体,在检查条件是否为真之前,该循环会至少执行一次do下的代码块(循环体),然后如果条件为真的话,就会重复这个循环,否则退出该循环体。常用于至少执行一次循环体,再判断要不要继续循环的场合。
语法:
do {
// 循环体;
} while (循环条件);
代码示例:
// 初始化变量
var i = 1;
var sum = 0;
do {
sum += i;//循环体
i++;//自增
} while (i <= 100);//循环条件
案例:
// 求100以内所有3的倍数的和
var i = 1;
var sum = 0;
do {
// 循环体
// 判断是否是3的倍数,如果是3的倍数累加
if (i % 3 === 0) {
sum += i;
}
// i自身+1
i++;
} while (i <= 100);
console.log(sum);
for语句
while和do...while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便。
语法:
// for循环的表达式之间用的是;号分隔的,千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
// 循环体4
}
语句1: 在循环体(代码块)开始前执行,也就是循环初始值。
语句2: 定义运行循环(代码块)的条件,语句2返回true,则循环再次开始,如果返回 false,则循环将结束
语句3: 在循环(代码块)已被执行之后执行,就是循环的迭代部分, 语句3有多种用法,增量可以是负数 (i--),或者更大 (i=i+15)
for循环执行机制:
执行顺序:1243 ---- 243 -----243(直到循环条件变成false)
-
初始化表达式
-
判断表达式
-
自增表达式
-
循环体
for...in语句
for...in 语句用于遍历数组或者对象的属性(通常我们使用for/in 语句循环遍历对象的属性,在数组中可以遍历数组中的所有元素)。
for...in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。
for..in遍历数组
// 定义一个数组
var arr = [13,21,34,42,53,63];
// 普通for循环遍历
for(var i = 0;i < arr.length;i++){
console.log(arr[i]);
}
// 使用for..in遍历数组
for(var i in arr){
console.log(arr[i]);
}
for..in遍历对象
// 创建一个对象
var person = {
name : "jack",
age : 12,
height: 178
}
//列举对象属性名及其值
for(var pro in person){
console.log(pro+" "+person[pro])
}
在JavaScript语言中,支持循环语句的相互嵌套,即在一个循环语句中嵌套另一个循环语句,也就是说,for循环语句可以嵌套for语句,也可以嵌套while循环语句,或者do..while循环语句,其他的循环语句也是一样的。
需要注意的是,break和continue语句用在循环嵌套中,这两条语句只对离它最近的循环语句有效。比如如果break语句用在内层的循环语句中,则只退出内层的循环,对外层循环没有影响。
循环语句练习
打印1-100之间所有数
for (var i = 1; i <= 100; i++) {
console.log(i);
}
var i = 1;
for (; i <= 100; ) {
console.log(i);
i++;
}
求1-100之间所有数的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
// sum = sum + i;
sum += i;
}
console.log(sum);
求1-100之间所有数的平均值
var sum = 0;
var avg;
for (var i = 1; i <= 100; i++) {
sum += i;
}
avg = sum / 100;
console.log(avg);
求1-100之间所有偶数的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
// 找到偶数
if (i % 2 === 0) {
sum += i;
}
}
console.log(sum);
同时求1-100之间所有偶数和奇数的和
var oddSum = 0; // 奇数的和
var evenSum = 0; // 偶数的和
for (var i = 1; i <= 100; i++) {
// 判断i是奇数还是偶数
if (i % 2 === 0) {
// 偶数
evenSum += i;
} else {
//奇数
oddSum += i;
}
}
console.log('奇数的和:' + oddSum);
console.log('偶数的和:' + evenSum);
打印正方形
// 使用拼字符串的方法的原因
// console.log 输出重复内容的问题
// console.log 默认输出内容介绍后有换行
var start = '';
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
start += '* ';
}
start += '\n';
}
console.log(start);
打印直角三角形
var start = '';
for (var i = 0; i < 10; i++) {
for (var j = i; j < 10; j++) {
start += '* ';
}
start += '\n';
}
console.log(start);
打印9*9乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = i; j <=9; j++) {
str += i + ' * ' + j + ' = ' + i * j + '\t';
}
str += '\n';
}
console.log(str);
跳转语句
break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号)
continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)
continue 语句只能用在循环中;break能用在循环或 switch 中。
案例:
求整数1~100的累加值,但要求碰到个位为3的数则停止累加
求整数1~100的累加值,但要求跳过所有个位为3的数
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 10 === 3) {
// 如果找到个位为3的数字 ,继续执行下一次循环
continue;
}
sum += i;
}
console.log(sum);
调试
-
过去调试JavaScript的方式
-
alert()
-
console.log()
-
-
断点调试
断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。
-
调试步骤
浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点
-
调试中的相关操作
Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。
F10: 程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
F8:跳到下一个断点处,如果后面没有断点了,则程序执行结束。
tips: 监视变量,不要监视表达式,因为监视了表达式,那么这个表达式也会执行。
-
代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。
-
今天学的代码调试非常的简单,只要求同学们记住代码调试的这几个按钮的作用即可,后面还会学到很多的代码调试技巧。
代码规范
1.命名规范
变量、函数 的命名 必须要有意义
变量 的名称一般用名词
函数 的名称一般用动词
2.变量规范
操作符的前后要有空格
var name = 'zhangsan'; 5 + 6
3.注释规范
// 这里是注释
4.空格规范
if (true) {
}
for (var i = 0; i <= 100; i++) {
}
5.换行规范
var arr = [1, 2, 3, 4];
if (a > b) {
}
for (var i = 0; i < 10; i++) {
}
function fn() {
}