JavaScript学习二

变量提升问题

代码示例：

<script>
        // 局部变量和全局变量的覆盖问题,变量提升问题
        var scope = "全局变量";
        function test(){
            document.writeln(scope + "<br>");
            var scope = "局部变量";
            document.writeln(scope + "<br>");
        }
        test();

    </script>

效果图示：

虽然scope在函数体是在中间定义的，但是JavaScript会在函数体开始执行的时候就把变量的定义部分执行完毕，但是不会执行赋值，所以全局变量scope被覆盖，但是没有被赋值，所以第一个输出是undefined。

let定义变量

let有块作用域，而且也不会提前装载，也不会变成window对象的属性

基本数据类型

字符串类型

代码示例：

    
    <script>
        var a="abc中国";
        var b=a.length;
        var c = String.fromCharCode(97,98,99);
        alert(b+"---"+a.charAt(4) + "---" +a.charCodeAt(4) + "---" +c)
    </script>

效果图示：

代码示例

 <script>
        // indexOf()方法
        var a ="hellojavascript";
        var b =a.indexOf("llo");
        var c =a.indexOf("llo",3);
        var d =a.lastIndexOf("a");
        alert(b+"\n"+c+'\n'+d)
    </script>

<script>
        // 字符串截取
        var s ="abcdefg";
        a=s.slice(0,4);
        b=s.slice(2,4);
        c=s.slice(4);
        d=s.slice(3,-1);
        e=s.slice(3,-2);
        f=s.slice(-3,-1);
        alert("a:"+a+'\n'+"b:"+b+'\n'+"c:"+c+'\n'+"d:"+d+'\n'+"e:"+e+'\n'+"f:"+f+'\n');
    </script>

正则表达式

代码示例

<!-- <script>
        // 正则表达式
        var s ="abfd--abc@d.comcdefg";
        a=s.search(/[a-z]+@d.[a-zA-Z]{2}m/);
        var str = "1dfd2dfs3df5";
        var b =str.match(/\d/g);
        alert(a+"\n"+b);
    </script> -->

复合类型

代码示例

<script>
        //堆栈操作
        //push是从数组尾部插元素，pop从后面弹出一个元素
        //unshift从头部插入元素，shift从前面弹出元素
        var stack = [];
        stack.push("孙悟空");
        stack.push("猪八戒");
        stack.push("白骨精");
        console.log(stack.pop());
        console.log(stack.pop());
        var queue=[];

        queue.unshift("王XX");
        queue.unshift("你真帅");
        queue.unshift("想屁吃");
        console.log(queue.shift());
        console.log(queue.shift());
        console.log(queue.shift());
    </script>

数组其他方法

代码示例：

<script>
        // 数组函数
        var a =["html",2,"yeeku"];
        document.writeln(a.concat(4,5));
        document.writeln("<br>"+a.concat([4,5]));
        document.writeln("<br>"+a.concat([4,5],[6,7]));
        var b =["html",20,"is",99,"good"];
        document.writeln("<br>"+b.join());
        document.writeln("<br>"+b.join("+"));
        var c =["html","css","jquery","bootstrap"];
        c.reverse();
        document.writeln("<br>"+c);
        var d=["yeeku","leegang","crazyit","fkit","charlie"];
        document.writeln("<br>"+d.slice(3));
        document.writeln("<br>"+d.slice(2,4));
        document.writeln("<br>"+d.slice(1,-2));
       document.writeln("<br>"+d.slice(-3,-2));
        var e=["yeeku","leegang","crazyit","fkit","charlie"];
        document.writeln("<br>"+e.splice(3));
       document.writeln("<br>"+e.splice(1,1));
        document.writeln("<br>"+e.splice(0,1,20,30,40));
        document.writeln("<br>"+e);
    </script>

图示：

位运算符

代码示例：

<script>
        //抛出错误
        for (let i = 0; i < 10; i++) {
            document.writeln(i+'<br>');
            if(i>4){
                throw new Error('用户自定义错误！');
            }
        }
    </script>

for循环

代码示例：

<script>
        //for的两种遍历方法
        var a =['a','b','c','d'];
        for (let index = 0; index < a.length; index++) {
            document.writeln(a[index]+'<br>');
        }
        for ( key in a) {
            document.writeln('索引'+key+'的值是：'+a[key]+'<br>');
        }
    </script>

代码示例：

<script>
        //for in
        document.writeln("<h1>navigator对象的全部属性如下：</h1>");
        for (propName in navigator) {
            document.writeln('属性'+propName+'的值是：'+navigator[propName]+'<br>');
        }
        document.writeln("<hr>");
        for (propName in navigator) {
            document.writeln('属性'+propName+'的值是：'+navigator.propName+'<br>');
        }
    </script>

如果用点来取值的话都是undefined，因为propName 并不是对象的属性，所以用点获取不到

break outer和continue outer

代码示例：
原代码：

<script>
        document.writeln('break效果：<br>');
        for (let i = 0; i < 5; i++) {
            for (let j = 0; j < 5; j++) {
                document.writeln('j的值为：'+j+" ");
                
            }
            if(i>=2) break;
            document.writeln("i的值为："+i+' ');
            document.writeln('<br>');
        }
        document.writeln('<br>continue效果：<br>');
        for (let i = 0; i < 5; i++) {
            for (let j = 0; j < 5; j++) {
                document.writeln('j的值为：'+j)+" ";
                
            }
            if(i>=2) continue;
            document.writeln("i的值为："+i+" ");
            document.writeln('<br>');
        }
    </script>

加了outer：

<script>
        document.writeln('break效果：<br>');
        outer:
        for (let i = 0; i < 5; i++) {
            for (let j = 0; j < 5; j++) {
                document.writeln('j的值为：'+j+" ");
                document.writeln("i的值为："+i+' ');
                
                document.writeln('<br>');
                if(i>=2) break outer;
            }
            
        }
        document.writeln('<br>continue效果：<br>');
        outer:
        for (let i = 0; i < 5; i++) {
            for (let j = 0; j < 5; j++) {
                document.writeln('j的值为：'+j+" ");
                document.writeln("i的值为："+i+" ");
                document.writeln('<br>');
                if(i>=2) continue outer;
            }
           
        }
    </script>