JavaScript学习总结（二）

roobtyan

发布于 2019-02-21 15:54:04

4700

发布于 2019-02-21 15:54:04

文章被收录于专栏：最高权限比特流最高权限比特流

在学习完了上一节的内容之后，我们接下来讲的是循环语句以及后面函数的一些问题。

循环语句

while循环：与java中的while循环无区别
do-while循环：与java中的do-while循环无区别
for循环：与java中的for循环无区别格式： for(初始化语句; 判断的条件 ; 循环后的语句){ 循环体语句； }

下面我们以一个很常见很简单的栗子结束这一小部分：打印九九乘法表：

<script type="text/javascript">
    for(var i=1;i<=9;i++){
        for(var j=1;j<=i;j++){
            document.write(j+"*"+i+"="+(j*i)+"&nbsp;&nbsp");
        }
        document.write("<br/>");
    }
</script>

for-in语句

格式：

for(var 变量名 in 遍历的目标){
}

for-in语句的作用：

1. 可以用于遍历数组的元素。  注意： 使用for-in语句遍历数组元素的时候遍历出来是数组的下标。
    <script type="text/javascript">
        var arr = [12,13,16,18,22];
        for(var item in arr){
            document.write(item+",");//输出的结果是0，1，2，3，4，
        }
    </script>
//正确的使用方法如下：
    <script type="text/javascript">
        var arr = [12,13,16,18,22];
        for(var item in arr){
            document.write(arr[item]+",");//输出的结果是12,13,16,18,22,
        }
    </script>

//普通的遍历方式（使用for循环）
    <script type="text/javascript">
        var arr = [11,12,3,43,5];
        for(int i=0;i<arr.length;i++){
            document.write(arr[i]+",");
        }
    </script>

2. 可以用于遍历对象的所有属性数据。 注意： 使用for-in语句遍历对象的属性的时候，遍历出来的是对象的属性名。
    <script type="text/javascript">
        function Person(id,name){
            this.id = id;
            this.name = name;
        }

        var p = new Person(123,"大熊");
        for(var person in p){
            document.write(p[person]+",");
        }
    </script>
上面使用的function用法不止这一个，其他用法我们后面会介绍。

with语句

作用：使用了with语句后，在存取对象属性和调用方法时就不用重复指定对象 格式：

with(对象){
}

具体用法如下：

    <script type="text/javascript">
        with(document){
            write("Hello world"+"<br/>");
            write("Hello world"+"<br/>");
            write("Hello world"+"<br/>");
        }   
    </script>
//自定义的对象同样可以使用
    <script type="text/javascript">
        function Person(id,name){
            this.id = id;
            this.name = name;
        }

        var p = new Person(123,"大熊");

        with(p){
            document.write("ID号:"+id);//输出id123
            document.write(" 姓名:"+name);//输出姓名：大熊
        }
    </script>

函数

函数的定义格式：

    function 函数名(形参列表){
        函数体 ;   
    }

看下面这个函数：

<script type="text/javascript">
    function add(var a , var b){
        var sum = a + b;
        document.write("结果：" + sum);
    }

    //调用
    add(2,1);
</script>

事实上，这样子调用是会出现问题的，IDE一般不会提示错误，而浏览器则会提示你var错误。也就是说，在定义形参的时候，不需要使用var关键字，直接写参数名称即可

<script type="text/javascript">
    function add(a , b){
        var sum = a + b;
        document.write("结果：" + sum);
    }

    //调用
    add(2,1);//输出结果为3
</script>

还有一些重要的注意事项，我们做出如下总结：

在 javascript中函数定义形参时是不能使用var关键字声明变量的
在javascript中的函数是没有返回值类型的，如果函数需要返回数据给调用者，直接返回即可，如果不需要返回则不返回，如果函数没有返回，而用变量接收了，则变量显示为undefined
在 javascript中是没有函数重载的概念的，后定义的同名函数会直接覆盖前面定义同名函数
在javascript中任何的函数内部都隐式的维护了一个arguments（数组）的对象，给函数传递数据的时候，是会先传递到arguments对象中，然后再由arguments数组对象分配数据给形参的

<script type="text/javascript">
    function add(){
        document.write("数组长度："+arguments.length);
    }
    add(1,2,3);//输出的结果是3，如果传入的是两个参数，则输出的结果是2，以此类推
</script>

就是说，如果函数是有形参的，传入的实参无论是几个，都会先存在arguments数组中，然后再由该数组依次分配给各个形参。最后，我们来一个例子作为函数部分的参考： 问题：在网页中输入一个月份（1-12），网页根据月份弹出对应月份的天数

</head>
    月份：<input id="month" type="text" /><input type="button" value="查询" onClick="showDay()" />
<body>

<script type="text/javascript">
    function showDay(){
        //0.找到对应的月份标签对象
        var inputMonth = document.getElementById("month");
        var month = inputMonth.value;
        //alert(inputMonth.value);
        //1.用获取到的值弹出对应的天数
        if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
            alert("本月是31天！");
        }else if(month==4||month==6||month==9||month==11){
            alert("本月是30天！");
        }else if(month==2){
            alert("闰年2月29天，非闰年28天");
        }else{
            alert("没有该月份（月份应为1-12）");
        }
    }
</script>
</body>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018年02月24日，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript