走進 JAVASCRIPT 黑洞，涵蓋 es5 / es6 / es7 / es8 知識點-有解無憂

讓程式跑起來與避免延遲：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!-- <script src="https://www.cnblogs.com/chenyingying0/archive/2020/11/13/1.js"></script> -->
</head>
<body>
  CYY

  <!-- 建議把js寫在檔案內容結束的地方，避免影響DOM的渲染 -->
  <script src="1.js"></script>
</body>
</html>

變數宣告基礎知識：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!-- <script src="https://www.cnblogs.com/chenyingying0/archive/2020/11/13/1.js"></script> -->
</head>
<body>
  CYY

  <script>
    //   一次定義多個變數
//    var a = 1, b = 2, c = 3;

//    var a = b = c = 4;

//    var name = 99;
//    console.log(name);
   console.log(window.name);

//    var a = 1;
//    console.log(a);
   console.log(window.a);

   console.log(window);

//    弱型別語言
   var web = 'cyy';
   console.log(typeof web);
   web = 99;
   console.log(typeof web);
   web = {};
   console.log(typeof web);
  </script>
</body>
</html>

體驗決議程序與變數提升：

把變數的宣告提前（var）

這是屬于js不好的地方，因此我們推薦使用let和const來宣告變數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
<body>

  <script>
    // 沒有列印出a，而是直接報錯
    // 說明在執行代碼之前，js已經先分析一遍了 
//    var a = 1;
//    console.log(a);
//    var class = 2;
//    console.log(class);

    // 先提升處理 var a;
    // 然后console.log(a);
    // 然后賦值a = 1;
    // console.log(a);
    // var a = 1;

    // function hd(){
    //     if(false){
    //         var a = 1;
    //     }
    //     console.log(a);
    // }
    // hd();
    // 以上代碼相當于
    function hd(){
        var a; // 變數提升
        if(false){
            a = 1;
        }
        console.log(a);
    }
    hd();



  </script>
</body>
</html>

let&const 暫時性死區TDC：

使用let的話，必須先宣告再使用，不存在變數提升；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <script>
        // console.log(a);
        // var a = 1;

        // console.log(b);
        // let b = 1;

        // console.log(c);
        // const c = 1;

        // 如果函式內部沒有定義a，則會去函式外部找
        // let a = 1;
        // function func(){
        //     console.log(a);
        // }
        // func();

        // let a = 1;
        // function func(){
        //     // 如果函式內部宣告了a，則必須先宣告，再使用，否則報錯
        //     console.log(a);
        //     let a = 2;
        // }
        // func();

        function func2(a=b,b=3){}
        func2();

        function func2(a=3,b=a){}
        func2();
    </script>
</body>
</html>

var-let-const的共同點：

函式中可以訪問到外部全域的變數

函式內部如果找不到變數，會順著作用域鏈向外查找，直到null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <script>
        // 函式內部如果找不到變數，會順著作用域鏈向外查找，直到null
        // var a = 1;
        // function func(){
        //     console.log(a);
        // }
        // func();
        // console.log(a);

        // let a2 = 1;
        // function func2(){
        //     console.log(a2);
        // }
        // func2();
        // console.log(a2);

        // const a3 = 1;
        // function func3(){
        //     console.log(a3);
        // }
        // func3();
        // console.log(a3);

////////////////////////////////////////////////////////

        // var a = 1;
        // function func(){
        //     var a = 3;
        //     // 此時列印函式內部的變數a，與函式外部的變數a無關
        //     console.log(a);
        // }
        // func();
        // console.log(a);

        // var a = 1;
        // function func(){
        //     a = 3;
        //     // 此時修改的是函式外部的變數a，因為函式內部并沒有宣告變數a
        //     console.log(a);
        // }
        // func();
        // console.log(a);

////////////////////////////////////////////////////////

        // let a = 1;
        // function func(){
        //     let a = 3;
        //     // 此時列印函式內部的變數a，與函式外部的變數a無關
        //     console.log(a);
        // }
        // func();
        // console.log(a);

        // let a = 1;
        // function func(){
        //     a = 3;
        //     // 此時修改的是函式外部的變數a，因為函式內部并沒有宣告變數a
        //     console.log(a);
        // }
        // func();
        // console.log(a);

