JavaScript基础（详细总结）中

1、JS流程控制语句

1.1、if结构

    <script type="text/javascript">
        if (条件表达式) {
            代码块;
        } else if(条件表达式){
            代码块;
        } else {
            代码块;
        }
    </script>

JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别。

JS中对各种数据类型作为布尔值有以下特点：

类型                        用法
boolean                true为真、false为假
number                非0为true
string                除了空字符串("")，其他都是true
null&undefined        都是false
对象                  所有对象都是true

无意义的数据都为false 反之都为true。

    <script type="text/javascript">
        let obj = new Object();
      
        if(obj) { // 对象
            console.log("满足条件");
        } else {
            console.log("不满足条件");
        }
    </script>

1.2、switch语句

 <script type="text/javascript">
     var score = 90;//定义一个变量
                
     /* parseInt 取整的一个函数（方法） */
                
     /*
       注意事项：
         1、switch表达式一定会先找case,找到后一定要给break
         2、switch给位置没有关系，跟case有关
         3、如果找到后没有break，可以继续执行，直到找到break或都程序结束
     */
                
     switch(parseInt(score/10)){
        case 10:
        case 9:
            alert("学霸");
             // break;
        case 8:
            alert("优秀");
            // break;
        case 7:
            alert("还行");
            break; 
        default:
            alert("学渣");
            // break;   
    }
                
    </script>

    在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)。

    在JS中,switch语句可以接受任意的原始数据类型。
 

2 、循环结构

2.1、for循环

普通for循环

 for(let 初始化语句; 条件表达式; 条件控制语句){
        循环体;
    }

增强for循环

for(let 变量名 of 对象){
        需要执行的代码;
    }

索引for循环

for(let 变量 in 对象){
        需要执行的代码;
    }

代码演示

  <script type="text/javascript">
        // 定义数组
      let arr = ["张三","李四","王五"];
     
        console.log("<==================普通for循环==================>");
        // 普通for循环
        for (let i = 0 ; i < arr.length ; i++) {
            console.log(arr[i]);
        }
     
        console.log("<==================forof循环==================>");
        // for of循环
        for (let e of arr) {
            console.log(e);
        }
     
        console.log("<==================forin循环==================>");
        // for in循环
        for (let index in arr) {
            console.log(arr[index]);
        }
    </script>

forof 与 forin之间的区别

    1. forin可以遍历对象,forof不能遍历对象
    2. forin遍历出数组中的索引,forof遍历出数组中的元素

2.2、while循环

for一般用在某一个范围中循环
while一般用在一个确定范围中循环

for中的 var i = 1;这个只能在for循环中使用
while中的 var i = 1; 可以全局中使用

<script>
    //1 ~ 100 求和
     let sum = 0;
     let num = 1;
     while(num <= 100){
          sum += num;
          num++;
     }
     document.write(sum);
</script>

2.3、do...while循环

do...while循环就不再单独演示，跟java中的do...while循环用法是一致的！

 <script>
   //定义了一个变量
   let a = 1;
   do{
        //循环体，至少执行一次
        document.write(a)
        a++;
    }while(a <= 10);//循环判断条件
                
</script>

总结

普通for 与 java一样
        forin：遍历出数组的索引
               遍历出对象中的属性名key
        forof: 遍历数组中的元素

3、 JS函数

js函数是执行特定功能的代码块，也可以称为js方法。与java中的方法的功能是一样的。

function 函数名(参数列表){
        函数体;
        [return 返回值;]
    }

3.1、函数的第一种定义方式

 function demo(){
            let a = 3;
            let b = 4;
            alert(a+b);
        }
        //方法必须调用，不调用不执行
            demo();
    //-----------------------------------------------
                
        //有参无返回值的方法
        function demo2(a,b){
            alert(a+b);
        }
            demo2(4,6);
    //-----------------------------------------------
                
        //无参有返回值的方法
        function demo3(){
            return 4+4;
        }
            let sum = demo3();
            alert(sum);
    //-----------------------------------------------
                
        //有参有返回值的方法
            function demo4(a , b , c){
            return a+b+c;
        }
            let d =  demo4(2,3,4);
            alert(d);

3.2、函数的第二种定义方式

 <script>
    /*
       比较复杂，只需要了解，开发很少使用
    */
     var demo = new Function("a,b", "alert(a+b)");
     demo(4,4);
 </script>

3.3、函数的第三种定义方式

 <script>
        /* 匿名函数: 了解 */
        var demo  = function(){
            alert(77);
        }
                
        demo();
 </script>

3.4、绑定一个函数

 <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script>
                function demo(){
                    alert("点我干嘛？");
                }
            </script>
        </head>
        <body>
            
            <input type="button" value="点我哦" onclick="demo()" />
            
        </body>
    </html>

3.5、获取标签中的内容

 <script>
    function demo(){
        //获取p标签
        var pid = document.getElementById("pid");
                    
        //获取p标签中的内容
        // alert(pid.innerHTML);
                    
        //修改标签中的内容
        pid.innerHTML = "静相思";
                    
        /*
            1、拿到要获取内容的标签
            2、跟获取的标签，再【获取内容】对象名.innerHTML    
            【修改内容】对象名.innerHTML = "修改内容"
        */
                    
    }
 </script>
 </head>
 <body>
            
    <p id="pid">唐诗三百首</p>
            
    <!-- L0 绑定单击事件（一个动作） -->
    <button onclick="demo()">修改内容</button>
 </body>

3.6、函数总结

注意事项

• 方法定义时，形参的类型不用写,返回值类型可写可不写
• 如果定义名称相同的方法，会被覆盖，js中没有方法的重载的概念
• 在JS中，方法的调用只与方法的名称有关，和参数列表无关
• 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
• JS函数中也可以有匿名函数

匿名函数经常会跟事件进行结合着使用

 function(参数列表){
        函数体;
        [return 返回值;]
    }

4、正则表达式

RegExp对象，正则对象，正则表达式的书写规则和Java也一致：

    . 当前可以是任意字符
    ? 表示零次或一次
    * 表示零次或多次
    + 表示一次或多次

    () 对某个存在的正则进行分组   组的使用  \组号   $组号
    {} 当前的规则可以出现的次数  
    {2} 正好 2次  {m,} 最少m次  {m,n} 最少m次 最多n
    [] 当前位置上可以是中括号中某个字符
      [abc] [^abc] [a-zA-Z][0-9]

    \\d 当前位置上可以数字
    \\w 当前位置上可以是字母 数字 下划线
    \b 单词边界  hello world
    ^ 行开始
    $ 行结尾