javascript中有哪些流程控制语句

2023-04-23 12:56:02JavaScript028

javascript中有哪些流程控制语句,第1张

下面复制于网络，详细讲解javascript中的各种控制结构。

一、条件选择结构

条件选择语句用于基于不同的条件来执行不同的动作，通常在写代码时，总是需要为不同的决定来执行不同的

动作，可以在代码中使用条件语句来完成该任务。

在JavaScript中，我们可使用以下条件语句：

if 语句：只有当指定条件为true时，使用该语句来执行代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JS流程控制语句</title>

</head>

<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。</p>

var time=new Date().getHours()

document.write("当前北京时间："+time)

function myFunction()

{

var x=""

if (time<20)

{

x="Good day"

}

document.getElementById("demo").innerHTML=x

}

</script>

</body>

</html>

运行的结果为：

if...else语句：当条件为true时执行代码，当条件为 false 时执行其他代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JS流程控制语句</title>

</head>

<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。如果时间晚于 20:00，会获得问候 "Good evening"。</p>

var time=new Date().getHours()

document.write("当前北京时间："+time)

function myFunction()

{

var x=""

if (time<20)

{

x="Good day"

}

else

{

x="Good evening"

}

document.getElementById("demo").innerHTML=x

}

</script>

</body>

</html>

运行的结果为：

if...else if....else 语句：使用该语句来选择多个代码块之一来执行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JS流程控制语句</title>

</head>

<body>

<p>如果时间早于 10:00，会获得问候 "Good morning"。</p>

<p>如果时间早于 20:00，会获得问候 "Good day"。</p>

<p>如果时间晚于 20:00，会获得问候 "Good evening"。</p>

var time=new Date().getHours()

document.write("当前北京时间："+time)

function myFunction()

{

var x=""

if (time<10)

{

x="Good morning"

}

else if (time<20)

{

x="Good day"

}

else

{

x="Good evening"

}

document.getElementById("demo").innerHTML=x

}

</script>

</body>

</html>

运行的结果为：

switch语句：使用该语句来选择多个代码块之一来执行。switch 语句用于基于不同的条件来执行不同的动作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JS流程控制语句2</title>

</head>

<body>

<p>点击下面的按钮来显示今天是周几：</p>

var d=new Date().getDay()

document.write("今天的星期代表数字："+d)

function myFunction()

{ var x

switch (d)

{

case 0:

x="Today it's Sunday"

break

case 1:

x="Today it's Monday"

break

case 2:

x="Today it's Tuesday"

break

case 3:

x="Today it's Wednesday"

break

case 4:

x="Today it's Thursday"

break

case 5:

x="Today it's Friday"

break

case 6:

x="Today it's Saturday"

break

}

document.getElementById("demo").innerHTML=x

}

</script>

</body>

</html>

运行的结果：

default关键字的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JS流程控制语句2</title>

</head>

<body>

<p>点击下面的按钮来显示今天是周几：</p>

var d=new Date().getDay()

document.write("今天的星期代表数字："+d)

function myFunction()

{ var x

switch (d)

{

case 6:

x="Today it's Saturday"

break

case 0:

x="Today it's Sunday"

break

default:

x="Looking forward to the Weekend"

}

document.getElementById("demo").innerHTML=x

}

</script>

</body>

</html>

运行的结果为：

二、循环结构

循环可以将代码块执行指定的次数。

JavaScript支持不同类型的循环：

(1)for语句：循环代码块一定的次数

for(var box=1box<=10box++)

{

document.write("box="+box+"<br/>")

}

运行的结果为：

(2)for...in语句：循环遍历对象的属性

var box={

name:"张三",

age:24,

sex:"男"

}

for(x in box)

{

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

}

运行的结果为：

(3)while语句：当指定的条件为 true 时循环指定的代码块。先判断，再执行语句，这种比较实用。

var box=1

while(box<=5)

{

document.write("box="+box+"<br/>")

box++

}

运行的结果为：

(4)do...while - 同样当指定的条件为 true 时循环指定的代码块。先执行一次，再判断

var box=1

do{

document.write("box="+box+"<br/>")

box++

}while(box<=10)

运行的结果为：

三、其他语句

(1)break语句：用于跳出循环。

for(var box=1box<=10box++)

{

if(box==5)

{

break//强制退出整个循环

}

document.write("box="+box+"<br/>")

}

运行的结果为：

执行到第四次循环时不再继续执行，跳出了真个循环,，输出的少了box=5以后的循环。

(2)continue语句：用于跳过循环中的一个迭代。

for(var box=1box<=10box++)

{

if(box==5)

{

continue//退出当前循环，还会继续执行后面的循环

}

document.write("box="+box+"<br/>")

}

