目录
语句
单语句：一行代码中有多个单语句，那么每一个但语句结尾都要以分号结尾(也可以不加分号）
eg：var a=20+30; a=30; for(){};
复合语句：if(){};if(){}
空语句：； for(var a=20;a<200;){console.log(a);}
语句组成程序
一、 if语句
条件语句用于 基于不同的条件 来执行不同的动作。 //更具有逻辑性
通常在写代码时，总是需要为不同的决定来执行不同的动作。我们可以在代码中使用条件语句来完成该任务。
在 JavaScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
1. if 语句
if需要小写 。使用大写字母（IF）会生成 JavaScript 错误！
只有当指定条件为 true 时，该语句才会执行代码。
语法如下：
if (condition) { *当条件为 true 时执行的代码* }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if语句</title>
</head>
<body>
<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
var time=new Date().getHours(); //获取小时
//getFullYear()、getMonth()+1、getDate()、getDay()、getHours()、getMinutes()、getSeconds()、getTime()
if (time<20){
x="Good day";
}
document.querySelector("#demo").innerHTML=x;
}
</script>
</body>
</html>在这个语法中，没有 ..else..。告诉浏览器只有在指定条件为 true 时才执行代码。
2. if...else 语句
js的执行引擎：如果执行体只有一个语句 可以省略执行体
使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。
语法如下：
if (condition) { 当条件为 true 时执行的代码 } else { 当条件不为 true 时执行的代码 }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if...else</title>
</head>
<body>
<p>点击这个按钮，获得基于时间的问候。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
else{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>3.if...else if....else 语句
使用 if....else if...else 语句来选择多个代码块之一来执行。
语法如下：
if (condition1) { 当条件 1 为 true 时执行的代码 } else if (condition2) { 当条件 2 为 true 时执行的代码 } else { 当条件 1 和 条件 2 都不为 true 时执行的代码 }
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time<12)
{
document.write("<b>早上好</b>");
}
else if (time>=12 && time<18)
{
document.write("<b>今天好</b>");
}
else
{
document.write("<b>晚上好!</b>");
}
</script>
<p>
这个例子演示了 if..else if...else 语句。
</p>
</body>
</html> var a=27;
if(a<18){
console.log("未成年");
}else{
if(a>22){
console.log("可以喝酒结婚");
}else{
consloe.log("可以喝酒");
}
}
//上面的代码可以写为下面这样的
var a=27;
if(a<18){
console.log("未成年");
}
else if(a>22){
console.log("可以喝酒结婚");
}
else{
consloe.log("可以喝酒");
}
把第二个if 写为else if就可以了
二、 switch语句
switch 语句用于 基于不同的条件 来执行不同的动作。 更具有业务行
使用 switch 语句来选择要执行的多个代码块之一。
语法如下：
switch(n) { case 10: 执行代码块 1 break; case 20: 执行代码块 2 break; default: 前面都没执行就执行这个default }
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>switch语法</title>
</head>
<body>
<p>点击下面的按钮来显示今天是周几：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var d=new Date().getDay();
switch (d){
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
document.querySelector("demo").innerHTML=x;
}
</script>
</body>
</html>default 关键词
使用 default 关键词来规定匹配不存在时做的事情：
<html>
<head>
<meta charset="utf-8">
<title>switch的default</title>
</head>
<body>
<p>点击下面的按钮，会显示出基于今日日期的消息：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default:
x="期待周末";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>三、 for语句
for没有作用域
for循环编程时只使用了它非常简单的一个功能：希望重复的到的变化的量的值，值是有规律的变化
循环可以将代码块执行指定的次数。
如果希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
我们可以这样输出数组的值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for循环</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++){
document.write(cars[i] + "<br>");
}
console.log(i)
</script>
</body>
</html>不同类型的循环
JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
for循环
for 循环是在希望创建循环时常会用到的工具。
语法如下：
for (语句 1; 语句 2; 语句 3) { 被执行的代码块 } for (语句 1; 语句 2;) { 被执行的代码块; 语句 3; }
语句 1 （代码块）循环开始前执行 starts.
语句 2 定义运行循环（代码块）的条件
语句 3 在每次循环（代码块）已被执行之后执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环语法</title>
</head>
<body>
<p>点击按钮循环代码5次。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
for (var i=0;i<5;i++){
x+= + "该数字为 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>-
语句 1
通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的，也就是说不使用语句 1 也可以。
您可以在语句 1 中初始化任意（或者多个）值：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>for循环-语句1可选</title> </head> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; var i=2,len=cars.length; for (; i<len; i++){ document.write(cars[i] + "<br>"); } </script> </body> </html>
-
语句 2
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。
如果省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。
-
语句 3 在每次循环（代码块）已被执行之后执行。
通常语句 3 会增加初始变量的值。
语句 3 也是可选的。
语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。
语句 3 也可以省略（比如当循环内部有相应的代码时）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>for循环-语句3可选</title> </head> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; var i=0,len=cars.length; for (; i<len; ){ document.write(cars[i] + "<br>"); i++; } </script> </body> </html>
- 被执行的代码块
被执行的代码块可以是用大括号将多条语句括起来的复合语句；
也可以是空语句，举例如下：
var h = new Array(5);//[,,,,,] console.log(h.length);//5 for (var i = 0; i < h.length; h[i++]=i); console.log(h);
实现取出一个奇数的数组
方法一：性能不好，因为全部都要执行
for (var i=0;i<arr,length;i++) { if(arr[i]%2 != 0) { console.log(i) } }方法二：性能较好，只用执行一些
表达式中出选择题：
1、
var i=0;
for(;i++,i<5;){
consloe.log(i);
} //结果为12342、
for(var i=0,j=6;i<4,j>0;i++,j--){ //就算i<4不成立了，但是爷要执行j>0，因为是逗号，总会执行
console.log(i);
}//0 1 2 3 4 53、
//考的是闭包和作用域
var arr=[];
for(var i=0;i<4;i++){
arr[i]=function(){console.log(i)}
} //函数不会运行，因为没有调用
arr[0](); //结果为4
arr[1](); //结果为4，因为变量只有一个
// for(var j=0;j<4;j++){
// arr[j]();//调用函数
// } 
小练习：
1、循环个数组var size=[1,2,3,4,5,6,7]，输出数组的每个元素到页面上； 2、写个乘法口诀表； 3、百钱百鸡 公鸡5文钱一只， 母鸡3文钱一只， 小鸡1文钱三只， 用100文钱买100只鸡， 问，公鸡，母鸡，小鸡各几只？
写代码才是关键，再出个题，练习一下：
写一个方法，求一个字符串的字节长度。（提示：字符串有一个方法charCodeAt();一个中文占两个字节，一个英文占一个字节）。 定义和用法 charCodeAt()方法可以返回指定位置的字符的Unicode编码。这个返回值是0~65535之间的证书。（当返回值是<=255时为英文字符，当返回值是>255时为中文） 语法 stringObject.charCodeAt(index) eg: <script type="javascript/text"> var str="Hello world!!" document.write(str.charCodeAt(1));//输出101，字母e对应的Unicode编码为101 </script>
for中的业务条件筛选和数据处理
var arr=[
{age:20,name:"karen",rank:80},
{age:8,name:"jack",rank:30},
{age:30,name:"marry",rank:10},
{age:90,name:"zhangsan",rank:90}
]
// for(var i=0;i<arr.length;i++){
// console.log(arr[i].name);
// } //打印数组中的对象的名字
// for(var i=0;i<arr.length;i++){
// if(arr[i].age>18){
// console.log(arr[i].name);
// }
// } //打印数组中的对象的大于18岁的名字
// for(var i=0;i<arr.length;i++){
// if(arr[i].age>18&&arr[i].rank>21){
// console.log(arr[i].name);
// }
// }
//for遍历数据容器-for最常用的功能，遍历就是把容器中每一个数据都取出
//打印年龄小于18岁而且rank大于400的对象的名字拼接一个字符串“少年班”。大于等于18岁，rank大于28的名字拼接“普通版”。否则不打。
for(var i=0;i<arr.length;i++){
if(arr[i].age<18){
if(arr[i].rank>28){
console.log(arr[i].name+"-少年班")
}
}
else if(arr[i].rank>28){
console.log(arr[i].name+"-普通版")
}
}
for的嵌套和业务混合
1、不要管内部的for与外部的for的执行问题，而是关注每一个for都是遍历的自己的数组
2、for内部有条件语句和数据处理，得到一个数组，然后用for去遍历它
（1)
var arr2=[{name:"karen"},{name:"jack"},{name:"marry"}];
//取出数组中的每一个对象
for(var i=0;i<arr2.length;i++){
console.log(arr2[i]);
}
//取出数组中的每一个对象的名字
for(var i=0;i<arr2.length;i++){
console.log(arr2[i].name);
}(2)
var arr3=[100,200,300,[2,3,5,4],{name:"karen"}];
// //取出arr3数组的每一个元素
// for(var i=0;i<arr3.length;i++){
// console.log(arr3[i]);
// }
//取出arr3数组中的每一个元素（如果是数组，再取出数组中的元素）
for(var i=0;i<arr3.length;i++){
// console.log(arr3[i]);
if(arr3[i] instanceof Array){
// consloe.log(arr3[i]);
for(var j=0;j<arr3[i].length;j++){
console.log(arr3[i][j]);
}
}else{
console.log(arr3[i]);
}
}(3)
把所有的都取出来
(4) 联动数据
四、 while语句
while 循环会在指定条件为真时循环执行代码块。
while：如果有一个业务需要重复执行，但是总有一次执行会让它停下来就不再执行，就用while。（for循环能做的事情，while都能做，而while能做的，不一定for能做）
for ：一个业务需要重复执行，但是是已知次数
语法如下：
条件判定为true，执行需要执行的代码，然后再重复； 条件判定为false直接借宿while循环语句
while (条件) { 需要执行的代码 } var i=0 for(;i<len;){ //需要执行的代码 i++; }
下例中的循环将继续运行，只要变量 i 小于 5：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=0;
while (i<5){
x=x + "该数字为 " + i + "<br>";
i++;
}
document.querySelector("#demo").innerHTML=x;
}
</script>
</body>
</html>小练习：
假设某人有100,000现金。 每经过一次路口需要进行一次交费。交费规则为： 当他现金大于50,000时每次需要交5%； 如果现金小于等于50,000时每次交5,000。 请写一程序计算此人可以经过多少次这个路口。
五、 for...in/of语句
JavaScript for/in 语句循环遍历对象的属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击下面的按钮，循环遍历对象 "person" 的属性及其值值。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var txt="";
var person=
{
fname:"Bill",
lname:"Gates",
age:56
};
for (x in person){
txt=txt + x+ "："+person[x]+"<br>";
}
document.getElementById("demo").innerHTML=txt;
var arr = [1,2,3,4,5];
//arr[0]=1
for(var i in arr){
console.log(i);
console.log(arr[i]);
}
}
</script>
</body>
</html>看看下面的代码会发生什么：
var personobj = {
name: '你叫什么？',
sex: '男',
weight: '160'
};
var arr = new Array();//arr=[]
var i = 0;
for(arr[i++] in personobj);
console.log(arr);六、 do-while语句
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。
语法如下：
do
{
需要执行的代码（不管下面是真还是假，都会执行这个一次）
}
while (条件);下面的例子使用 do/while 循环。该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=0;
do{
x=x + "该数字为 " + i + "<br>";
i++;
}while (i>0)
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>while 和 do/while 的区别 : do/while至少会执行一遍
七、 break和continue语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代，继续执行下一个迭代（如果有的话）。
结果为 5
结果为 3
结果为 0 1 2 4 如果没有continue那句，结果就是 0 1 2 3 4
break 语句举例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击按钮，测试带有 break 语句的循环。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=0;
for (i=0;i<10;i++){
if (i==3){
break;
}
x=x + "该数字为 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>continue 语句举例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击下面的按钮来执行循环，该循环会跳过 i=3 的步进。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=0;
for (i=0;i<10;i++){
if (i==3){
continue;
}
x=x + "该数字为 " + i + "<br>";//9行
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>八、 label 语句
label就是给代码块取一个名字，但是一般都不用这个标签语法。
标签语句，在语句之前加上冒号：可标记 JavaScript 语句。
语法如下：
label: statements
break 和 continue可以使用标签语句。
var a = 0;
forhere:
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if(j == 5){
break forhere;
//体会continue后面加和不加语句标签的区别；
//体会break后面加和不加语句标签的区别；
}
a++;
}
}
console.log(a);并且：
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
list:{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
</script>
</body>
</html>结果为： 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 ....... (外面的for循环执行一次，里面就要循环5次）
结果为： 0 0 1 2 1 0 1 2 2 0 1 2 ....
结果为 0 01 2 4 1 0 1 2 4 2 0 1 2 4 ....
九、 return语句
return指定函数调用后的返回值。 function fn(){ return; }
所以，return只能在函数体内出现；return后面的代码不会再执行；所以如果要对一个函数断点调试时...你懂的...
断点设置在return之后，对于函数调试无意义。
十、 throw抛出异常
js语言 是脚本语言，当运行的过程中遇到了错误就停止运行，后面的代码不再执行
立即停止正在执行的程序，跳转至 就近的逻辑异常处理程序。
反正看不懂，写段代码看看：
function factorial (n) {
if(isNaN(n)) throw new Error('请输入数字，HOHO');
if(n == 1) return 1;
return n*factorial(n-1);//递归
}
var n = factorial(3);//3*factorial(2)--3*2*factorial(1)--3*2*1
console.log(n);//6
var n = factorial('a05');
console.log(n);
var n = factorial(5);
console.log(n);throw抛出异常该异常可以是 JavaScript 字符串、数字、逻辑值或对象。
结果为： uncaught 出错了，并且后面的代码也不会执行
十一、 try-catch-finally语句
try-catch-finally是JavaScript的异常处理机制。
语法如下：
try{
//我们自认为没有错误的 处理业务的代码
}
catch(e){
//上面的业务处理代码报错了，这里才会执行
//console.log(e);
}
finally{
//这里总是会执行的，领导总结发言
}
//语句异常对象e里面有两个属性name和message，分别代表错误类型和错误描述信息。
瞄一眼小案例：
//var a = 90;
try{
console.log(a);
}
catch(e){
console.log(e.name); //返回错误类型
console.log(e.message); //错误描述
}
finally{
console.log('大会到此结束');
}
222不会执行，其他的都会
算平年/闰年
十二、 with语句
官方不建议使用，有代码不好优化、运行慢等问题；并且，严格模式下是不能使用with的。（后来的es6解决了这个性能问题，出了新技术：解构赋值 var {age,name}=obj;console.log(age) ）
with语句用于临时扩展作用域链。
临时扩展作用域，临时；with代码块执行完成后恢复原始状态。
语法结构如下：
with(object){ statement; } //将object添加到作用域链的头部，执行完成statement后，作用域链恢复到原始状态；
举例如下：
/*
*清空表单所有输入框的值
*document.querySelector('.mydiv').style.fontSize = '20px';
*document.querySelector('.mydiv').style.color = 'red';
*document.querySelector('.mydiv').style.backgroundColor = 'black';
*/
with(document.querySelector('.mydiv').style){
fontSize = '20px';
color = 'red';
backgroundColor = 'black';
} var a=20;
b=20;
console.log(window.a);//全局变量，就可以省略window
var obj= {
age:20,
name:"karen"
}
with(obj){
console.log(age);
}//打印20
960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
