JavaScript语句和声明-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript语句和声明。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. debugger

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1. debugger 语句调用任何可用的调试功能，例如设置断点;
          如果没有调试功能可用，则此语句不起作用; 
        2. 如下代码所示: 程序运行时将自动断点停止在debugger关键字处; 
     -->
</head>
<body>
    <script>
        function test(num) { 
            let sum = 0;
            for(let i = 0;i < 10; i++) {
                sum += i; 
            }
            if(num === 3) {
                debugger; 
            }
            console.log('please wait...');
         }
         test(3);
    </script>
</body>
</html>

2. empty

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1. 空语句用来表明没有语句，尽管 JavaScript 语法希望有语句; 
        2. ```空语句是一个分号（;），表示不会执行任何语句```，即使 JavaScript 语法需要一个语句; 
        3. 
     -->
</head>

<body>
    <script>
        /*
            1. 空语句有时与循环语句一起使用。以下示例使用空循环体;
        */
        let array = [1, 2, 3];
        for (let i = 0; i < array.length; array[i++] = 0);
        console.log(array); //  [0, 0, 0]
    </script>


    <script>
        /*
            2. 另一个例子：if...else 语句不带花括号（{}）; 
                if(one) {
                    ...
                } else if(two) {
                    ... 
                } else if(three)        // 当three为true时, 什么也不会发生, 因为此时的执行体为空
                    ; 
                 else if(four) {
                     ...
                 }
                  else {
                      ...
                  }
        */
        let num = 8;
        if (num == 4) {
            console.log('***> ' + num + '');
        } else if (num == 5) {
            console.log('***> ' + num + '');
        } else if (num == 6)
        ;
        else if (num == 7) {
            console.log('***> ' + num + 7);
        } else {
            console.log('***> ' + 'other');
        }
    </script>
</body>

</html>

3. for…in…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1. 遍历一个对象的除Symbol以外的可枚举属性; 
        2. 格式：
            for(prop in object)
                ... ...
            prop：每次迭代时, prop会被赋值为不同的属性名; 
            object: 被迭代的对象; 
     -->
     <!-- 
         3. 为什么用for ... in?
            for ... in是为遍历对象属性而构建的，```不建议与数组一起使用```，
            数组可以用Array.prototype.forEach()和for ... of，那么for ... in的到底有什么用呢？
            ``````它最常用的地方应该是用于调试``````，可以更方便的去检查对象属性（通过输出到控制台或其他方式）。
            尽管对于处理存储数据，数组更实用些，但是你在处理有key-value数据（比如属性用作“键”），
            ``````需要检查其中的任何键是否为某值的情况时，还是推荐用for ... in``````。
      -->
</head>
<body>
    <script>
        var obj = {
            num: 101,
            name: 'XingWei',
            test() {
                console.log('HelloWorld');
            }
        };
        for(let prop in obj ) {
            console.log(prop + '  ' + obj[prop]);
        }
    </script>
</body>
</html>

4. for…of…

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1. for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，
          调用自定义迭代钩子，并为每个不同属性的值执行语句; 
        2. 格式：
            for(let variable of object)
                ... ...
            variable: 属性值; 
            object:   被迭代的对象; 
        3. 迭代自定义对象需要自己实现Symbol.iterator属性接口; 
     -->
</head>

<body>
    <script>
        /* 1. 迭代Array */
        let iterable = [1, 2, 3, 4];
        for (let value of iterable) {
            value += 10;
            console.log(value);
        }

        /* 2. 迭代String */
        let str = "Hello";
        for (let value of str) {
            console.log(value);
        }

        /* 3. 迭代map */
        let map = new Map([
            ['a', 1],
            ['b', 2],
            ['c', 3]
        ]);
        for (let entry of map) {
            console.log(entry);
        }
        for (let [key, value] of map) {
            console.log(key + '<->' + value);
        }

        /* 4. 迭代arguments对象 */
        (function () {
            for (let argument of arguments) {
                console.log(argument);
            }
        })(1, 2, 3)
    </script>


    <script>
        const person = {
            name: 'XingWei',
            hobby: [
                'tv',
                'sing',
                'study',
                'ping-pong'
            ],
            [Symbol.iterator]: function () {
                let _this = this;
                let index = 0;
                return {
                    next: function () {
                        return index < _this.hobby.length ? {
                            value: _this.hobby[index++],
                            done: false
                        } : {
                            value: undefined,
                            done: true
                        }
                    }
                }
            }
        };
        for (let item of person) {
            console.log(item);
        }
    </script>
