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或css文件后面跟参数的原因说明
Jan 09 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
浅析Vue实例以及生命周期
Aug 14 Javascript
vue-test-utils初使用详解
May 23 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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
PHP 数据库树的遍历方法
2009/02/06 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
vue实现购物车小案例
2019/09/27 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
让 python 命令行也可以自动补全
2014/11/30 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python中自定义函数的教程
2015/04/27 Python
Python实现简单字典树的方法
2016/04/29 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python迭代和迭代器详解
2016/11/10 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
自荐信不宜过于夸大
2013/11/06 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
让生命充满爱观后感
2015/06/08 职场文书
田径运动会广播稿
2015/08/19 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL