JavaScript 使用误区 登录

JavaScript 使用误区

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

String replace

string的replace方法我们经常用,替换string中的某些字符,语法像这样子

string.replace(subStr/reg,replaceStr/function)

第一个参数是要查找的字符串或者一个正则表达式,第二个参数是想替换成的字符串或一个方法,我们可以这么使用

"I'm Byron".replace("B","b") // I'm byron

记过和我们想得一样,但是

"I'm a student, and you?".replace("n","N"); // I'm a studeNt, and you?

和我们预期的不一样,第二个‘n’没有被替换。字符串的 replace 方法如果第一个参数传入字符串,那么只有第一个匹配项会被替换。如果要替换全部匹配项,需要传入一个 RegExp 对象并指定其 global 属性。

"I'm a student, and you?".replace(/n/g,"N"); // I'm a studeNt, aNd you?


typeof

关于typeof最容易让人误会的就是typeof是操作符,并不是函数,也就是说我们在判断一变量类型时没必要加括号,直接使用即可

typeof 1; //numbertypeof(1); //number, 没必要这么写,但是也没错,等于是给变量或常量包装了一下

typeof 的返回值是字符串,在大多数情况下返回的和我们预期结果是一样的,但是有几点注意的地方,我们知道JavaScript有几种基本类型,number、string、boolean、null、undefined,再就是对象object了,我们看几个例子

typeof 123; //number

typeof NaN //number

typeof "123" //string

typeof false; //boolean

typeof undefined ; //undefined

typeof null //object

typeof new Array(); //object

typeof (new Array()); //觉得不够清晰可以这么用,结果是一样的

typeof (function(){}); //function

typeof a; //undefined

1. 123是个数字返回number

2. 虽然NaN表示不是数字,但是typeof仍然会返回number

3. “123” 变成了字符串,所以返回string

4. false 类型就是boolean

5. undefined的类型就是undefined,这个类型的变量只能有一个字面值”undefined”

6. null的类型并不是null,而是object,所以我们不要寄希望与typeof帮我们判断null

7. typeof如果判断是对象只会返回object,而不会返回Array、Date的具体类型

9. function也是object的一种,按说也应该直接返回object。但是typeof对它区别对待了,返回了function,我们可以用此判断变量是否为函数

10. 没定义的变量同样返回undefined


if和==

在javascript中if并不仅仅判断boolean决定真假,0、NaN、””、undefined、null、false都会被认为是假

if (!false) {

            console.log(1);

        };

        if (!0) {

            console.log(2);

        };

        if (!"") {

            console.log(3);

        };

        if (!undefined) {

            console.log(4);

        };

        if (!null) {

            console.log(5);

        };

    if (!NaN) { 

        console.log(6); 

    };

在console中123456都会被打印出来

但是这并不意味着这些值就==false

0==false; //true

"0"==false; //true,这个也是true

undefined==false //false

null==false //false

null==null //true

NaN==NaN //false

null==undefined //true


赋值运算符应用错误

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>
</body>
</html>


比较运算符常见错误

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 10;
switch(x) {
    case "10": alert("Hello");
}
</script>
</body>
</html>


加法与连接注意事项

加法是两个数字相加。

连接是两个字符串连接。

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

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

var x = 10 + 5;          // x 的结果为 15
var x = 10 + "5";        // x 的结果为 "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


Return 语句使用注意事项

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

以下实例结果会返回 undefined:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var
    power = 10;
    return
    a * power;
}
</script>
</body>
</html>

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

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

解析

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

var

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

power = 10;

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

return

JavaScript 将自动关闭语句:

return;

在 JavaScript 中,分号是可选的 。

由于 return 是一个完整的语句,所以 JavaScript 将关闭 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



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

错误的定义方式:

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

正确的定义方式:

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


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

错误的定义方式:

websites = {site:"php中文网", url:"www.php.cn", like:460,}

正确的定义方式:

websites = {site:"php中文网", url:"www.php.cn", like:460}


Undefined 不是 Null

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

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

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

错误的使用方式:

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

正确的方式是我们需要先使用 typeof 来检测对象是否已定义:

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



下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = myFunction(55); function myFunction(a) { var power = 10; return a * power; } </script> </body> </html>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送