</body>

</html>

5. label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1. 标记语句可以和break 或 continue语句一起使用。```标记就是在一条语句前面加个可以引用的标识符```; 
        2. ```使用标记的循环或语句块非常罕见(类似于C中的goto语句)```。通常情况下，可以使用函数调用而不是（基于标记的）循环跳转; 
        3. 语法：
            label:
                statement
            a. label:       任何不属于保留关键字的 JavaScript 标识符; 
            b. statement:   JavaScript语句。break可用于任何标记语句，而continue可用于循环标记语句; 
        4. 可使用一个标签来唯一标记一个循环，然后使用 break 或 continue 语句来指示程序是否中断循环或继续执行; 
            需要注意的是，JavaScript没有goto语句，```标记只能和break或continue一起使用```; 
     -->
</head>

<body>
    <script>
        /* 
            1. 在for循环中使用带标记的 continue 语句; 
                let i, j ;
                XingWei1:
                for(let i = 0;i < 3; i++) {
                    XingWei2:
                    for(let j = 0;j < 3; j++) {
                        if(i === 1 && j === 1) {
                            continue XingWei1;
                        }
                        console.log('i = ' + i + ', j = ' + j);
                    }
                } 
                // Output is:
                   "i = 0, j = 0"
                   "i = 0, j = 1"
                   "i = 0, j = 2"
                   "i = 1, j = 0"
                   "i = 2, j = 0"
                   "i = 2, j = 1"
                   "i = 2, j = 2"
                 Notice how it skips both "i = 1, j = 1" and "i = 1, j = 2"
        */
    </script>

    <script>
        /* 
            2. 在for循环中使用带标记的 break; 
                let i, j ;
                XingWei1:
                for(let i = 0;i < 3; i++) {
                    XingWei2:
                    for(let j = 0;j < 3; j++) {
                        if(i === 1 && j === 1) {
                            break XingWei1; 
                        }
                        console.log('i = ' + i + ', j = ' + j);
                    }
                } 
                // Output is:
                   "i = 0, j = 0"
                   "i = 0, j = 1"
                   "i = 0, j = 2"
                   "i = 1, j = 0"
                 Notice how it skips both "i = 1, j = 1" and "i = 1, j = 2"
                 这个XingWei1标签下的语句是外层整个for循环, 现在直接break XingWei1,
                 好比是直接终止了整个标签语句, 也即是结束了整个外层for循环; 
        */
    </script>

    <script>
        /*
            3. 在```标记块```中使用break;
                XingWei: {
                    console.log('Hello');
                    break XingWei;
                    console.log('this will not be executed!');
                }
                console.log('world'); 
                // Hello 
                // world
        */
    </script>

    <script>
        /*
            4. 标记函数：
                XingWei:  function test() { ... } 
                (1) 在严格模式中, 将会抛出错误SyntaxError; 
                (2) 无论是否处于严格模式下, 生成器函数都不能被标记; 
                    XingWei: function* test() { ... }
        */
    </script>
</body>
</html>

6. throw

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1. throw语句用来抛出一个用户自定义的异常; 
          当前函数的执行将被停止（```throw之后的语句将不会执行```）;
          并且控制将被传递到调用堆栈中的第一个catch块; 
          ```如果调用者函数中没有catch块，程序将会终止```; 
     -->