运行的结果为：

执行到第四次循环时，跳出第五次循环，继续向下面执行，输出的少了box=5。

(3)with语句：将代码的作用域设置到一个特定的对象中

先来看一般我们是怎么样输出对象的属性的值的：

var box={

name:"张三",

age:24,

sex:"男"

}

var n=box.name

var a=box.age

var s=box.sex

document.write(n+"<br/>")

document.write(a+"<br/>")

document.write(s)

运行的结果为：

改用with语句来写：

var box={

name:"张三",

age:24,

sex:"男"

}

with(box){

var n=name

var a=age

var s=sex

}

document.write(n+"<br/>")

document.write(a+"<br/>")

document.write(s)

JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()

基本选择器有ID选择器、类选择器、标签选择器、通用选择器，事件的添加方法如下：

$(...).事件名(function() { })

属性样式有：

$(...).css("border","1px solid red")

$(...).css({...})

$(...).css("border")

$(...).attr(属性名,值)

$(...).html() innerHTML

$(...).text() innerText

$(...).val() value值

$(...).addClass() 增加

$(...).removeClass() 移除

$(...).toggleClass() 开关

javascript 中的?是属性。例如：var text={ x:1,y:2 } ，输出：text.x 那么值就是1 如此而已。

javascript的相关概念：

语句

JavaScript程序是由若干语句组成的，语句是编写程序的指令。JavaScript提供了完整的基本编程语句，它们是：

赋值语句、switch选择语句、while循环语句、for循环语句、for each循环语句、do...while循环语句、break循环中止语句、continue循环中断语句、with语句、try…catch语句、if语句（if..else，if…else if…）。

函数

函数是命名的语句段，这个语句段可以被当作一个整体来引用和执行。使用函数要注意以下几点：

1）函数由关键字function定义（也可由Function构造函数构造）

2）使用function关键字定义的函数在一个作用域内是可以在任意处调用的（包括定义函数的语句前）；而用var关键字定义的必须定义后才能被调用

3）函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名

4）参数表示传递给函数使用或操作的值，它可以是常量，也可以是变量，也可以是函数，在函数内部可以通过arguments对象（arguments对象是一个伪数组，属性callee引用被调用的函数）访问所有参数

5）return语句用于返回表达式的值。

6）yield语句扔出一个表达式，并且中断函数执行直到下一次调用next。

一般的函数都是以下格式：

function myFunction(params){

//执行的语句

}

函数表达式：

var myFunction=function(params){

//执行的语句

}

var myFunction = function(){

//执行的语句

}

myFunction()//调用函数

匿名函数，它常作为参数在其他函数间传递：

window.addEventListener('load',function(){

//执行的语句

},false)

对象

JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。

一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的颜色为蓝色。

事件

用户与网页交互时产生的操作，称为事件。事件可以由用户引发，也可能是页面发生改变，甚至还有你看不见的事件（如Ajax的交互进度改变）。绝大部分事件都由用户的动作所引发，如：用户按鼠标的按键，就产生click事件，若鼠标的指针在链接上移动，就产生mouseover事件等等。在JavaScript中，事件往往与事件处理程序配套使用。

而对事件的处理，W3C的方法是用addEventListener()函数，它有三个参数：事件，引发的函数，是否使用事件捕捉。为了安全性，建议将第三个参数始终设置为false

传统的方法就是定义元素的on…事件，它就是W3C的方法中的事件参数前加一个“on”。而IE的事件模型使用attachEvent和dettachEvent对事件进行绑定和删除。JavaScript中事件还分捕获和冒泡两个阶段，但是传统绑定只支持冒泡事件。

变量

1、常用类型

Object：对象

Array：数组

Number：数

Boolean：布尔值，只有true和false两个值，是所有类型中占用内存最少的

null：一个空值，唯一的值是null，表空引用

undefined：没有定义或赋值的变量

2、命名形式

一般形式是：

var <变量名表>

其中，var是javascript的保留字，表面接下来是变量说明，变量名表是用户自定义标识符，变量之间用逗号分开。和C++等程序不同，在javascript中，变量说明不需要给出变量的数据类型。此外，变量也可以不说明而直接使用。

3、作用域

变量的作用域由声明变量的位置决定，决定哪些脚本命令可访问该变量。在函数外部声明的变量称为全局变量，其值能被所在HTML文件中的任何脚本命令访问和修改。在函数内部声明的变量称为局部变量。只有当函数被执行时，变量被分配临时空间，函数结束后，变量所占据的空间被释放。局部变量只能被函数内部的语句访问，只对该函数是可见的，而在函数外部是不可见的。

运算符

javascript提供了丰富的运算功能，包括算术运算、关系运算、逻辑运算和连接运算。