////////////////////////////////////////////////////////

        const a = 1;
        function func(){
            const a = 3;
            // 此時列印函式內部的變數a，與函式外部的變數a無關
            console.log(a);
        }
        func();
        console.log(a);

        const a = 1;
        function func(){
            a = 3;
            // 此時修改的是函式外部的變數a，因為函式內部并沒有宣告變數a
            console.log(a);
        }
        func();
        console.log(a);
    </script>
</body>
</html>

可怕的全域污染：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <script>
        // 不使用var宣告也可以使用變數
        // web = 'cyy';
        // console.log(web);

        // 污染全域，全域也可以訪問到函式內部的變數
        // function func(){
        //     a = 1;
        // }
        // func();
        // console.log(a);

        // 嚴格模式可以解決不使用var宣告造成的全域污染問題
        "use strict";
        function func(){
            a = 1;
        }
        func();
        console.log(a);
    </script>
</body>
</html>

塊級作用域這個先進的特性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <script>
        // var沒有塊級作用域，直接是全域作用域，因此回圈結束后影響到了全域的變數
        // var i = 99;
        // for(var i=0;i<5;i++){
        //     console.log(i);
        // }
        // console.log(i);

        // es6存在塊級作用域，使用let不會影響到全域作用域
        // let i = 99;
        // for(let i=0;i<5;i++){
        //     console.log(i);
        // }
        // console.log(i);
    </script>
</body>
</html>

避免污染全域的js方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <script>
        var web = 2;
    </script>

    <script src="script.js"></script>

    <script>
        // console.log(web);
        // console.log(url);
        console.log($.getUrl());
    </script>
</body>
</html>

script.js

(function(){
    var $ = window.$ = {};
    $.web = 1;
    var url = 'abc';
    $.getUrl = function(){
        return url;
    }
}.bind(window)());

使用es6塊級作用域避免全域污染：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <script>
        var web = 2;
    </script>

    <script src="https://www.cnblogs.com/chenyingying0/archive/2020/11/13/script.js"></script>

    <script>
        // console.log(url);
        console.log(url2);

        // var 沒有塊級作用域
        // {
        //     var a = 1;
        // }
        // console.log(a);

        // let有塊級作用域
        // {
        //     let a = 1;
        // }
        // console.log(a);
    </script>
</body>
</html>

script.js

// 使用花括號給插件中的變數一個塊級作用域
{
    let url = 'abc';
    var url2 = 'xxx';
}

const常量宣告：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <!-- <script src="https://www.cnblogs.com/chenyingying0/archive/2020/11/13/script.js"></script> -->

    <script>
        // const定義常量，不可更改；為了便于區分，一般使用大寫
        // const WEB = 'baidu.com';
        // WEB = '111';

        // let是可以更改的，用于變數的宣告定義
        // let WEB = 'baidu.com';
        // WEB = '111';

        // 常量的范圍受限于作用域，不同作用域可以出現同名的常量
        // const a = 1;
        // function func(){
        //     const a = 2;
        // }
        // func();

        // 如果常量是參考型別，則可以更改
        // const CONFIG = {};
        // CONFIG.a = 1;
        // CONFIG.a = 2;
        // console.log(CONFIG.a);

        // 塊級作用域
        const a = 1;
        {
            const a = 2;
            console.log(a);
        }
        console.log(a);
    </script>
</body>
</html>

window全域物件污染與重復宣告：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <!-- <script src="https://www.cnblogs.com/chenyingying0/archive/2020/11/13/script.js"></script> -->

    <script>
        // 使用var宣告的變數實際上是掛載到window物件上的
        // var a = 1;
        // console.log(window.a);

        // console.log(window);

        // 使用let宣告的變數不會作為window的屬性
        // let a = 1;
        // console.log(window.a);

        // let screenLeft = 88;
        // console.log(screenLeft);
        // console.log(window.screenLeft);

        // var 存在重復宣告的問題，let和const不會
        // var a = 1;
        // var a = 2;
        // console.log(a);

        // let a = 1;
        // let a = 2;
        // console.log(a);

        // 不同的作用域沒有關系
        let a = 1;
        function func(){
            let a = 2;
        }
    </script>
