JavaScript进阶

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript进阶相关的知识，希望对你有一定的参考价值。

 

现在来说说判断语句（if）
if语句是基于条件成立才执行相应代码时使用的语句。
语法：
if(条件)
{条件成立时执行代码}
注意：if小写，大写字母（IF）会出错！
假设你应聘web前端技术开发岗位，如果你会html技术，你面试成功，欢迎加入公司
代码表示如下：
<script type="text/javascript">
 var mycarrer="HTML";
 if(mycarrer == "HTML")
 {
  document.write("你面试成功，欢迎加入公司！");
 }
</script>
那么二选一的方法怎么弄呢？就是if...else
if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码
语法:
if(条件)
{条件成立时执行的代码}
else
{条件不成立时执行的代码}
假设你应聘web前端技术开发岗位，如果你会HTML技术，你面试成功，欢迎加入公司
否则你面试不成功，不能加入公司。
代码演示如下：
<script type="text/javascript">
 var mycarrer="HTML";//mycarrer变量存储技能
 if(mycarrer == "HTML")
  {document.write("你面试成功，欢迎加入公司。")}
 else
  {document.write("你面试不成功，不能加入公司。")}
</script>
要在多组语句中选择一组来执行，使用if...else嵌套语句。
语法：
if(条件1)
{条件1成立时执行的代码}
else if(条件2)
{条件2成立时执行的代码}
...
else if(条件n)
{条件n成立时执行的代码}
else
(条件1、2至n不成立时执行的代码)
假设数学考试，小明考试86分，给他做个评价，60分以下的不及格，60（包含60）
-75分为良好，75（包含75）-85为很好，85（包含85）-100优秀。
代码如下：
<script type="text/javascript">
 var score=86;
 if(score<60){
 document.write("成绩不及格")
 }else if(score<75){
 document.write("成绩良好")
 }else if(score<85){
 doucment.write("成绩很好")
 }else{
 document.write("成绩优秀")
}
</scripe>
当有很多选择的时候，switch比if else方便
语法：
switch(表达式)
{
case值1;
 执行代码块1
 break;
case值2;
 执行代码块2
 break;
...
case值n;
 执行代码块n
 break;
dafault:
 与case值1、case值2...case值n不同时执行的代码
}
语法说明：
switch必须赋初始值，值与每个case值匹配。满足执行该case后的所有语句，并用
break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。
假设评价学生考试成绩，10分满分制，我们按照每一分一个等级将成绩分等，并根
据成绩的等级做出不同的评价。
代码如下：
<script type="text/javascript">
var myscore=6;//myscore变量存储分数，假设为6
switch(myscore)//switch实现判断，case 6匹配
{
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
 degree="继续努力";
 document.write("评语"+degree+"<br>");
 break;
case 6:
 degree="及格，加油！";
 document.write("评语"+degree+"<br>");
 break;
case 7:
 degree="凑合，奋进！";
 document.write("评语"+degree+"<br>");
 break;
case 8:
 degree="很棒";
 document.write("评语"+degree+"<br>");
 break;
case 9:
case 10:
 degree="高手，大牛！";
 document.write("评语"+degree+"<br>");
}
</script>
很多事情不只是做一次，需要重复做。如打印十份试卷，每次打印一份，重复这个
动作，直到打印完成。这些事情，我们使用循环语句来完成，循环语句，就是重复
执行一段代码。
for语句结构：
for(初始化变量；循环条件；循环迭代)
{
 循环语句
}
假如一个盒子里面有六个球，我们每次取一个，重复从盒中取出球，直到球取完为止。
<script type="text/javascript">
var num=1;
for(num=1;num<=6;num++)//初始化值，循环条件，循环后条件值更新
{
 document.write("取出第"+num+"个球<br/>")
}
</script>
这里详细解释一下执行的思路，帮助大家理解：
第一次：
初始化:num=1
判断：num<=6
输出：取出第1个球
条件值更新：num++(num=num+1,num值为2)
第二次：
判断：num<=6(因为第一次执行后num的值为2，判断2<=6，条件为真)
输出：取出第2个球
条件值更新：num++(num=num+1,num值为3)
第三次：
判断：num<=6(因为第二次执行后num的值为3，判断3<=6，条件为真)
输出：取出第3个球
条件值更新：num++(num=num+1,num值为4)
第四次、第五次、//中间一样
第六次：num<=6(因为第五次执行后num的值为6，判断6<=6，条件为真)
输出：取出第6个球
条件值更新：num++(num=num+1,num值为7)
第七次：num<=6(因为第六次执行后num的值为7，判断7<=6，条件为假，所以不再
执行输出语句，结束for循环。)
和for循环有相同功能的还有while循环，while循环重复执行一段代码，直到某个
条件不再满足。
while语句结构：
while(判断条件){
 循环语句
}
使用while循环，完成从盒子里取球的动作，每次取一个，共6个球。
<script type="text/javascript">
var num=0;//初始化值
while(num<=6)//条件判断
{
 document.write("取出第"+num+"个球<br/>");
 num=num+1;//条件值更新
}
</script>
do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执
行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。
do...while语句结构：
do
{
  循环语句
}
while(判断条件)
我们试着输出5个数字。
<script type="text/javascript">
 num=1;
 do
{
 document.write("数值为："+num+"<br/>");
 num++;//更新条件
}
while(num<=5)
</script>
第一次：
输出：数值为1
条件值更新：num++(num=num+1,num值为2)
判断num<=5(num值为2,判断2<=5,条件为真,进行do循环)
第二次，第三次，第四次都一样
第五次：
输出：数值为5
条件值更新:num++(num=num+1,num值为6)
判断num<=5(num值为6,所以判断6<=5，条件为假,不在循环)
ps:我承认我偷懒了。刚刚打了一大段，结果因为没保存。。呵呵哒了。各位一定记
住及时保存这个问题！！！
在while for do...while while循环中使用break语句退出当前循环，直接执行后面
的代码。
格式如下：
for(初始条件;判断条件;循环后条件值更新)
{
 if(特殊情况)
 {break;}
 循环代码
}
当遇到特殊情况的时候，循环就会立即结束。看看下面的例子，输出十个数，如果
数值为5，就停止输出。
<script type="text/javascript">
 var num;
 for(num=1;num<=10;num++)
{
 if(num==5)
{
 break;//如果num是5，退出循环
}
document.write("数值"+num+"<br/>")
}
</script>
continue的作用是仅仅跳过本次循环，而整个循环体继续执行。
语句结构：
for(初始条件;判断条件;循环后条件值更新)
{
 if(特殊情况)
 {continue;}
 循环代码
}
上面的循环中，当特殊情况发生的时候，本次循环将被跳过，而后续的循环则不会
受到影响。好比输出10个数字，如果数字为5就不输出了。
<script type="text/javascript">
 var num;
 for(num=1;num<=10;num++)
{
 if(num==5)
 {
  continue;
 }
 document.write("数值"+num+"<br/>")
}
</script>
注意：上面的代码中，num=5的那次循环将被跳过。
做个练习：
在一个大学的编程选修课班里，我们得到了一组参加该班级的学生数据，分别是姓名、性别、年龄和年级，接下来呢，我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。
学生信息如下：
    (‘小A‘,‘女‘,21,‘大一‘),  (‘小B‘,‘男‘,23,‘大三‘),
    (‘小C‘,‘男‘,24,‘大四‘),  (‘小D‘,‘女‘,21,‘大一‘),
    (‘小E‘,‘女‘,22,‘大四‘),  (‘小F‘,‘男‘,21,‘大一‘),
    (‘小G‘,‘女‘,22,‘大二‘),  (‘小H‘,‘女‘,20,‘大三‘),
    (‘小I‘,‘女‘,20,‘大一‘),  (‘小J‘,‘男‘,20,‘大三‘)
代码在评论中我会贴出来。

 

<!DOCTYPE  HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程控制语句</title>
<script type="text/javascript">
var infos=[["小A","女",21,"大一"],["小B","男",23,"大三"],["小C","男",24,"大四"],["小D","女",21,"大一"],["小E","女",22,"大四"],["小F","男",21,"大一"],["小G","女",22,"大二"],["小H","女",20,"大三"],["小I","女",20,"大一"],["小J","男",20,"大三"]];
 for (var i=0;i<infos.length;i++)
    {
        if(infos[1]=="女"&&infos[3]=="大一")        {
            document.write(infos[0]+"<br />")
        }    }
 
</script>
</head>
<body>
</body>
</html>
































































































































































































































































以上是关于JavaScript进阶的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 开发进阶：理解 JavaScript 作用域和作用域链

JavaScript 进阶问题列表

python前端JavaScript入门及进阶

Javascript进阶---对象类型

Javascript 进阶 面向对象编程 继承的一个例子

javaScript-进阶篇