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 相关文章推荐
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
简单实现node.js图片上传
Dec 18 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
浅谈js中的bind
Mar 18 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
原生JS实现音乐播放器的示例代码
Feb 25 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 Javascript
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
PHP分页显示制作详细讲解
2008/11/19 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
php实现websocket实时消息推送
2018/03/30 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
实践Vim配置python开发环境
2018/07/02 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
python读取图片任意范围区域
2019/01/23 Python
django使用xadmin的全局配置详解
2019/11/15 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
采购主管的岗位职责
2013/12/17 职场文书
学生会竞聘书范文
2014/03/31 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
初一语文教学反思
2016/03/03 职场文书
在Python 中将类对象序列化为JSON
2022/04/06 Python