文档章节

JavaScript要点 (二) 使用误区

MR_BT
 MR_BT
发布于 2017/01/21 01:05
字数 1287
阅读 2
收藏 0

赋值运算符应用错误

注:赋值语句返回变量的值。

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

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

1 <body>
2 
3 <p id="demo"></p>
4 <script>
5 var x = 0;
6 document.getElementById("demo").innerHTML = Boolean(x == 10);
7 </script>
8 
9 </body>

 

if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10,10 为 true:

1 <body>
2 
3 <p id="demo"></p>
4 <script>
5 var x = 0;
6 document.getElementById("demo").innerHTML = Boolean(x = 10);
7 </script>
8 
9 </body>

if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0,0 为 false:

1 <body>
2 
3 <p id="demo"></p>
4 <script>
5 var x = 0;
6 document.getElementById("demo").innerHTML = Boolean(x = 0);
7 </script>
8 
9 </body>

 


 

比较运算符常见错误

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

 1 <body>
 2 
 3 <p id="demo"></p>
 4 <script>
 5 var x = 10;
 6 var y = "10";
 7 document.getElementById("demo").innerHTML = Boolean(x == y);
 8 </script>
 9 
10 </body>

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

 1 <body>
 2 
 3 <p id="demo"></p>
 4 <script>
 5 var x = 10;
 6 var y = "10";
 7 document.getElementById("demo").innerHTML = Boolean(x === y);
 8 </script>
 9 
10 </body>

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

以下实例会执行 alert 弹窗:

 1 <body>
 2 
 3 <p id="demo"></p>
 4 <script>
 5 var x = 10;
 6 switch(x) {
 7     case 10: alert("Hello");
 8 }
 9 </script>
10 
11 </body>

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

<body>

<p id="demo"></p>
<script>
var x = 10;
switch(x) {
    case "10": alert("Hello");
}
</script>

</body>

 


加法与连接注意事项

加法是两个数字相加。

连接是两个字符串连接。

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

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

1 var x = 10 + 5;          // x 的结果为 15
2 var x = 10 + "5";        // x 的结果为 "105"
使用变量相加结果也不一致:
1 var x = 10;
2 var y = 5;
3 var z = x + y;           // z 的结果为 15
4 
5 var x = 10;
6 var y = "5";
7 var z = x + y;           // z 的结果为 "105"

 

 


浮点型数据使用注意事项

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

所有的编程语言,包括 JavaScript,对浮点型数据的精确度都很难确定:

1 var x = 0.1;
2 var y = 0.2;
3 var z = x + y            // z 的结果为 0.3
4 if (z == 0.3)            // 返回 false

我解决以上问题,可以用整数的乘除法来解决:

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

 


JavaScript 字符串分行

JavaScript 运行我们在字符串中使用断行语句:

var x =
"Hello World!";

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

1 var x = "Hello
2 World!";

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

1 var x = "Hello \
2 World!";

 


错误的使用分号

以下实例中,由于分号使用错误,if 语句中的代码块将无法执行:

1 if (x == 19);
2 {
3     // code block  
4 }

 


数组中使用名字来索引

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

使用名字来作为索引的数组称为关联数组(或哈希)。

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

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

在 JavaScript 中, 对象 使用 名字作为索引。 

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

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

1 var person = [];
2 person["firstName"] = "John";
3 person["lastName"] = "Doe";
4 person["age"] = 46;
5 var x = person.length;         // person.length 返回 0
6 var y = person[0];             // person[0] 返回 undefined

 


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

1 错误的定义方式:
2 websites = {site:"", url:"m", like:460,}
3 正确的定义方式:
4 websites = {site:"", url:"m", like:460}

 


Undefined 不是 Null

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

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

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

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

 


程序块作用域

在每个代码块中 JavaScript 不会创建一个新的作用域,一般各个代码块的作用域都是全局的。
以下代码的的变量 i 返回 10,而不是 undefined:
for (var i = 0; i < 10; i++) {
    // some code
}
return i;

 

 

 

本文转载自:http://www.cnblogs.com/tig666666/p/5916510.html

MR_BT
粉丝 0
博文 49
码字总数 13680
作品 0
深圳
高级程序员
私信 提问
JavaScript字符串转换为JSON

一、本文要点 在JavaScript中 二、要点应用代码展示:

雪之丞
2014/02/19
94
0
JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in VS for/of

译者按: JS 骚操作。 原文:For vs forEach() vs for/in vs for/of in JavaScript 译者: Fundebug 本文采用意译,版权归原作者所有 我们有多种方法来遍历 JavaScript 的数组或者对象,而它们...

Fundebug
03/11
0
0
掌握这11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
2018/06/26
0
0
掌握11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
2014/05/14
3.1K
25
关于JS中一些重要的api实现, 巩固你的原生JS功底

在面试中,常常会遇到一些手写XXX之类的面试题,因此好好总结一下,对于巩固我们的原生js的基础是非常必要的。尽管在网上已经有了非常多的总结文章,但在我看来有一个普遍的问题,那就是把原...

神三元
08/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一、docker 入坑(win10和Ubuntu 安装)

前言 终究还是绕不过去了,要学的知识真的是太多了,好在我们还有时间,docker 之前只闻其声,不曾真正的接触过,现在docker 越来越火,很多公司也都开始使用了。所以对于我们程序员而言,又...

quellanan2
7分钟前
4
0
AutoCompleteTextView

小技巧按菜单键 当菜单打开之前会调用onMenuOpened(int featereId,Menu menu),可以重写这个方法,弹出对话框或者Popmenu 再布局中添加控件AutoCompleteTextView. <AutoCompleteTextVie...

逆天游云
11分钟前
3
0
谷歌软件商店:推出5美元会员 可用数百个软件

腾讯科技讯,谷歌和苹果是全球两大智能手机操作系统的运营者,两家公司旗下分别拥有占据行业垄断地位的谷歌软件商店和苹果软件商店。据外媒最新消息,手机软件商店的商业模式正在发生一些变化...

linuxCool
33分钟前
2
0
RocketMQ 多副本前置篇:初探raft协议

Raft协议是分布式领域解决一致性的又一著名协议,主要包含Leader选举、日志复制两个部分。 温馨提示: 本文根据raft官方给出的raft动画进行学习,其动画展示地址:http://thesecretlivesofda...

中间件兴趣圈
33分钟前
2
0
elasticsearch 6.8.0 添加认证

1. 修改elasticsearch-6.8.0/config/elasticsearch.yml 最后添加一行:xpack.security.enabled: true 2. 初始化用户和密码 ./bin/elasticsearch-setup-passwords interactive 我这里初始化为......

coord
35分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部