猿变实验室之猿变开发手册-JavaScript语法入门-JavaScript 使用误区

本章节我们将讨论初学者使用JavaScript 时常见的一些误区。

相等运算符错误

使用赋值运算符

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

使用赋值运算符比较相等错误示例

<script>
var x = 10
var y = 20
if (x=y){//永远是true
    document.write("x与y相等，x的值:"+x)
}
</script>

忽略数据类型错误

在常规的比较中，数据类型是被忽略的

x == y //相等符忽略他们的数据类型，只比较转换之后的值

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

x === y

这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较:

以下实例由于下拉菜单的值分别为数字类型与字符串类型，所以结果不一样：

<html>
<body>
   <select onchange="show(this.value)">
     <option value="0">选择效果</option>
      <option value="1">数字效果</option>
      <option value="2">字符串效果</option>
   </select>
   <p id="demo"></p>
<script>
 demo = document.getElementById("demo")
 function show(val){
    if (val == "1"){
        test(10)
    } else if (val == "2"){
        test("10")
    }
}
function test(val){
    switch (val){
        case 10:
            demo.innerHTML = "您选择的是数字"
            break;
        case "10":
            demo.innerHTML = "您选择的是字符串"
            break;    
      }

}
</script>
</body>
</html>

加法运算符

两个数字之间使用 + 运算符是两个数字算术之和。

如果是其他类型之间使用 + 运算符，首先转换为字符串然后进行拼接，即使其中有一项为数字。

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

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

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

浮点数据比较

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

所有的编程语言，包括 JavaScript，都存在浮点型数据精度问题，就是可能无法使用二进制小数来完全准确的表示一个十进制数

<script>
var x = 0.1;
var y = 0.2;
var z = x + y    // z 的结果为 0.30000000000000004
if (z == 0.3) {
     document.write("==")
} else {
   document.write("z="+z+"与0.3不等")
}

</script>

为解决浮点数问题，需要确定精度等级，保证精度等级以内的比较

精度解决方案

先*10的倍数变为整数进行运算，然后再除以10的倍数

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

语句分行

JavaScript 允许我们在使用断行语句:

语句折行实例 1

<script>
var x =
"Hello World!";
document.write(x)
</script>

语句折行实例 2

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

<script>
var x = "Hello 
World!";
document.write(x)
</script>

语句折行实例 3

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

<script>
var x = "Hello \
World!";
document.write(x)
</script>

语句折行实例 4

return语句与后面的返回值不能分开折行

<script>
function myfun1(){
    return 10

}

function myfun2() {
   return 
   10
}

document.write("myfun1返回值="+myfun1())
document.write("<br>")
document.write("myfun2返回值="+myfun2())
</script>

错误的使用分号

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

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

<script>
var x = true
if (x == true);//多余的;
{
     // code block
}

</script>

在对象中，项目之间的`,`错误使用`;`

<script>
obj = {
     name: "luxp";//应该是,
     sex: "boy"
   }
</script>

数组使用非数字索引

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

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

正确的数组定义实例

<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
document.write("person.length=" + person.length); 
</script>

错误的数组定义实例

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

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

<script>
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
document.write("person.length=" + person.length); // person.length 返回 0
</script>

使用for...in...循环数组

for...in...用于循环对象，当用于循环数组时，索引转为字符串类型

<script>
arr = ["a", "b", "c"]
for (i in arr){
     document.write(i+"=>"+typeof(i)+"<br>")
}
</script>

添加多余的逗号

数组末尾添加多余的逗号

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

<script>
var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。
//正确的方法，删除末尾多余的,
// var colors = [5, 6, 7]
document.write(colors.length)
</script>

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

错误的定义方式

<script>
websites = {site:"python-xp教程", url:"www.python-xp.com", hot:110,}
</script>

Undefined不是 Null

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

null是一个空对象指针，可以被赋给任意已定义的对象

undefined表示对象已经定义，但是没有赋值

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

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

错误的检测对象是否存在方式

必须先检测变量是否定义，然后再检测对象的值
if (myObj !== null && typeof myObj !== "undefined")

正确的方式是我们需要先使用 typeof 来检测对象是否已定义：
if (typeof myObj !== "undefined" && myObj !== null)

程序块作用域

使用var 定义的变量在代码块中会影响块之外

var定义实例

<script>
var i = 100
for (var i = 0; i < 10; i++) {
   // some code
}
document.write("i="+i) //i=10
</script>

let 定义的变量作用域范围仅限在代码块内

let定义实例

<script>
var i = 100
for (let i = 0; i < 10; i++) {
  // some code
}
document.write("i="+i) //i = 100
</script>

JavaScript 使用误区