JavaScript使用误区

声明

该文部分代码和内容节选自菜鸟教程,仅用作个人学习,特此声明

链接https://www.runoob.com/

16、JavaScript使用误区

16.1 赋值运算符应用错误

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

16.2 比较运算符常见错误

  • 在常规的比较中,数据类型是被忽略的,以下 if 条件语句返回 true

    var x = 10;
    var y = "10";
    if (x == y)
    
  • 在严格的比较运算中,=== 为恒等计算符,同时检查表达式的值与类型,以下 if 条件语句返回 false

    var x = 10;
    var y = "10";
    if (x === y)
    

    这种错误经常会在 switch 语句中出现,switch 语句会使用恒等计算符(===)进行比较。以下实例会执行 alert 弹窗

    var x = 10;
    switch(x) {
        case 10: alert("Hello");
    }
    

    以下实例由于类型不一致不会执行 alert 弹窗

    var x = 10;
    switch(x) {
        case "10": alert("Hello");
    }
    

16.3 加法与连接

加法是两个数字相加。,连接是两个字符串连接。

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

接下来我们可以通过实例查看两个数字相加及数字与字符串连接的区别

var x = 10;
var y = 5;
var z = x + y;           // z 的结果为 15

var x = 10;
var y = "5";
var z = x + y;           // z 的结果为 "105"

16.4 浮点型精度问题

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。所有的编程语言,包括 JavaScript,对浮点型数据的精确度都很难确定

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.30000000000000004
if (z == 0.3)            // 返回 false

解决方案:整数的乘除法

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

更多内容可以参考:JavaScript 中精度问题以及解决方案

16.5 JavaScript字符串分行


字符串断行需要使用反斜杠( \ ),如下所示

var x = "Hello \
World!";

16.6 分号使用错误

以下实例中,if 语句失去方法体,原 if 语句的方法体作为独立的代码块被执行,导致错误的输出结果。由于分号使用错误,if 语句中的代码块就一定会执行

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

16.7 return语句使用误区

  • JavaScript 默认是在代码的最后一行自动结束。以下两个实例返回结果是一样的(一个有分号一个没有)

    function myFunction(a) {
        var power = 10 
        return a * power
    }
    
    function myFunction(a) {
        var power = 10;
        return a * power;
    }
    
  • JavaScript 也可以使用多行来结束一个语句。以下实例返回相同的结果

    function myFunction(a) {
        var
        power = 10; 
        return a * power;
    }
    
  • 但是,以下实例结果会返回 undefined

    function myFunction(a) {
        var
        power = 10; 
        return
        a * power;
    }
    

    这是为什么呢?

    因为在 JavaScript 中,上述实例的代码与下面的代码一致

    function myFunction(a) {
        var
        power = 10;  
        return;       // 分号结束,返回 undefined
        a * power;
    }
    

    解析

    如果是一个不完整的语句,如下所示:

    var
    

    JavaScript 将尝试读取第二行的语句:

    power = 10;
    

    但是由于这样的语句是完整的:

    return
    

    JavaScript 将自动关闭语句:

    return;
    

    不要对 return 语句进行断行


16.8 数组使用误区

1、使用名字索引

  • 许多程序语言都允许使用名字来作为数组的索引。使用名字来作为索引的数组称为关联数组(或哈希)。

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

    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"
    
  • 在 JavaScript 中, 对象 使用 名字作为索引

    如果你使用名字作为索引,当访问数组时,JavaScript 会把数组重新定义为标准对象

    执行这样操作后,数组的方法及属性将不能再使用,否则会产生错误

    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
    

2、数组元素定义

  • 定义数组元素,最后不能添加逗号,数组最后一个值的后面添加逗号虽然语法没有问题,但是在不同的浏览器可能得到不同的结果。

    var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。
    points = [40, 100, 1, 5, 25, 10];//这才是正确的定义方式
    

16.9 对象的定义误区

  • 定义对象最后也不能加逗号

    错误的定义方式:

    websites = {site:"百度", url:"www.baidu.com", like:460,}
    

    正确的定义方式:

    websites = {site:"百度", url:"www.baidu.com", like:460}
    

16.10 Undefined 不是 Null

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

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

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

错误的使用方式:

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

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

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

16.11 程序块作用域

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

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

for (var i = 0; i < 10; i++) {
    // some code
}
return i;

在ES6中提出了 let 的概念,使用 let 声明的变量将具有 作用域 的限制,如:

for (let i = 0; i < 10; i++) {
}
return i;

此时返回的就不是for循环中的i变量

需要注意的是这是可以 向下兼容 的,比如

{
  let i = 0;
  {
    alert(i);  //能获取i变量
  }
}
return i;

此时虽然外部的return无法获取i变量,但是二级作用域的alert却可以获得上一级的i变量,也就是所谓的

上级作用域向下兼容

posted @   无关风月7707  阅读(27)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示