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?
这样才可以达到我们目的,关于string replace方法详细使用可以看看JavaScript string 的replace
typeof
关于typeof最容易让人误会的就是typeof是操作符,并不是函数,也就是说我们在判断一变量类型时没必要加括号,直接使用即可
typeof 1; //number
typeof(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
纳尼!!!
相等运算符 (==、!=)
如果两表达式的类型不同,则试图将它们转换为字符串、数字或 Boolean 量。
NaN 与包括其本身在内的任何值都不相等。
负零等于正零。
null 与 null 和 undefined 相等。
相同的字符串、数值上相等的数字、相同的对象、相同的 Boolean 值或者(当类型不同时)能被强制转化为上述情况之一,均被认为是相等的。其他比较均被认为是不相等的。
所以说 0==”0”; 返回的也会是true。
那么应该则么判断两个变量究竟是不是一回事儿呢
恒等运算符 (===、!==)
除了不进行类型转换,并且类型必须相同以外,这些运算符与相等运算符的作用是一样的,这下就搞定了。
Date 对象
我们可以这样构造一个Date对象
new Date() //Date {Fri Aug 02 2013 16:50:33 GMT+0800 (China Standard Time)}
new Date(milliseconds) //Date {Fri Aug 02 2013 16:53:26 GMT+0800 (China Standard Time)}
new Date("2013/08/02") //Date {Fri Aug 02 2013 00:00:00 GMT+0800 (China Standard Time)}
new Date(year,month,day,hours,minutes,seconds,ms)
前三种方式没有什么问题,但第四种得到的结果回合我们预期的不一致
new Date(2013,08,02) //Date {Mon Sep 02 2013 00:00:00 GMT+0800 (China Standard Time)}
我们可以看到,传入的月份是08,返回的结果却是九月。这是因为Date对象的月份是从0开始计数的(天却不是),即0代表一月,1代表二月…11代表12月。在调用Date实例的getMonth方法时尤其要注意
var d = new Date(2012, 4, 15); // 2012年5月15日
alert(d.getMonth()); // 结果为4
Date.parse
Date.parse方法可以识别两种格式的字符串参数(标准的长日期格式,比如带星期的那种,也可以识别,不过不常用):
1. "M/d/yyyy": 美国的日期显示格式。如果年传入2位则作为 19xx 处理
2."yyyy-MM-dd" 或 "yyyy/MM/dd": 注意月和日都必须是两位
Date.parse 的返回结果不是一个Date对象,而是从1970-01-01午夜(GMT)到给定日期之间的毫秒数。可以用Date的构造函数将其转换为Date对象。
new Date(Date.parse("8/2/2012")); // 正确识别为2012年8月2日
new Date(Date.parse("2012-08-02")); // 正确识别为2012年8月2日
new Date(Date.parse("2012-8-2")); // 不能识别
for…in 遍历数组
for…in用来遍历一个对象中的成员(属性,方法),如果用来遍历数组的到的结果并不是预期中数组每项的值,方法神马的会被遍历出来
Array.prototype.contains = function(item) {
for (var i = 0; i <= this.length - 1; i++) {
if(this[i] == item)
return this[i];
}
}
var staff = [ "Staff A", "Staff B" ];
// Normal Enumeration: Only the 2 items are enumerated
for (var i = 0; i <= staff.length - 1; i++) {
var singleStaff = staff[i];
alert(singleStaff);
}
// for...in Enumeration: the method "contains" are enumerated, too
for (var singleStaff in staff) {
alert(singleStaff);
}
事实上很多时候我们都会给数组加上其他属性。比如 jQuery 对象就是一个数组对象加上一些扩展方法;再比如 String.prototype.match 方法返回值就是一个数组(正则表达式及其子表达式的匹配项)加上 index 和 input 两个属性。
parseInt
语法: parseInt(string, radix)
参数 | 描述 |
string | 必需。要被解析的字符串。 |
radix |
可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。 如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数。 如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。 |
当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。
举例,如果 string(开头结尾空格自动省略) 以 "0x" 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。
parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (10+9)
parseInt("11",2); //返回 3 (2+1)
parseInt("17",8); //返回 15 (8+7)
parseInt("1f",16); //返回 31 (16+15)
parseInt("010"); //未定:返回 10 或 8
setTimeout/setInterval执行时机
setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。
JavaScript其实是运行在单线程的环境中的,这就意味着定时器仅仅是计划代码在未来的某个时间执行,而具体执行时机是不能保证的,因为页面的生命周期中,不同时间可能有其他代码在控制JavaScript进程。在页面下载完成后代码的运行、事件处理程序、Ajax回调函数都是使用同样的线程,实际上浏览器负责进行排序,指派某段程序在某个时间点运行的优先级。
我们可以可以把JavaScript想象成在时间线上运行。当页面载入的时候首先执行的是页面生命周期后面要用的方法和变量声明和数据处理,在这之后JavaScript进程将等待更多代码执行。当进程空闲的时候,下一段代码会被触发
除了主JavaScript进程外,还需要一个在进程下一次空闲时执行的代码队列。随着页面生命周期推移,代码会按照执行顺序添加入队列,例如当按钮被按下的时候他的事件处理程序会被添加到队列中,并在下一个可能时间内执行。在接到某个Ajax响应时,回调函数的代码会被添加到队列。JavaScript中没有任何代码是立即执行的,但一旦进程空闲则尽快执行。定时器对队列的工作方式是当特定时间过去后将代码插入,这并不意味着它会马上执行,只能表示它尽快执行。
关于setTimeout/setInterval执行时机详细说明可以看看 setTimeout()和setInterval() 何时被调用执行
预解析
console.log(a); //Error:a is not defined ,直接报错,下面语句没法执行,一下结果为注释该句后结果
console.log(b) //undefined
var b="Test";
console.log(b);//Test
很奇怪前两句变量a,b都没有声明,第一句却报错,第二句能够输出undefined?这是因为JavaScript是解释型语言,但它并不是直接逐步执行的,JavaScript解析过程分为先后两个阶段,一个是预处理阶段,另外一个就是执行阶段。在预处理阶段JavaScript解释器将完成把JavaScript脚本代码转换到字节码,然后第二阶段JavaScript解释器借助执行环境把字节码生成机械码,并顺序执行。
也就说JavaScript值执行第一句语句之前就已经将函数/变量声明预处理了,var b=”Test” 相当于两个语句,var b;(undefined结果的来源,在执行第一句语句之前已经解析),b=”Test”(这句是顺序执行的,在第二句之后执行)。这也是为什么我们可以在方法声明语句之前就调用方法的原因。
showMsg(); // This is message
function showMsg()
{
alert('This is message');
}
块级作用域
JavaScript没有块级作用域,只有函数级作用域,这就意味着{}在JavaScript中只能起到语法块的作用,而不能起到作用域块作用
if(true){//语法块,保证{}内代码if条件成立执行
//...
var a=3;
}
console.log(a); //3
上面例子可以清楚看到属于window的console.log方法依然可以访问貌似是局部变量的a
闭包
首先从一个经典错误谈起,页面上有若干个div, 我们想给它们绑定一个onclick方法,于是有了下面的代码
<div id="divTest">
<span>0</span> <span>1</span> <span>2</span> <span>3</span>
</div>
<div id="divTest2">
<span>0</span> <span>1</span> <span>2</span> <span>3</span>
</div>
$(document).ready(function() {
var spans = $("#divTest span");
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
alert(i);
}
}
});
很简单的功能可是却偏偏出错了,每次alert出的值都是4,简单的修改就好使了
var spans2 = $("#divTest2 span");
$(document).ready(function() {
for (var i = 0; i < spans2.length; i++) {
(function(num) {
spans2[i].onclick = function() {
alert(num);
}
})(i);
}
});
闭包是指有权限访问另一个函数作用域的变量的函数,创建闭包的常见方式就是在一个函数内部创建另一个函数,只要存在调用内部函数的可能,JavaScript就需要保留被引用的函数。而且JavaScript运行时需要跟踪引用这个内部函数的所有变量,直到最后一个变量废弃,JavaScript的垃圾收集器才能释放相应的内存空间。
这笔书的很肤浅,想简单了解闭包可以看看JavaScript 闭包究竟是什么
结束
关于JavaScript的坑坑洼洼真不少,一边学习一边总结吧。
JavaScript 误区的更多相关文章
- 关于javascript的误区
JavaScript 误区 接触JavaScript两年多遇到过各种错误,其中有一些让人防不胜防,原来对JavaScript的误会如此之深,仅以此文总结一下常见的各种想当然的误区 String rep ...
- JavaScript的一些常见误区
原文出处: 色拉油的博客 接触JavaScript两年多遇到过各种错误,其中有一些让人防不胜防,原来对JavaScript的误会如此之深,仅以此文总结一下常见的各种想当然的误区. String r ...
- 前端性能优化(三)——传统 JavaScript 优化的误区
注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几 ...
- JavaScript 作用域的误区
了解JavaScript的同学可能知道,JavaScript语言由于设计原因,导致语言本身存在很多先天性的不足,当然这并非设计者有意的,js语言最初是被设计来作为网页交互的脚本语言,依照现有的js语法 ...
- JavaScript 常见使用误区
JavaScript 常见使用误区,都是平时开发过程中填过的一些坑,整理记录下. 比较运算符常见错误 //在常规的==比较中,数据类型是被忽略的,以下 if 条件语句返回 true: var x = ...
- JavaScript要点 (二) 使用误区
赋值运算符应用错误 注:赋值语句返回变量的值. 在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 ( ...
- javascript使用误区(switch、this)
1.switch 语句会使用恒等计算符(===)进行比较: 以下实例由于类型不一致不会执行 alert 弹窗: var x = "10"; switch(x) { case 10: ...
- 重新认识Javascript的一些误区总结
1.在函数内有没有var真的不一样 下面这样一段代码,在函数abc()中,创建了两个变量a, c,并在函数体之外进行alert,想看看有什么事发生: <script> function a ...
- 一个误区(关于javascript的字符串拼接)
前段时间听说了一个问题,说是,javascript中使用+=来拼接字符串会比使用Array的join方法慢几十倍以上,今天在工作间歇,就写了个例 子验证了一下,结果确完全相反,使用+=比join要快( ...
随机推荐
- 接收新信息,在会话中看不到(thread表数据插入/更新失败)
分析原因:收到短信,sms表插入信息,触发器会自动更新thread表,更新失败导致一直有一条未读信息数量显示,但在会话列表中却看不到. (偶现,低概率. 解决方法:接收新信息插入后,立即查询threa ...
- shell学习--grep1
一. grep的来源 通过ex编辑器来查找某个字串: :/pattern/p 其中p是打印,包含字符串pattern的第一行将被打印:如果需要打印包含pattern的所有行,可以这样: :/g/pat ...
- Config文件的读写
using System; using System.Configuration; using System.Xml; namespace COMMON { public class ConfigHe ...
- 面向对象程序设计 第二次作业<1>
Github链接:https://github.com/zora02/object-oriented/tree/master/1001.A%2BB%20Format%20(20) 一.解题 题目 解题 ...
- IE9下WebUploader上传图片跨域问题
作为前端,这一次踩到后台xml配置的坑. IE9下上传图片通过flash插件,一直发送http://192.168.0.8:8888/crossdomain.xml请求,状态码为404,原因是上传图片 ...
- .net 发展史
2002年年初 -Visual Studio 2002 & .Net Framework 1.0 2003年春天 -Visual Studio 2003 & .Net Framewor ...
- Cracking-- 4.7 在一颗二叉树中找两个节点的第一个共同祖先
分别记录从 root 到 node1 的path 到 node2的path,再找其中共同的部分 struct Node{ int val; struct Node *left; struct Node ...
- 第十四章:降维:奇异值分解SVD
- devise 小项目(一)
Devise源于Warden,而warden是一个基于Rack的验证权限gem,不过,使用devise实际并不需要任何关于warden的知识. 如果你之前有一些其他类似的维护验证权限功能的gem的使用 ...
- 04、AngularJS的ng-bind、多个控制器和apply
这篇,讲一下angularjs的ng-bind指令,多个控制器,以及手动触发angularjs的脏检查,我直接把代码贴,顺着代码讲. <!DOCTYPE html> <html> ...