接触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的坑坑洼洼真不少,一边学习一边总结吧。

转载于:https://www.cnblogs.com/dolphinX/p/3232330.html

JavaScript 误区相关推荐

  1. Javascript 常见使用误区

    Javascript常见使用误区 1)比较运算符: var x = 0; if (x = 10) // true if (x = 0) // falsevar x = 10; var y = &quo ...

  2. JavaScript要点 (二) 使用误区

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

  3. javascript 的参数有长度限制吗?一个细节引起的误区

    一个普通的javascrip函数,只有一个入口参数 function  test(info) ... {   alert(info); } 页面用是aspx代码生成,调用test函数的入口参数可能是一 ...

  4. 【JavaScript基础】js中关于声明提前的几个误区

    声明提前: 在程序正式执行之前,都会将所有的var声明的变量提前到开始位置,集中创建,而赋值留在原地. 例如这样一段代码 console.log(a) var a = 100; console.log ...

  5. p8工程师告诉你软件测试的三大误区,你误了几个?

    纵观软件测试行业的发展史,相信很多人都知道它是伴随着"软件"而出现的. 在早期软件开发的过程中,"测试"的含义其实是比较狭窄的,测试这一行为也完全由开发人员执行 ...

  6. 《你不知道的JavaScript》整理(六)——强制类型转换

    JavaScript中通常分为两种类型转换,"隐式强制类型转换"(implicit coercion)和"显式强制类型转换"(explicit coercion ...

  7. javascript基本类型及类型转换

    每种语言都有自己的基本类型,javascript也不例外.在javascript中有五大基本类型,分别是number,string,boolean,null,undefined.其他不属于这五种基本类 ...

  8. 使用jQuery的9个误区

    jQuery是如此容易使用以至于我们有时候忘记了CSS的存在.我们在使用CSS时,几乎不去考虑性能,因为它已经是快得不值得再去做什么优化上的努力.但现实世界中,JQuery会导致令开发人员发疯的性能问 ...

  9. 深入理解JavaScript定时机制

    容易欺骗别人感情的JavaScript定时器 本文地址: http://www.laruence.com/2009/09/23/1089.html 转载文章 JavaScript的setTimeout ...

最新文章

  1. gitlab windows安装_gitlab pages之gitlab-runner 安装(windows)
  2. EnjoyingSoft之Mule ESB开发教程第六篇:Data Transform - 数据转换
  3. 计算机考试400,400作文:电脑考试
  4. 【Machine Learning 一】监督学习与无监督学习
  5. mysql修改失败,mysql修改数据失败(是我的代码有问题吗)怎么解决?
  6. 【Qt教程】1.4 - Qt5第一个控件 按钮QPushButton 指定父对象
  7. html+link+点击次数,使用正则表达式,取得点击次数,函数抽离(示例代码)
  8. Linux安装log4cpp
  9. 融云通讯服务器,融云IM即时通讯功能接入和部署方式有哪些_如何收费_企业服务汇...
  10. Daily Scrum Meeting 11.13
  11. linux 下dump文件放在那里,怎么查看dump文件目录
  12. 手撕BP网络,你值得拥有!
  13. Alfred 有多强悍,我写了个一键上传图片的 workflow 来告诉你
  14. echart简单使用
  15. 瑞星误杀 技术缺失还是道德缺失?
  16. ValueError: Expected parameter scale of distribution Normal to satisfy the constraint GreaterThan
  17. [转帖]老狼:你知道哪些关于 Windows 10 的骚操作?
  18. 从数据分析的角度看旅行青蛙还可以这么玩。。。
  19. 子程序说明文档翻译——USDFLD
  20. 【行业前瞻】超高清视频应用在未来的发展预测

热门文章

  1. php对象复制,PHP 对象复制 - 对象复制 - phpStudy
  2. mysql配置优化ya_mysql性能调优工具之mytop
  3. php自动跳转函数,迅睿CMS 重写控制网站自动跳转函数
  4. 闰年判断_小学数学,平年和闰年怎么判断,百年不闰很多人都容易忘
  5. dbnetlib不存在或拒绝访问_idou老师教你学Istio 16:如何用 Istio 实现微服务间的访问控制...
  6. QTCreator中字符编码问题以及WINDOWS API A/W两种版本的说明
  7. AT4 more about the sphere
  8. 卷积神经网络--可视化中间激活
  9. java 1.7 环境变量_安装JDK1.8之后又安装1.7出现的环境变量问题
  10. oracle的sql口令,Oracle数据库的SYS口令是什么?