JavaScript基础之流程控制语句的用法


Posted in Javascript onAugust 31, 2017

第三部分:流程控制语句

JavaScript代码是书写位置:

JavaScript代码应该写在<script type=”text/javascript”></script>这一对标记中。

或者作为外部引用<script src="JavaScript代码路径"></script>

JavaScript的每一句代码请用分号作为结束。

输出语句

1、控制台输出:console.log();

它可以在控制台中输出一些信息,输出的信息就是console.log()中圆括号的内容。

在调试程序的时候回经常用这个语句。

2、弹出框输出:

alert();

使用alert可以在网页上弹出一个提示框显示alert()的圆括号中的信息。

prompt();

使用prompt可以在网页上弹出一个输入框,并且以prompt()的圆括号中的信息作为提示信息。

confirm();

包含确定和取消的弹出框。

3、页面输出:document.write();

直接会将内容显示在页面上。

选择语句

if....else语句

if(判断条件/boolean)
//满足条件会执行下面的代码

代码1;

else {
//当上面的条件不满足,或者boolean的值为false的时候会执行下面的代码2

代码2

}

此外,else后还可以继续加if判断

if(判断条件/boolean)
//满足条件会执行下面的代码

代码1;

else if(判断条件) {
//当上面的条件不满足,或者boolean的值为false的时候会执行下面的代码2

代码2

}

else if(判断条件)

。。。。。

else {
最后代码

}

Switch ...case语句

用来判断多个可能出现的值

switch 语句与 if 语句的关系最为密切,而且也是在其他语言中普遍使用的一种流控制语句。

switch (expression) {
case value: statement
break;
case value: statement
break;
case value: statement
break;
case value: statement
break;

default: statement
}

switch 语句中的每一种情形(case)的含义是:如果表达式等于这个值(value),则执行后面的语句(statement。而 break 关键字会导致代码执行流跳出 switch 语句。如果省略 break 关键字,就会导致执行完当前 case 后,继续执行下一个 case。通过为每个 case 后面都添加一个 break 语句,就可以避免同时执行多个case 代码的情况。

也可以多种情况混合。

switch (i) {
case 25:
/* 合并两种情形 */
case 35:
alert("25 or 35");
break;
case 45:
alert("45");
break;
default:
alert("Other");
}

需要注意的是switch 语句在比较值时使用的是全等操作符,因此不会发生类型转换(例如,
字符串"10"不等于数值 10)。

breakcontinue语句

break是在循环内部结束合格循环。

continue是在循环的内部结束本次循环,开始下一次循环:

循环语句

for循环是反复执行同一段代码。

for(var i = 1; 判断条件; i++){
要循环的代码块:

}

当程序运行到for的时候,会先声明一个变量i,并且赋值为1,判断i是否满足后面的判断条件,如果满足,执行下面的要循环的代码块,代码 块执行完成之后再执行i++,再判断判断条件是否满足,如果满足再次按照上面的流程执行,如果不满足,结束for循环。

for循环还可以用于嵌套,实现复杂的运算,冒泡排序就用到了for循环的嵌套。下面举两个for循环嵌套的例子。

打印直角三角形,

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

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

document.write("☆");

}

document.write("<br/>");

}

打印99乘法表

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

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

document.write(j + "*" + i + "=" + i * j);// 1 * 1 = 1

document.write(" ");

}

document.write("<br/>");

}

for in循环

for-in 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。

举个例子

var x

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for (x in mycars)

{

document.write(mycars[x] + "<br />")

}

while循环

while(判断条件/boolean){
代码块

}

当代码执行到while的时候,会先判断判断条件是否为true,如果为true,那么会执行while大括号中的代码块,代码块执行完毕以后,再次回到while中再进行判断,如果为true,再次执行while大括号中的代码块,并且再次回while,如果为false就不执行。

注意:将来在写代码的时候一定要注意循环的判断条件不能一直为true,否则会成为一个死循环。

do...while循环

do-while 语句是一种后测试循环语句,即只有在循环体中的代码执行之后,才会测试出口条件。
换句话说,在对条件表达式求值之前,循环体内的代码至少会被执行一次。

do {
statement
} while (expression);

do...while语句在开发中并不怎么用,用的最多的还是for循环,以及for循环嵌套。

补充:

Function函数对象

函数申明式

function fn(){

// 函数体

}

函数表达式(匿名函数)

var fn = function(){

// 函数体

}

// fn表示函数名称

// 函数表达式通常又叫匿名函数 因为没有函数名

函数的调用

fn();// 注意:函数只申明不调用是不会执行的

函数的参数

// 申明

function 函数名(形参1,形参2,形参3,){

// 函数体

}

// 调用

函数名(实参1,实参2,实参3);

函数名(实参1);// 这样写也不会有问题

函数名(实参1,实参2,实参3,实参4);// 这样写也不会有问题

// 注意:函数的实参个数可以和形参的个数不同

函数的返回值

function 函数名(){

return 要返回值;

}

// 注意:函数不写返回值时默认的返回值是undefined

函数的递归函数在内部调用自身函数叫递归

function fn(){
fn();
}

fn();

函数的回调被当做参数传递的函数叫回调函数

function fn1(){
console.log(“我是回调函数”);
}

function fn2(parameter){
parameter(); // 调用函数
// 这里的parameter是形参 代表传进来的函数fn1
}

fn2(fn1);// fn1就是一个回调函数
Javascript 相关文章推荐
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
Javascript动画效果(2)
Oct 11 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
fastadmin中调用js的方法
May 14 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 #jQuery
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 #Javascript
浅谈vue的踩坑路
Aug 31 #Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 #Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 #Javascript
基于JSON数据格式详解
Aug 31 #Javascript
浅谈js中的this问题
Aug 31 #Javascript
You might like
Terran热键控制
2020/03/14 星际争霸
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
PHP crc32()函数讲解
2019/02/14 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
JavaScript代码复用模式实例分析
2012/12/02 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
python机器学习之神经网络实现
2018/10/13 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
python 实现的车牌识别项目
2021/01/25 Python
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
小学音乐教学反思
2014/02/05 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书