JavaScript 常见使用误区

2023-07-17 12:25:22

JavaScript 常见使用误区，都是平时开发过程中填过的一些坑，整理记录下。

比较运算符常见错误

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

var x = 10;

var y = "10";

if (x == y)

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

var x = 10;

var y = "10";

if (x === y)

易错点：witch 语句会使用恒等计算符(===)进行比较

以下实例会执行 alert 弹窗：

var x = 10;

switch(x) {

    case 10: alert("Hello");

}

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

var x = ;//这里是数字，不是字符串

switch(x) {

    case "10": alert("Hello");//case要求是字符串"10"

}

浮点型数据使用注意事项(精度问题)

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

JavaScript 字符串分行

//可以使用断行语句
var x =

"Hello World!";

//在字符串中直接按回车键换行，会报错
var x = "Hello

World!";

字符窜断行的方法：字符串断行需要使用反斜杠(\)

var x = "Hello \

World!";

Return 语句使用注意事项

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

遇到return也会结束

function myFunction(a) {

    var

    power = 10;

    return;       // 分号结束，或者不加分号也会结束，返回 undefined

    a * power;

}

要点：不用对 return 语句进行断行。

避免在数组中使用名字来索引

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

以下是正确用法

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

Undefined 不是 Null，对象只有被定义才可能是Null，否则为undefined

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

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

错误的使用方式：

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

正确的方式是我们需要先使用 typeof 来检测对象是否已定义，再去判断这个对象是不是null：

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

码农公寓