</head>
<body>
    <script>
        function sum(num1, num2) {
            if(isNaN(num1) || isNaN(num2)) {
                throw 'Parameter is not a number!'; 
            }
        }
        sum(1, 's'); 
        try {
            sum(1, 'S');
        } catch(e) {
            console.error(e);     // Parameter is not a number!
        }
    </script>
</body>
</html>

7. try…catch…

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1. try...catch语句标记要尝试的语句块，并指定一个出现异常时抛出的响应; 
        2. try语句包含了由一个或者多个语句组成的try块, 
           和至少一个catch块或者一个finally块的其中一个，或者两个兼有，下面是三种形式的try声明： 
                a. try...catch; 
                b. try...finally; 
                c. try...catch...finally; 
            ```catch子句包含try块中 `抛出异常时要执行的语句` ```; 
            ```也就是,你想让try语句中的内容成功,但是如果没成功,你想控制接下来发生的事情,这时你可以在catch语句中实现```; 
            ```如果在try块中有任何一个语句（或者从try块中调用的函数）抛出异常,`控制立即转向catch子句` ```; 
            ```如果在try块中没有异常抛出，会跳过catch子句```;
            ```finally子句在try块和catch块之后执行但是在下一个try声明之前执行,无论是否有异常抛出或捕获它总是执行```;  
            ```你可以嵌套一个或者更多的try语句. `如果内部的try语句没有catch子句,那么将会进入包裹它的try语句的catch子句` ```; 
     -->
</head>


