zoukankan      html  css  js  c++  java
  • JavaScript -- 注意点

    赋值运算符应用错误

    在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。

    比较运算符常见错误

    在严格的比较运算中,=== 为恒等计算符,同时检查表达式的值与类型。

    在 switch 语句中出现,switch 语句会使用恒等计算符(===)进行比较。

    加法与连接注意事项

    加法是两个数字相加。

    连接是两个字符串连接。

    JavaScript 的加法和连接都使用 + 运算符。

    浮点型数据使用注意事项

    JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

    所有的编程语言,包括 JavaScript,对浮点型数据的精确度都很难确定:

    用如下方式进行问题的解决:

    var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

    JavaScript 字符串分行

    JavaScript 允许我们在字符串中使用断行语句,但是,在字符串中直接使用回车换行是会报错的,字符串断行需要使用反斜杠()。

    错误的使用分号

    if (x == 231);
    {
        // code block  
    }

    Return 语句使用注意事项

    JavaScript 默认是在代码的最后一行自动结束。

    数组中使用名字来索引

    许多程序语言都允许使用名字来作为数组的索引。

    使用名字来作为索引的数组称为关联数组(或哈希)。

    JavaScript 不支持使用名字来索引数组,只允许使用数字索引

    定义数组元素,最后不能添加逗号

    错误例子:

    points = [40, 100, 1, 5, 25, 10,];

    定义对象,最后不能添加逗号

    错误例子:

    websites = {site:"菜鸟教程", url:"www.runoob.com", like:460,}

    Undefined 不是 Null

    在 JavaScript 中, null 用于对象, undefined 用于变量,属性和方法。

    对象只有被定义才有可能为 null,否则为 undefined。

    如果我们想测试对象是否存在,在对象还没定义时将会抛出一个错误。

    错误的使用方式:

    if (myObj !== null && typeof myObj !== "undefined")

    正确的方式是我们需要先使用 typeof 来检测对象是否已定义:

    if (typeof myObj !== "undefined" && myObj !== null)

    程序块作用域

    在每个代码块中 JavaScript 不会创建一个新的作用域,一般各个代码块的作用域都是全局的。

    以下代码的的变量 i 返回 10,而不是 undefined。

    举个例子:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title>菜鸟教程(runoob.com)</title>
        </head>
    
        <body>
    
            <button onclick="identicalComputingOperatorMistake()">恒等计算符误区</button>
            <br/>
            <button onclick="addMistake()">加法与连接误区</button>
            <p id="demo"></p>
            <p id="demo1"></p>
            <br/>
            <button onclick="floatMistake()">浮点型数据使用误区</button>
            <p id="demo2"></p>
            <p id="demo3"></p>
            <button onclick="stringMistake()">字符串分行使用误区</button>
            <p id="demo4"></p>
            <button onclick="returnRight()">Return 语句正确使用</button>
            <p id="demo5"></p>
            <button onclick="returnMistake()">Return 语句错误使用</button>
            <p id="demo6"></p>
            <button onclick="arrayRight()">Return 语句正确使用</button>
            <p id="demo7"></p>
            <button onclick="arrayMistake()">Return 语句错误使用</button>
            <p id="demo8"></p>
            <button onclick="scope()">程序块作用域</button>
            <p id="demo9"></p>
            <script>
                // switch 语句会使用恒等计算符(===)进行比较
                // === 为恒等计算符,同时检查表达式的值与类型
                function identicalComputingOperatorMistake() {
                    var x = 10;
                    switch (x) {
                        case 10:
                            alert("hello world");
                            break;
                        default:
                            alert("default content");
                            break;
                    }
                }
    
                function addMistake() {
                    var x = 10;
                    var y = 5;
                    var z = x + y; // z 的结果为 15
                    document.getElementById("demo").innerHTML = z;
                    var x = 10;
                    var y = "5";
                    var z = x + y; // z 的结果为 "105"
                    document.getElementById("demo1").innerHTML = z;
                }
    
                function floatMistake() {
                    var x = 0.1;
                    var y = 0.2;
                    var z = x + y;
                    var a = (x * 10 + y * 10) / 10;
                    document.getElementById("demo2").innerHTML = z;
                    document.getElementById("demo3").innerHTML = a;
                }
    
                function stringMistake() {
                    var x = "Hello 
                    World!";
                    document.getElementById("demo4").innerHTML = x;
                }
                //return 正确用法
                function returnRight() {
                    function myFunction(a) {
                        var power = 10;
                        return power;
                    }
                    document.getElementById("demo5").innerHTML = myFunction(55);
                }
                //return 错误用法
                function returnMistake() {
                    function myFunction(a) {
                        var power = 10;
                        return
                        power;
                    }
                    document.getElementById("demo6").innerHTML = myFunction(55);
                }
    
                function arrayRight() {
                    var person = [];
                    person[0] = "John";
                    person[1] = "Doe";
                    person[2] = 46;
                    var x = person.length; // person.length 返回 3
                    var y = person[0]; // person[0] 返回 "John"
                    document.getElementById("demo7").innerHTML = "x = " + x + "y = " + y;
                }
    
                function arrayMistake() {
                    var person = [];
                    person["firstName"] = "John";
                    person["lastName"] = "Doe";
                    person["age"] = 46;
                    var x = person.length; // person.length 返回 0
                    var y = person[0]; // person[0] 返回 undefined
                    document.getElementById("demo8").innerHTML = "x = " + x + "y = " + y;
                }
                
                /**
                 * 在每个代码块中 JavaScript 不会创建一个新的作用域,一般各个代码块的作用域都是全局的。
                以下代码的的变量 i 返回 10,而不是 undefined
                 */
                function scope() {
                    for (var i = 0; i < 10; i++) {
                        // some code
                    }
                    document.getElementById("demo9").innerHTML = i;
                }
            </script>
    
        </body>
    
    </html>




  • 相关阅读:
    Android开发环境搭建
    Noi 2016
    [二分图&最小割]
    [BZOJ 3145][Feyat cup 1.5]Str 解题报告
    [动态图]
    [组合数取模][中国剩余定理]
    [BZOJ 4436][Cerc2015]Kernel Knights
    [NOI 2014]做题记录
    [线段树合并]
    [树套树模板]
  • 原文地址:https://www.cnblogs.com/androidsuperman/p/6873477.html
Copyright © 2011-2022 走看看