JavaScript

JS 使用误区

JS 赋值运算符应用错误

在 JS 程序中，如果在 if 语句中使用赋值语句运算符等号（=），将会产生一个错误结果，正确的方法是使用比较运算符的双等号（==）

// if 条件语句返回 false（使我们预期的），因为 x 不等于 10
var x = 0;
if (x == 10) {
    return true;
} else {
    return false;
}

// if 条件语句返回 true （不是我们预期的），因为条件语句执行为 x 赋值 10, 10为true
var x = 0;
if (x = 10) {
    return true;
} else {
    return false;
}

// if 条件语句返回 false （不是我们预期的），因为条件语句执行为 x 赋值 0, 0为false
var x = 0;
if (x = 0) {
    return true;
} else {
    return false;
}

JS 比较运算符常见错误

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

var x = 10;
var y = "10";
if (x == y) {		// 使用双等号 ==，数据类型被忽略，只比较值
    return true;	//值相等，返回true
} else {
    return false;
}

在严格的比较运算中，三等号 === 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回false

var x = 10;
var y = "10";
if (x === y) {	// 使用三等号 ===，同时检查值和类型
    return true;
} else {
    return false;	// 值相等，类型不等，返回false
}

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

// 该实例会执行alert弹窗
var x = 10;
switch(x) {
    case 10:
        alert("Hello");
        break;
}

// 该实例不会执行alert弹窗
var x = 10;
switch(x) {
    case "10":
        alert("Hello");
        break;
}

JS 加法与连接注意事项

加法是两个数字相加
连接是两个字符串连接
JS 的加法和连接都使用 + 运算符

// 通过该实例查看两个数字相加和两个字符串相连接的区别
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"

JS 浮点型数据使用注意事项

JS 中的所有数据都是以 64 位浮点型数据（float）来存储
所有的编程语言，包括 JS ，对浮点型数据的精确度都很难确定

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

为了解决以上问题，可以使用整数的乘除法来解决

var z = (x * 10 + y * 10) / 10;
if (z == 0.3) {
    return true;	// 返回 true
} else {
    return false;
}

JS 字符串分行

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

var x =
    "Hello World!";		// 输出 Hello World

注意：在字符串中间直接使用回车是会报错的

var x = "Hello 
World";		// 报错

字符串中间断行需要使用斜杠（）

var x = "Hello 
World";		// 输出 Hello World

JS 错误使用分号

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

// 由于分号使用错误，if 语句中的代码块就一定会执行
if (x == 19);
{
    // code block
}

JS return 语句使用注意事项

JS 默认是在代码的最后一行自行结束

以下两个实例返回的结果是一样的

// 实例1
function myFuncction() {
    var power = 10;
    return a * power;	// return 语句末尾有分号
}

// 实例2
function myFuncction() {
    var power = 10;
    return a * power	// return 语句末尾没有分号
}

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

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

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

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

// 以上实例在 JS 中等同于以下实例
function myFunction() {
    var
    power = 10;
    return;		// 此时函数已经执行完毕，不会再执行下面一行，返回 undefined
    a * power;
}

实例解析：

如果不是一个完整的语句，如下所示：

var

JS 将尝试读取第二行的语句：

power = 10;

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

return

JS 将自动关闭语句：

return;

在 JS 中，分号是可选的
由于 return 是一个完整的语句，所以 JS 将关闭 return 语句
注意：不用对 return 语句进行断行

JS 数组中使用名字来索引

许多程序语言都允许使用名字作为数组的索引
使用名字来作为索引的数组成为关联数组（或哈希）
JS 不支持使用名字来索引数组，只允许使用数字索引

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 55;
var x = person.length;		// 返回 3
var y = person[0];			// 返回 "John"

在 JS 中，对象使用名字作为索引
如果使用名字作为索引，当访问数组时，JS 会把数组重新定义为标准对象
执行这样的操作后，数组的方法及属性不能再使用，否则会产生错误

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

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

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

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

正确的定义方式

var colors = [1,2,3];

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

错误的定义方式：

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

正确的定义方式：

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

JS undefined 不是 null

在 JS 中，null 用于对象，undefined 用于变量、属性和方法
对象只有被定义才有可能为 null，否则为 undefined

错误使用：

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

正确使用，先使用 typeof 来检测对象是否已经定义：

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

JS 程序作用域

在每个代码块中，JS 不会创建一个新的作用域，一般各个代码块的作用域都是全局的（函数内是局部，其他代码块内是全局）
以下代码块的变量 i 返回10，而不是 undefined

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