阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 使用误区

      JavaScript 使用误区

      本章节我们将讨论 JavaScript 的使用误区。

      赋值运算符应用错误

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

      if 条件语句返回 false (是我们预期的)因为 x 不等于 10:

      var x = 0;
      if (x == 10)
      

      if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10,10 为 true:

      var x = 0;
      if (x = 10)
      

      if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0,0 为 false:

      var x = 0;
      if (x = 0)
      

      赋值语句返回变量的值。

      比较运算符常见错误

      在常规的比较中,数据类型是被忽略的,以下 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");
      }
      

      加法与连接注意事项

      加法是两个数字相加。

      连接是两个字符串连接。

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

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

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

      使用变量相加结果也不一致:

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

      浮点型数据使用注意事项

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

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

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

      为解决以上问题,可以用整数的乘除法来解决:

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

      精度问题汇总

      想用有限的位来表示无穷的数字,显然是不可能的,因此会出现一些列精度问题:

      • 浮点数精度问题,比如 0.1 + 0.2 !== 0.3
      • 大数精度问题,比如 9999 9999 9999 9999 == 1000 0000 0000 0000 1
      • toFixed 四舍五入结果不准确,比如 1.335.toFixed(2) == 1.33

      浮点数精度和 toFixed 其实属于同一类问题,都是由于浮点数无法精确表示引起的,如下:

      (1.335).toPrecision(20);    // "1.3349999999999999645"
      

      而关于大数精度问题,我们可以先看下面这个代码片段:

      // 能精确表示的整数范围上限,S为1个0,E为11个0,S为53个1
      Math.pow(2, 53) - 1 === Number.MAX_SAFE_INTEGER    // true
      // 能精确表示的整数范围下限,S为1个1,E为11个0,S为53个1
      -(Math.pow(2, 53) - 1) === Number.MIN_SAFE_INTEGER    // true
      // 能表示的最大数字,S为1个0,E为971,S为53个1
      (Math.pow(2, 53) - 1) * Math.pow(2, 971) === Number.MAX_VALUE    // true
      // 能表示的最接近于0的正数,S为1个0,E为-1074,S为0
      Math.pow(2, -1074) === Number.MIN_VALUE // true
      

      通过以上可以明白,[MIN_SAFE_INTEGER, MAX_SAFE_INTEGER] 的整数都可以精确表示,但是超出这个范围的整数就不一定能精确表示。这样就会产生所谓的大数精度丢失问题。

      解决思路

      首先考虑的是如何解决浮点数运算的精度问题,有 3 种思路:

      • 考虑到每次浮点数运算的偏差非常小(其实不然),可以对结果进行指定精度的四舍五入,比如可以 parseFloat(result.toFixed(12));
      • 将浮点数转为整数运算,再对结果做除法。比如 0.1 + 0.2,可以转化为 (1*2)/3。
      • 把浮点数转化为字符串,模拟实际运算的过程。

      先来看第一种方案,在大多数情况下,它可以得到正确结果,但是对一些极端情况,toFixed 到 12 是不够的,比如:

      210000 * 10000  * 1000 * 8.2    // 17219999999999.998
      parseFloat(17219999999999.998.toFixed(12));    // 17219999999999.998,而正确结果为 17220000000000
      

      上面的情况,如果想让结果正确,需要 toFixed(2),这显然是不可接受的。

      再看第二种方案,比如 number-precision 这个库就是使用的这种方案,但是这也是有问题的,比如:

      // 这两个浮点数,转化为整数之后,相乘的结果已经超过了 MAX_SAFE_INTEGER
      123456.789 * 123456.789     // 转化为 (123456789 * 123456789)/1000000,结果是 15241578750.19052
      

      所以,最终考虑使用第三种方案,目前已经有了很多较为成熟的库,比如 bignumber.js,decimal.js,以及 big.js 等。我们可以根据自己的需求来选择对应的工具。并且,这些库不仅解决了浮点数的运算精度问题,还支持了大数运算,并且修复了原生 toFixed 结果不准确的问题。

      题外话

      还有另外一个与 JavaScript 计算相关的问题,即 Math.round(x),它虽然不会产生精度问题,但是它有一点小陷阱容易忽略。下面是它的舍入的策略:

      • 如果小数部分大于 0.5,则舍入到下一个绝对值更大的整数。
      • 如果小数部分小于 0.5,则舍入到下一个绝对值更小的整数。
      • 如果小数部分等于 0.5,则舍入到下一个正无穷方向上的整数。

      所以,对 Math.round(-1.5),其结果为 -1,这可能不是我们想要的结果。

      当然,上面提到的 big.js 等库,都提供了自己的 round 函数,并且可以指定舍入规则,以避免这个问题。

      JavaScript 字符串分行

      JavaScript 允许我们在字符串中使用断行语句:

      var x =
      "Hello World!";
      

      但是,在字符串中直接使用回车换行是会报错的:

      var x = "Hello
      World!";
      

      我们可以在选择开发工具或按下 F12 来查看错误信息:

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

      var x = "Hello \
      World!";
      

      错误的使用分号

      以下实例中,if 语句失去方法体,原 if 语句的方法体作为独立的代码块被执行,导致错误的输出结果。

      由于分号使用错误,if 语句中的代码块就一定会执行:

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

      return 语句使用注意事项

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

      以下两个实例返回结果是一样的(一个有分号一个没有):

      实例 1

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

      实例 2

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

      JavaScript 也可以使用多行来结束一个语句。

      以下实例返回相同的结果:

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

      但是,以下实例结果会返回 undefined

      实例 4

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

      为什么会有这样的结果呢?因为在 JavaScript 中,实例 4 的代码与下面的代码一致:

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

      解析

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

      var
      

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

      power = 10;
      

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

      return
      

      JavaScript 将自动关闭语句:

      return;
      

      在 JavaScript 中,分号是可选的 。

      由于 return 是一个完整的语句,所以 JavaScript 将关闭 return 语句。

      注意:不用对 return 语句进行断行。

      数组中使用名字来索引

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

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

      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
      

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

      添加逗号虽然语法没有问题,但是在不同的浏览器可能得到不同的结果。

      var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。
      

      正确的定义方式:

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

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

      错误的定义方式:

      websites = {site:"阿西河前端教程", url:"www.axihe.com", like:460,}
      

      正确的定义方式:

      websites = {site:"阿西河前端教程", url:"www.axihe.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:

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