麻将牌斗牛怎么做手脚

書名： Node.js應用開發
作者名：唐小燕劉洪武主編
本章字數： 614字
更新時間： 2025-02-08 17:20:23

1.4.2 項目實訓——Console控制臺的使用

視頻4

1．實驗需求

調用console控制臺的一系列方法實現以下輸出。

（1）輸出信息。

（2）調試輸出。

（3）輸出對象的層次結構。

（4）輸出數據表格化。

（5）統計代碼執行時間。

（6）分組輸出信息。

（7）統計代碼執行的次數。

（8）當表達式為false時，輸出信息。

（9）用來追蹤函數的調用軌跡。

（10）清除控制臺所有內容。

2．實驗步驟

<!DOCTYPE html>
<html lang=＂zh＂>
    <head>
        <meta charset=＂UTF-8＂>
        <meta name=＂viewport＂ content=＂width=device-width, initial-scale=1.0＂>
        <meta http-equiv=＂X-UA-Compatible＂ content=＂ie=edge＂>
        <title>console的使用</title>
    </head>
    <body>
        <script>
            // 問題1：輸出信息
            console.log(＇Web前端開發＇);// 輸出普通信息
            console.info(＇Web前端開發＇);// 輸出提示信息 (在lE上有區分)
            console.error(＇Web前端開發＇);// 輸出錯誤信息
            console.warn(＇Web前端開發＇);// 輸出警示信息
            // 問題2：調試輸出
            /*此函數作用與 console.log 作用相同，均為調試輸出。目前谷歌瀏覽器和Opera不支持console.debug()，在控制臺中看不到效果。可在lE瀏覽器中看到效果
            */
            console.debug(＂這是一行文字＂);
            // 問題3：輸出對象的層次結構
            /*
            此函數作用與console.log作用效果相同，但是打開節點時，兩者之間存在差異。在觀察節點時，dir的效果要明顯好于log的
              */
            var oBody = document.body;
            console.dir(oBody)
            // 問題4：輸出數據表格化
            var students = [{
                    name: ＇張三＇,
                    email: ＇zhangsan@163.com＇,
                    qq: 12345
                },
                {
                    name: ＇李四＇,
                    email: ＇lisi@126.com＇,
                    qq: 12346
                },
                {
                    name: ＇王五＇,
                    email: ＇wangwu@sina.com＇,
                    qq: 12347
                },
                {
                    name: ＇趙六＇,
                    email: ＇zhaoliu@gmail.com＇,
                    qq: 12348
                }
            ];
            console.table(students);
            let person = {
                name: ＇Harrison＇,
                age: 20,
                say() {
                    console.log(this.name + ＇很帥！＇);
                }
            }
            console.table(person);
            // 問題5：統計代碼執行時間
            console.time(＇統計for循環總循環時間＇);
            for (var i = 0, count = 0; i < 99999; i++) {
                count++;
            }
            console.timeEnd(＇統計for循環總循環時間＇);
            console.time(＇統計while循環總循環時間＇);
            var i = 0, count = 0;
            while (i < 99999) {
                count++;
                i++;
            }
            console.timeEnd(＇統計while循環總循環時間＇);
            // 問題6：分組輸出信息
            console.group(＇前端1組＇);
            console.log(＇前端1組-1＇);
            console.log(＇前端1組-2＇);
            console.log(＇前端1組-3＇);
            console.groupEnd();
            console.group(＇Java2組＇);
            console.log(＇Java2-1＇);
            console.log(＇Java2-2＇);
            console.log(＇Java2-3＇);
            console.groupEnd();
            // 問題7：統計代碼執行的次數
            function testFn() {
                console.count(＇當前函數被調用的次數＇);
            }
            testFn();
            testFn();
            testFn();
            for (i = 0; i < 5; i++) {
                console.count(＇for循環執行次數＇);
            }
            // 問題8：當表達式為false時，輸出信息
            var flag = false;
            console.assert(flag, ＇當flag為false時才輸出！＇);
            // 問題9：用來追蹤函數的調用軌跡
            var x = fn3(1, 1);
            function fn3(a, b) {
                return fn2(a, b);
            }
            function fn2(a, b) {
                return fn1(a, b);
            }
            function fn1(a, b) {
                return fn(a, b);
            }
            function fn(a, b) {
                console.trace();// 運行后，會顯示fn()的調用軌跡
                return a + b;
            }
            // 問題10：清除控制臺所有內容
            // console.clear()
        </script>
    </body>
</html>

在控制臺輸出結果如圖1-31所示。

圖1-31 Console輸出結果

【代碼分析】

打開Chrome瀏覽器，按<F12>鍵，在控制臺查看運行結果。代碼中使用Console的不同方法輸出不同的內容，注意輸出內容的顏色及代表的含義。

官术网_书友最值得收藏!

Node.js應用開發

1.4.2 項目實訓——Console控制臺的使用