JavaScript 学习笔记之语句


Posted in Javascript onJanuary 14, 2015

一、条件分支语句:if

基本格式:

if (<表达式1>){
    <语句组1>
}else if (<表达式2>){
    <语句组2>
}else{
    <语句组3>
}

执行流程:

JavaScript 学习笔记之语句

二、循环语句

2.1前测试循环语句:在循环体内的代码被执行之前就对出口条件求值。

2.1.1while语句

基本格式:

do {
    <语句组>
} while (<表达式>)

执行流程:

JavaScript 学习笔记之语句 2.1.2 for语句

基本格式:
for (<初始表达式>;<条件表达式>;<变动量表达式>){
    <语句组>
}

执行流程:
 JavaScript 学习笔记之语句

2.2后测试循环语句:在循环体中的代码被执行之后才会测试出口条件。

2.2.1、do-while语句

基本格式:

do {
    <语句组>
} while (<表达式>) ;

执行流程:

JavaScript 学习笔记之语句

三、精准的迭代语句:for-in

基本格式:
for ( 属性 in 对象 ){
    <语句组>
}

作用:重复执行指定对象的所有属性,可以用来枚举对象的属性。

 例子:

<html>

<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 + person[x];

}

document.getElementById("demo").innerHTML=txt;

}

</script>

</body>

</html>

如果要表示的对象为null或者undefined,循环体将不再执行,或者抛出错误,因此,在执行for-in循环时,应该先检测改对象的属性值是不是null或者undefined。

四、Lable语句

基本语法:

Label: <语句组>

如: begin: for (var i = 0; i < 10 ; i++ ){
                         alert(i);
                   }
举例说明lable语句的作用:
未加lable:

var num = 0;

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

             for (var j = 0 ; j < 10 ; j++){

                  if( i == 5 && j == 5 ){

                        break;

                  }

             num++;

             }

        }

        alert(num);//95

加入lable:

var num = 0;

    outPoint:

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

         for (var j = 0 ; j < 10 ; j++){

              if( i == 5 && j == 5 ){

                    break outPoint;

              }

         num++;

         }

    }

    alert(num); //55

第一个例子输出95不难理解,第二个例子为什么输出55呢,是因为执行到break outpoint时,直接跳出到putpoint层,执行alert语句。

如果把第二个例子改成下面这样:

                var num = 0;

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

                     outPoint: 

                     for (var j = 0 ; j < 10 ; j++){

                         if( i == 5 && j == 5 ){

                             break  outPoint;

                         }

                         num++;

                     }

                 };

         alert(num);//95

这个结果和第一个例子的结果是一致的。

五、break和continue语句

5.1break语句:

       var num = 0;

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

            if(i%5==0){

                break;

            }

            num++;

        };

        alert(num);//4

break语句执行后跳到alert语句

5.2continue语句:

  var num = 0;

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

     if(i%5==0){

        continue;

     }

       num++;

   };

   alert(num);//8

continue语句执行后跳到for()循环,继续执行循环,直到循环条件不成立。

六、with语句

基本语法:

with (object) {
    statements
}
举例说明:
不使用with的写法:

var qs = location.search.substring(1);

var hostName = location.hostname;      

var url = location.href;

 alert(qs);

 alert(hostName);

 alert(url);

使用with的写法:

  with(location){

             var qs = search.substring(1);

             var hostName = hostname;      

             var url = href;

         }

         alert(qs);

         alert(hostName);

         alert(url);

从上面例子可以看出:with语句的作用是将代码的作用域设置到一个特定的对象中、减少的重复输入。

但是js的解释器需要检查with块中的变量是否属于with包含的对象,这将使with语句执行速度大大下降,并且导致js语句很难被优化。

因此并不建议大规模使用with语句。

七、swith语句

基本语法:
switch (<表达式>) {
    case <数值1>:<语句组1>
                 break;
    case <数值2>:<语句组2>
                 break;
    ...
    default <语句组>
}

执行流程:

JavaScript 学习笔记之语句

switch语句可以是任何数据类型,每个case的值也不一定是常量,也可以是变量、表达式等,例如:

  switch ("hello world") {

             case "hello" + " world": 

                 alert("Greeting was found.");

                 break;

             case "goodbye": 

                 alert("Closing was found.");

                 break;

             default: 

                 alert("Unexpected message was found.");

         }
         var num = 25;

         switch (true) {

             case num < 0: 

                 alert("Less than 0.");

                 break;

             case num >= 0 && num <= 10: 

                 alert("Between 0 and 10.");

                 break;

             case num > 10 && num <= 20: 

                 alert("Between 10 and 20.");

                 break;

             default: 

                 alert("More than 20.");

         }

switch语句在比较时使用的是全等操作符比较,因此不会发生类型转换。

练习:

 <script type="text/javascript">

         var count = 10;

         for (var i=0; i < count; i++){

             alert(i);

         }

         alert(i);   //输出什么?

     </script>

for(;;){
    alert("2");//输出多少次2?
}

以上就是本文的全部内容了,希望对小伙伴们能够有所帮助。

Javascript 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JS函数基本定义与用法示例
Jan 15 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
JavaScript 学习笔记之操作符(续)
Jan 14 #Javascript
JavaScript 学习笔记之操作符
Jan 14 #Javascript
Node.js的包详细介绍
Jan 14 #Javascript
JavaScript 学习笔记之数据类型
Jan 14 #Javascript
ExpressJS入门实例
Jan 14 #Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 #Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 #Javascript
You might like
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
php cookis创建实现代码
2009/03/16 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python学习之面向对象【入门初级篇】
2017/01/21 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
保险内勤岗位职责
2015/04/13 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
MySQL数据库 安全管理
2022/05/06 MySQL