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