1.算术运算符

javascript中的算术运算符有单目运算符和双目运算符。双目运算符包括：+（加）、-（减）、*（乘）、/（除）、%（取模）、|（按位或）、&（按位与）、<<（左移）、>>（右移）等。单目运算符有：-（取反）、~（取补）、++（递加1）--（递减1）等。

2.关系运算符

关系运算符又称比较运算，运算符包括：<(小于)、<=（小于等于）、>（大于）、>=（大于等于）、==（等于）和!=（不等于）以及 ===) 和 !==。

关系运算的运算结果为布尔值，如果条件成立，则结果为true，否则为false。

3.逻辑运算符

逻辑运算符有：&&（逻辑与）、||（逻辑或）、!（取反，逻辑非）、^（逻辑异或）。

4.字符串连接运算符

连接运算用于字符串操作，运算符为+（用于强制连接），将两个或多个字符串连结为一个字符串。

5.三目操作符？

三目操作符“?:”格式为：

操作数?表式1:表达式2

三目操作符“？：”构成的表达式，其逻辑功能为：若操作数的结果为true，则表述式的结果为表达式1，否则为表达式2。例如max=（a>b）?a:b；该语句的功能就是将a,b中的较大的数赋给max。

相关规则

在JavaScript中，“==="是全同运算符，只有当值相等，数据类型也相等时才成立。

等同运算符“=="的比较规则：

当两个运算数的类型不同时：将他们转换成相同的类型。

1)一个数字与一个字符串，字符串转换成数字之后，进行比较。

2)true转换为1、false转换为0，进行比较。

3)一个对象、数组、函数与一个数字或字符串，对象、数组、函数转换为原始类型的值，然后进行比较。(先使用valueOf,如果不行就使用toString)

4)其他类型的组合不相等。

JavaScript想两个运算数类型相同，或转换成相同类型后：

1)2个字符串：同一位置上的字符相等，2个字符串就相同。

2)2个数字：2个数字相同，就相同。如果一个是NaN,或两个都是NaN,则不相同。

3)2个都是true，或者2个都是false，则相同。

4)2个引用的是同一个对象、函数、数组，则他们相等，如果引用的不是同一个对象、函数、数组，则不相同，即使这2个对象、函数、数组可以转换成完全相等的原始值。

5)2个null，或者2个都是未定义的，那么他们相等。

而“===”是全同运算符，全同运算符遵循等同运算符的比较规则，但是它不对运算数进行类型转换，当两个运算数的类型不同时，返回false只有当两个运算数的类型相同的时候，才遵循等同运算符的比较规则进行比较。

例如：null==undefined 会返回真，但是null===undefined 就会返回假！

表达式

表达式是指将常量、变量、函数、运算符和括号连接而成的式子。根据运算结果的不同，表达式可分为算术表达式、字符表达式、和逻辑表达式。

脚本语言

不同于服务器端脚本语言，例如PHP与ASP，JavaScript是客户端脚本语言，也就是说JavaScript是在用户的浏览器上运行，不需要服务器的支持而可以独立运行。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。

JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。解释语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也无法运行。而且由于每次重新加载都会重新解译，加载后，有些代码会延迟至运行时才解译，甚至会多次解译，所以速度较慢。

与其相对应的是编译语言，例如Java。Java的源代码在传递到客户端运行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。但是它必须在服务器端进行编译，这样就拖延了时间。但因为已经封装，所以能保证安全性。

Javascript库

库，指得是可以方便应用到现有开发体系中的、现成的代码资源。库不仅为大部分日常的DOM脚本编程工作提供了快捷的解决方案，而且也提供了许多独特的工具。虽然库使用起来很方便，但它们也并非能解决你所有的问题。在使用库之前，一定要保证真正理解javascript的DOM原理。

这些库一般是一个（或多个）js（Javascript的缩写）文件，只要把他们导入你的网页就能使用了。

常用的库有：

jQuery：javascript库中的新成员，提供css和xpath选择符查找元素、ajax、动画效果等

JSer: 国人开发的一款全功能的开源脚本框架. 借助JSer，可以便捷的操作DOM、CSS样式访问、属性读写、事件绑定、行为切换、动态载入、数据缓存、URL与AJAX等众多功能。

dojo：一个巨大的库，包括的东西很多，dijit和dojox是dojo的扩展，几乎你想要的各种javascript程序都包括了。

prototype：一个非常流行的库，使用了原型链向javascript中添加了很多不错的函数

YUI：（YahooYUI库）yahoo！用户界面，非常实用，提供各种解决方案。

ExtJs：组件非常丰富，皮肤也很漂亮，动画效果也丰富。

语句