</body>
</html>

Object.freeze 凍結變數：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <!-- <script src="https://www.cnblogs.com/chenyingying0/archive/2020/11/13/script.js"></script> -->

    <script>
        const HOST = {
            url:'https://www.baidu.com/api/v1',
            port:443
        };
        HOST.port = 80;
        console.log(HOST);

        // 使用Object.freeze凍結之后，修改無效
        Object.freeze(HOST);
        HOST.port = 8080;
        console.log(HOST);


    </script>
</body>
</html>

標量與參考型別的傳值與傳址特性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <!-- <script src="https://www.cnblogs.com/chenyingying0/archive/2020/11/13/script.js"></script> -->

    <script>
        // 傳值，把a復制一份，給了b
        // let a = 1;
        // let b = a;
        // b = 3;
        // console.log(a,b);

        // 傳址，a和b共用一個地址
        // let a = {name:'cyy'};
        // let b = a;
        // b.name = 'haha';
        // console.log(a,b);

    </script>
</body>
</html>

null與undefined詳解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <!-- <script src="https://www.cnblogs.com/chenyingying0/archive/2020/11/13/script.js"></script> -->

    <script>
        // 一般來說，保存一個變數，可以使用undefined
        // 保存一個參考型別，可以使用null
        // 但是通常也會參考型別直接定義成空物件
        // 變數直接定義成0或者空字串
        // let a = null;
        // let b = undefined;

        // let a = {};
        // let b = '';

        // 如果函式沒有回傳值，就會回傳undefined
        // function func(){}
        // console.log(func());

        // 使用一個宣告了還沒有賦值的變數，結果是undefined
        // 使用一個沒有宣告的變數，會報錯
        // let a;
        // console.log(a);
        // console.log(b);

        // function star(num){
        //     num = num || 5; 
        //     // if(num == undefined){
        //     //     num = 5; 
        //     // }

        //     for(let i=0;i<num;i++){
        //         document.write('*');
        //     }
        // }
        // star(10);
        // document.write('<hr/>');
        // star();

        function star(num=5){
            for(let i=0;i<num;i++){
                document.write('*');
            }
        }
        star(10);
        document.write('<hr/>');
        star();
    </script>
</body>
</html>

use strict 嚴格模式，高質量代碼守衛：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <!-- <script src="https://www.cnblogs.com/chenyingying0/archive/2020/11/13/script.js"></script> -->

    <script>
        // 'use strict';
        // a = 1;
        // console.log(a);

        // a = 1;
        // function func(){
        //     a = 2;
        // }
        // func();
        // console.log(a);

        // 會警告關鍵詞不能使用
        // var public = 1;
        // console.log(public);

        // 嚴格模式的作用域是從當前作用域向下來進行查找
        // 此時報錯的是被呼叫的函式
        // 'use strict';
        //     function func1(){
        //         a = 1;
        //     }
        //     func1();

        //     function func2(){
        //         b = 1;
        //     }
        //     func2();

        //    此時報錯的是被呼叫的，且有定義嚴格模式的函式
        //     function func1(){
        //         a = 1;
        //     }
        //     func1();

        //     function func2(){
        //         'use strict';
        //         b = 1;
        //     }
        //     func2();

        // 解構賦值
        // let {a,b} = {a:1,b:2};
        // console.log(a,b);

        'use strict';
        ({a,b} = {a:1,b:2});
        console.log(a,b);
    </script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/214426.html

標籤：其他

上一篇：小程式map學習:使用map獲取當前位置并顯示出來

下一篇：走進 JAVASCRIPT 黑洞，涵蓋 es5 / es6 / es7 / es8 知識點