JavaScript 最佳实践

软件技术NINI

于 2024-08-22 09:48:18 发布

阅读量417

点赞数 5

分类专栏： js 文章标签： javascript java 前端

本文链接：https://blog.csdn.net/2301_78133614/article/details/141418641

版权

js 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

请避免全局变量、new、===、eval()

避免全局变量

请尽量少地使用全局变量。

它包括所有的数据类型、对象和函数。

全局变量和函数可被其他脚本覆盖。

请使用局部变量替代，并学习如何使用闭包。

始终声明局部变量

所有在函数中使用的变量应该被声明为局部变量。

局部变量必须通过 var 关键词来声明，否则它们将变成全局变量。

严格模式不允许未声明的变量。

在顶部声明

一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。

这么做的好处是：

获得更整洁的代码
提供了查找局部变量的好位置
更容易避免不需要的全局变量
减少不需要的重新声明的可能性

// 在顶部声明
var firstName, lastName, price, discount, fullPrice;

// 稍后使用
firstName = "Bill";
lastName = "Gates";

price = 19.90;
discount = 0.10;

fullPrice = price * 100 / discount;

也可以用于循环变量：

// 在顶部声明
var i;

// 稍后使用
for (i = 0; i < 5; i++)  {
}

初始化变量

在您声明变量时对其进行初始化是个好习惯。

这么做的好处是：

更整洁的代码
在单独的位置来初始化变量
避免未定义值

// 在开头进行声明和初始化
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

变量初始化使我们能够了解预期用途和预期的数据类型。

请不要声明数值、字符串或布尔对象

请始终将数值、字符串或布尔值视作原始值。而非对象。

如果把这些类型声明为对象，会拖慢执行速度，并产生讨厌的副作用：

实例

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        var x = "Bill";        // x 是字符串
        var y = new String("Bill");  // y 是对象
        document.getElementById("demo").innerHTML = x === y;
    </script>

</body>

</html>
//false

实例

<!DOCTYPE html>
<html>

<body>
    <p id="demo"></p>

    <script>
        var x = new String("Bill");
        var y = new String("Bill");
        document.getElementById("demo").innerHTML = x == y;
    </script>

</body>

</html>
//false

请勿使用 new Object()

请使用 {} 来代替 new Object()
请使用 "" 来代替 new String()
请使用 0 来代替 new Number()
请使用 false 来代替 new Boolean()
请使用 [] 来代替 new Array()
请使用 /()/ 来代替 new RegExp()
请使用 function (){}来代替 new Function()

实例

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        var x1 = {};
        var x2 = "";
        var x3 = 0;
        var x4 = false;
        var x5 = [];
        var x6 = /()/;
        var x7 = function () { };

        document.getElementById("demo").innerHTML =
            "x1: " + typeof x1 + "<br>" +
            "x2: " + typeof x2 + "<br>" +
            "x3: " + typeof x3 + "<br>" +
            "x4: " + typeof x4 + "<br>" +
            "x5: " + typeof x5 + "<br>" +
            "x6: " + typeof x6 + "<br>" +
            "x7: " + typeof x7 + "<br>";
    </script>

</body>

</html>
<!-- 
x1: object
x2: string
x3: number
x4: boolean
x5: object
x6: object
x7: function
 -->

意识到自动类型转换

请意识到数值会被意外转换为字符串或 NaN（Not a Number）。

JavaScript 属于松散类型。变量可包含不同的数据类型，并且变量能够改变其数据类型：

实例

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        var x = "Hello";
        var x = 5;
        document.getElementById("demo").innerHTML = typeof x;
    </script>

</body>

</html>
//number

如果进行数学运算，JavaScript 能够将数值转换为字符串：

实例

<!DOCTYPE html>
<html>

<body>

    <p>删除注释（在行的开头）以测试每种情况：</p>

    <p id="demo"></p>

    <script>
        var x = 5;
        //x = 5 + 7;    // x.valueOf() 是 12，typeof x 是数字
        //x = 5 + "7";  // x.valueOf() 是 57，typeof x 是字符串
        //x = "5" + 7;  // x.valueOf() 是 57，typeof x 是字符串
        //x = 5 - 7;    // x.valueOf() 是 -2，typeof x 是数字
        //x = 5 - "7";  // x.valueOf() 是 -2，typeof x 是数字
        //x = "5" - 7;  // x.valueOf() 是 -2，typeof x 是数字
        //x = 5 - "x";  // x.valueOf() 是 NaN，typeof x 是数字

        document.getElementById("demo").innerHTML = x.valueOf() + " " + typeof x;
    </script>

</body>

</html>
//5 number

用字符串减去字符串，不会产生错误而是返回 NaN（Not a Number）：

实例

<!DOCTYPE html>
<html>

<body>

    <p id="demo">我的第一个段落</p>

    <script>
        document.getElementById("demo").innerHTML = "Hello" - "Kitty";
    </script>

</body>

</html>
//NaN

使用 === 比较

== 比较运算符总是在比较之前进行类型转换（以匹配类型）。

=== 运算符会强制对值和类型进行比较：

实例

<!DOCTYPE html>
<html>

<body>
    <p id="demo"></p>

    <script>
        var x;
        //x = (0 == "");   // true
        //x = (1 == "1");  // true
        //x = (1 == true);   // true
        //x = (0 === "");  // false
        //x = (1 === "1");   // false
        //x = (1 === true);  // false
        document.getElementById("demo").innerHTML = x;
    </script>

</body>

</html>
//undefined

使用 Parameter Defaults

如果调用函数时缺少一个参数，那么这个缺失参数的值会被设置为 undefined。

undefined 值会破坏您的代码。为参数设置默认值是一个好习惯。

实例

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        function myFunction(x, y) {
            if (y === undefined) {
                y = 0;
            }
            return x * y;
        }
        document.getElementById("demo").innerHTML = myFunction(4);
    </script>

</body>

</html>
//0

用 default 来结束 switch

请使用 default 来结束您的 switch 语句。即使您认为没有这个必要。

实例

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        var day;
        switch (new Date().getDay()) {
            case 0:
                day = "周日";
                break;
            case 1:
                day = "周一";
                break;
            case 2:
                day = "周二";
                break;
            case 3:
                day = "周三";
                break;
            case 4:
                day = "周四";
                break;
            case 5:
                day = "周五";
                break;
            case 6:
                day = "周六";
                break;
            default:
                day = "未知";
        }
        document.getElementById("demo").innerHTML = "今天是：" + day;
    </script>

</body>

</html>
//今天是周五

避免使用 eval()

eval() 函数用于将文本作为代码来允许。在几乎所有情况下，都没有必要使用它。

因为允许任意代码运行，它同时也意味着安全问题。

软件技术NINI

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 最佳实践

请避免全局变量、、、请尽量少地使用全局变量。它包括所有的数据类型、对象和函数。全局变量和函数可被其他脚本覆盖。请使用局部变量替代，并学习如何使用闭包。所有在函数中使用的变量应该被声明为局部变量。局部变量必须通过 var 关键词来声明，否则它们将变成全局变量。严格模式不允许未声明的变量。一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。这么做的好处是：也可以用于循环变量：初始化变量在您声明变量时对其进行初始化是个好习惯。这么做的好处是：变量初始化使我们能够了解预期用途和预期的数据类型
复制链接

扫一扫

专栏目录