<body>
    <script>
        /*
            1. 无条件的catch块：当使用```单个无条件catch子句```时，抛出的任何异常时都会进入到catch块; 
               例如，当在下面的代码中发生异常时，控制转移到catch子句:
                    try {
                        throw 'error-exception'; 
                    } catch(e) {
                        console.log(e); 
                    }
                (1) catch块指定一个异常标识符e（在上面的示例中为e），该标识符保存由throw语句指定的值; 
                (2) catch块是唯一的，因为当输入catch块时，JavaScript会创建此标识符，并将其添加到当前作用域;
                (3) 异常标识符e仅在catch块执行时存在；catch块执行完成后，标识符不再可用; 
        */
    </script>


    <script>
        /*
            2. 条件catch块：你也可以用一个或者更多条件catch子句来处理特定的异常;
                在下面的代码中，try块的代码可能会抛出三种异常：TypeError，RangeError和EvalError; 
                当一个异常抛出时，控制将会进入与其对应的catch语句。如果这个异常不是特定的，那么控制将转移到无条件catch子句; 
                当用一个无条件catch子句和一个或多个条件语句时，无条件catch子句必须放在最后。否则当到达条件语句之前所有的异常将会被非条件语句拦截; 
                ```提醒```：这个功能不符合 ECMAscript 规范; 
                    try {
                        doSomething();          // may throw three types of exceptions
                    } catch(e if e instanceof TypeError) {
                        ... to handle TypeError exceptions 
                    } catch(e if e instanceof RangeError) {
                        ... to  handle TypeError exceptions
                    } catch(e if e instanceof EvalError) {
                        ... to handle EvalError exceptions
                    } catch(e) {
                        ... to handle any unspecified exceptions
                    }
        */
    </script>


    <script>
        /*
            3. finally块：finally块包含的语句在try块和catch之后; 
                请注意，无论是否抛出异常, finally子句都会执行; 
                此外，如果抛出异常，即使没有catch子句处理异常，finally子句中的语句也会执行; 
                openFile();
                try {
                    writeFile(); 
                } catch(e) {
                    handleError(e); 
                } finally {
                    closeFile(); 
                }
                 上面代码首先打开一个文件，然后在try代码块中写入文件，如果没有发生错误，则运行finally代码块关闭文件; 
                一旦发生错误，则先使用catch代码块处理错误，再使用finally代码块关闭文件; 
        */

        /*
                function cleanUp() {
                    try {
                        throw new Error('error... ...'); 
                        console.log('此行将不会执行'); 
                        console.log('都不会运行...'); 
                    } finally {
                        console.log('完成清理工作!'); 
                    }
                }
                cleanUp();         
                上面代码中，由于没有catch语句块，所以错误没有被捕获; 
                执行finally代码块以后，程序就中断在错误抛出的地方; 
                但是并不会影响整个函数外面的代码运行; 
        */
    </script>


    <script>
        /*
            4. 嵌套的try块：
                try {
                    try {
                        throw new Error('oops'); 
                    } finally {
                        console.log('finally'); 
                    } 
                } catch(e) {
                    console.log('outer', e.message); 
                }
                // 'finally'
                // 'outer' 'oops'
        */
    </script>


    <script>
        /*
            5. 从finally语句块返回：
                如果从finally块中返回一个值，那么这个值将会成为整个try-catch-finally的返回值; 
                无论是否有return语句在try和catch中。这包括在catch块里抛出的异常; 

                try {
                    try {
                        throw new Error('oops');
                    } catch(e) {
                        console.log('inner' + e.message); 
                        throw e;
                    } finally {
                        console.log('in finally');
                        return; 
                    }
                } catch(e) {
                    console.log(e); 
                }
                ```注```: 此try...catch 语句需要在 function 中运行才能作为函数的返回值, 否则直接运行会报语法错误; 
                    法1. 直接将最外层的try...catch整体直接包裹到一个函数之中, 然后调用函数; 
                                function test() {
                                    try {
                                        try {
                                            throw new Error('oops');
                                        } catch (e) {
                                            console.log('inner' + e.message);
                                            throw e;
                                        } finally {
                                            console.log('in finally');
                                            return;
                                        }
                                    } catch (e) {
                                        console.log(e);
                                    }
                                }
                                test();
                    法2. 将里层的try...catch...finally整体包裹到一个函数之中, 而后在外层的try块中调用该函数; 
                                function test() {
                                    try {
                                        throw new Error('oops');
                                    } catch(e) {
                                        console.log('inner' + '  ' + e.message); 
                                        throw e;
                                    } finally {
                                        console.log('in finally');
                                        return; 
                                    }
                                } 
                                try {
                                    test(); 
                                    } catch(e) {
                                    console.log(e); 
                                }
        */

        /*
             var count = 0; 
             function countUp() {
                 try {
                     return count; 
                 } finally {
                     count ++;
                 }
             }
             console.log(countUp());    //   0
             console.log(count);        //   1
            以上代码说明，虽然return语句的执行是排在finally代码之前，但是要等finally代码执行完毕后才返回; 
            同时说明，return语句的count的值，是在finally代码块运行之前就获取了; 
        */
    </script>

    <script>
        /*
            6. 触发转入finally代码块的标志:
                 ```进入catch代码块之后，一遇到throw语句 或者 return语句，就会去执行finally代码块```; 
        */
        function f() {
            try {
                throw 'errorString!';
            } catch (e) {
                console.log('***> ' + e);
                //    throw e;                          // 将立即执行finally中的语句块
                return true;                            // 将立即执行finally中的语句块
                console.log('...............');
            } finally {
                return 'xxxxxx';
            }
        }
        console.log(f());
    </script>
</body>

</html>

8. with

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1. 不建议使用with语句，因为它可能是混淆错误和兼容性问题的根源; 
        2.  with语句 扩展一个语句的作用域链; 
        3.  总之, with语句弊大于利, 不要使用它; 
        4. 作用：操作同一个对象的多个属性时，提供一些书写的方便; 
     -->
</head>

<body>
    <script>
        var obj = {
            'num': 101,
            'name': 'zhang',
            'age': 23
        };
        with(obj) {
            console.log(num); // 101
            console.log(name); // zhang
            console.log(age); // 23
        };


        /*
            1. 此处如若这样写，并不能改变值，
               可见，这个with最好是用来输出即可，而不要搞别的事！
        */
        var object = {
            pp1: 1,
            pp2: 2
        };
        with(object) {
            pp1: 3;
            pp2: 5;
        };
        console.log(object.pp1);    // 1
        console.log(object.pp2);    // 2
    </script>
</body>

</html>