JavaScript对象及继承教程

一、   类与对象

在   JavaScript   世界里，关于面向对象第一个要澄清的概念就是类。对象都是有类来定义的，通过类来创建对象就是我们所熟悉的实例化。然而，在   JavaScript   中别没有真正的类，对象的定义就是对象自身。而   ECMA-262   干脆把这种妥协的方式称作为对象的调和剂。为了方便理解，我通常把这个发挥类的作用的调和剂称为类。

二、   内置对象

1 、   Array 类

数组在   js   中是非常常用的一种数据结构，由于其灵活性和易用性，合理的使用数组可以帮助我们更好的实现相应的功能。

让我们先看   Array   对象的创建吧

第一种： var arr = new Array(10);

该方法在实际的使用当中并不那么的实用，与很多编译型语言不同，   js   数组的长度是可变的，不但增强了灵活性，还给我们有了更多好的选择。

第二种： var arr = new Array("one","two","three");

使用   new   方式创建数组的方法一般多为这两者，当然也可以使用   new Array()   创建一个空的数组对象。通常情况下，我推荐如下的方法

第三种： var arr = ["one","two","three"];

使用数组的字面量方式创建一个数组对象，不但简洁易读，而且几乎完全等价于使用   new   方式创建数组对象的效果。数组对象有很多好用的方法，接下来我们就一起看看这个数组对象的强大功能吧。

首先要介绍的是   push   方法，学过数据结构的朋友都知道   push   意味着什么，没错，他的出现让数组能够实现栈的数据结构（同时需要配合   pop   方法）。   push   方法帮助我们紧凑的添加数组元素。前面提到 js 中的数组是长度是可变的，则我们可以添加元素。既然可以通过   arr[length] = newValue;   来给   arr   添加一个新元素并放置于数组尾。更好的办法就是使用   push   方法。   arr.push(newValue);   怎么样，使用他比你还要通过数组长度来赋新值方便多了吧。在这里有一点需要注意。请看下面的代码：

var arr = [];

arr[4] = 5;

alert(arr.length == 5);

alert(arr); //alert : ,,,,5

当我们需要给指定数组位置赋予指定的值的时候，这种赋值就显得十分有用了，比如在用于装箱排序的时候。

pop   方法则是实现与   push   相反的作用，返回数组的最后一个元素，并出栈。

var arr = [1,2,3,4,5];

var ele = arr.pop();

alert(ele == 5);

alert(arr.length == 4);

数组对象的   toString   和   valueOf   方法比较人性化的重写了，它的实现是把每一项都调用   toString   方法，然后用半角逗号 (,) 连接每一项。那么：

var arr = [1,2,3,4,5];

alert(arr);//output:1,2,3,4,5

toLocaleString   方法在这里不做详细说明了，他的效果与   toString   方法类似，只是每项调用   toLocateString   方法。

如果你想使用个性化的分隔符来显示数组元素，那么   join   方法可能会更加的适合。比如：

var city = [" 上海 "," 北京 "," 天津 "," 重庆 "," 深圳 "];

alert(city.join("|"));//output: 上海 | 北京 | 天津 | 重庆 | 深圳

由此可见   join   是把数组元素转换为一个字符串。在介绍字符串的时候我们将再次看到   join   方法的使用。

concat   方法和   slice   方法是又一对好用的方法，这两个方法的特殊之处在于   String   对象也拥有他们。当我们希望给一个数组添加多个数组元素的时候，使用   push   可能就显得有些冗余和复杂了，而且也会让   coding   变得不那么有意思了。好在我们有   concat   方法，该方法将其参数们按序加入数组元素中。如：

var arr = [1,2,3,4,5];

arr = arr.concat(6,7,8,9);

alert(arr.length == 9);

注意，   concat   并不修改数组对象本身，而是将数组元素与   concat   方法的数组元素合并后返回。所以需要给数组元素进行赋值运算才行。

slice   方法则是从数组对象中返回一个子数组。该子数组是从   slice   方法的第一个参数所指位置至第二个参数所指的位置。这是一个半开半闭区间   [a,b)   。如：

var arr = [1,2,3,4,5];

var arr1 = arr.slice(1,3);

alert(arr1);   //output:2,3

alert(arr);   //output:1,2,3,4,5

好了，   slice   和   concat   方法一样不是修改数组对象本身。同时参数 1 ， 3 表示从位置 1 到位置 3 的半开半闭区间的子数组。

刚才讨论了后进先出的栈操作，现在我们来看看先进先出的队列操作吧。进列使用   push   方法没有问题，那么出列呢。是   shift   ，他删除数组对象的第一个元素并返回：

var arr = [1,2,3,4,5];

var ele = arr.shift();

alert(ele); //output:1

alert(arr.length);//output:4

另外一个还有一个方法，叫   unshift   ，他将新元素插入数组对象的第一项，究其功能与   shift   是相反的操作。

sort   方法很灵活，使用好了，他可以给数组元素以任意你想要的排序方式来进行排序。因为   sort   方法接收一个匿名函数（其实，它同样可以接收一个非匿名的函数，但是通常不推荐为此而创建一个这样的命名函数，除非该函数可重用）作为自己的排序的条件。比如：

Object.prototype.toString = function(){

var str = '';

for(var item in this) {

str += item + ":" + this[item] + ",";

}

return str.length?str.substr(0,str.length-1):str;

};

var arr = [{key:3,value:"three"},{key:1,value:"one"},{key:2,value:"two"}];

arr.sort(function(a,b){

return a.key - b.key;

});

alert(arr);//output:key:1,value:one,key:2,value:two,key:3,value:three

我们先不去纠结   Object.prototype.toString   方法，他的左右就是将对象遍历使之可以输出为键值对格式字符串，在介绍原型链的时候会再次提到。我们可以看到   sort   方法通过这个匿名方法让我们可以根据   key   属性来进行排序。那就让我们来看看这个匿名方法吧。

function(a,b) {

return a.key - b.key;

};

可以看到，这个方法接收 2 个参数，然后对参数的自身或某个属性进行比较，然后返回比较结果，他们的比较结果与排序对应关系如下：

如果   paramA - paramB > 0,return  正数   ，则   b   排在   a   的前面

如果   paramA - paramB < 0,return  负数   ，则   b   排在   a   的后面

如果   paramA - paramB = 0,return 0   ，则顺序不变。

上面的实现是顺序排序，那么   倒序   呢？对，   return paramB - paramA;

reverse   方法可以将数组对象反转。他和   sort   方法一样是修改数组对象内部元素顺序的。

最后我们看看   splice   方法，他是替换和删除数组对象元素的方法。根据参数的改变而拥有不同的实现结果。   splice(pos,count[,insertParams]);pos   参数是删除元素的第一个项的位置，   count   参数是删除元素的个数，当为 0 时则不删除（不删除还要这个方法干嘛，别着急，往下看），   insertParams   则是参数列表，这些参数是即将插入的元素集合。插入的位置为   pos   。那么就出现了以下几种情况了。

1 、   insertParams   忽略时，该方法就是删除数组元素

2 、   当   count   参数为 0 时，该方法将只是将   insertParams   插入到   pos   位置

3 、   当   count   参数不为 0 且   insertParams   不忽略时，该方法就是删除   pos   位置开始的   count   个元素，并替换   insertParams   参数集合。

2 、   Math 类

我们花了很大的篇幅来介绍数组类，我要再次强调一点，这个类只是为了介绍方便强加于它的一个名字，实际上他们也只是对象。而非真正的类。

Math   类的使用范围相对狭窄，因为他作为一个数学计算的类，而非一个数据结构类，但是我们也看到了   Math.random   以及各种取整等常用方法。因此我们不妨花些时间来看看他们，但是如果你对此兴趣不大，那么看完   random   方法之后就可以跳到下一节去，以后用到的时候再翻手册就可以了。

Math   通常是一个“静态”类，因为没有人会实例化一个   Math   对象，而是直接使用其“静态”方法，有些资料直接称它为   Math   对象，在这里我们不妨称它为“静态”类吧。

首先我必须介绍   random   方法，因为他常用且太有用了。在制造随机事件的时候他总是不可或缺，同样在防止缓存上他也显得很有用处。   Math.random   方法返回的是一个   0 到 1   之间的开区间浮点数，即   (0,1)   ，他的使用非常简单，唯一需要注意的是，当我们取整的时候对   floor   和   ceil   方法的筛选时需要谨慎，前者使得   random   间接转换为前闭后开区间，而后者则是前开后闭区间。假如我们现在需要一个取 1-100 的随机数，那么有如下的两种常用解决方案

方法一： Math.ceil(Math.random*100);

方法二： Math.floor(Math.random*100)+1;

ceil   方法和   floor   方法都是用来取整的数学方法，根据单词含义我们可以理解，前者是向上取整，而后者则是向下取整。

当我们从一个连续的数组对象中随机选择一个数组元素时，我们可以借助   random   轻松的来帮我们挑选：

["ipad","iphone","ipod touch","ipod nano","macbook"][Math.ceil(Math.random()*4)];

这个例子中，我直接使用的是数组字面量，一开始你可能会觉得费解或者不易理解，当你深入以后你会发现原来   JavaScript   是如此的方便、简洁、灵活。

前面我们介绍了   ceil   和   floor   方法的取整，那么当我们想要接近舍入时呢，我们可以使用   Math.round   方法，他在取整时根据数值进行靠近取整。比如   Math.round(5.4)   返回的是   5   。那么如果   Math.round(5.5)   呢，答案是   6   而不是   5   。关于这点需要有所了解。好吧我承认我较真了，但是知道了他有什么坏处呢。

当我们想从   2   个数中取得较小或者较大的数的时候怎么做呢？

if(a>b) {

return a;

} else {

return b;

}

我们多虑了。   Math   提供了   Math.max   和   Math.min   方法来帮助我们解决这个问题。

Math   还有一大堆的“静态”方法和属性。在这里我就不一一列举了，当我们要进行数学计算的时候不妨去查查手册。

3 、   String 类

字符串对象的使用频率恐怕比数组对象有过之而无不及，为什么我要放到后面来说呢，其实是因为对于字符串，我们要说的更多，而可扩展的方法和工具函数也更加丰富。我们一起先来看看   String   类本身吧。

创建一个字符串对象有以下几种方法：

方法一： var str = new String("Hello World");

方法二： var str = String("Hello World");

方法三： var str = "Hello World";

和数组对象一样，我推荐大家使用最后一种方法，及字符串字面量。关于是否有   new   的区别，周爱民老师的博客中有过很详细的解释，同时，如果你一直读下去，在介绍自定义对象的时候也会提到   new   运算符。

String   对象有且只有一个属性   length   ，他返回字符串的长度，在这里我们必须要弄明白   JavaScript   是   unicode   编码，那么汉字和英文都当作一个字符长度来处理，之所以提到这个是因为曾经遇到不止一位朋友在论坛提问这个问题，呵呵，动手的必要性啊。那么如果我们非要把汉字当作   2   个字符长度来计算呢？这就带来了我们第一个自定义方法。

String.prototype.getLength = function(isSplit){

if(isSplit) {

return this.replace(/[^/u0000-/u00FF]/g,"tt").length;

} 

else {

return this.length;

}

};

该方法通过传递一个   Boolean   类型的参数，如果为真则将非半角字符、数字、英文字母分割为   2   个长度来求长度，不用担心这个分割，他并不会修改字符串对象本身。如果为假，则直接返回   length   属性值。由于介绍方法不是根据方法的字符排列顺序而来，如果作为字典，我想还是   w3school   更合适，因为我是根据作用的不同和关联性来进行介绍。   ok   , 介绍完了   length   属性，我们看看字符串查找吧。

indexOf   和   lastIndexOf   方法。

这两个方法从是从字符串中查找一个字符或字符子串，区别在于查找方向，前者是从位置   0   处开始查找，并返回第一个查找到的位置，后者从位置   length-1   处开始查找，并返回第一个查找到的位置。如果查找不到呢，返回   -1   。例如

var str = " 了解面向对象编程和基于对象编程是一个基础理论 ";

alert(str.indexOf(" 对象 ")); //output:4

alert(str.lastIndexOf(" 对象 "));//output:11

alert(str.indexOf(" 过程 "));//output:-1

从输出的结果我可以得到以下结论：

1 、   字符位置是从   0   开始索引

2 、   即使是从后往前查找，返回位置时也还是位置   0   开始计算

3 、   当在字符串中索引不到该子串时，返回   -1   值。

charAt   和   charCodeAt   方法根据一个位置索引来返回字符，其中前者是返回字符本身，后者返回字符编码。我们简单的看个例子后结束他们：

var str = " 了解面向对象编程和基于对象编程是一个基础理论 ";

alert(str.charAt(5)); //output: 象

alert(str.charCodeAt(5));//output:35937

接下来轮到   slice   ，   substr   和   substring   方法，说实话很多熟悉   JavaScript   的程序员也经常会混淆两者的用法，并非是我夸张，而是   substring   和很多后台语言的   substring   方法区别很大的哦。先看看   slice   方法。

slice(start[,end])   方法需要提供至少一个整数参数，作用是返回从   start   的位置开始到   end   位置的字符子串。接下来几句话请仔细看清楚了，以防造成曲解，当参数   start   为负数的时候他将从字符串尾部开始计算，当   end   没有指定时，   end   即为字符串的结尾。如果为负数呢，他也要从字符串尾部开始计算。所以当我们需要一个字符串的之后   3   个字符时只需   slice(-3);   由此可见，合理的使用负数让我们的程序变得简单。但是在此之前，请确保自己了解了他的作用。

据我所知的编程语言中，有很大一部分的   substring   方法设计为   substring(beginposition,length)   ，而在   JavaScript   中正好也有这么一个方法，可惜真正与之对应的是   substr   方法。   substr(pos[,length])   方法中，如果   pos   为负数，则与   slice   的负数解释相同，   length   省略时与   slice   的   end   省略也相同。

到了   substring   方法，   substring(from[,to]);   从定义上就可以看到，后一个参数是一个位置，而非长度，因此他更像   slice   ，但是与之有一点重要的区别，那就是   substring   方法不包含   to   位置。即是一个半开半闭区间。另一个区别是   substring   不支持负向位置，如果第一个参数为负数，那么就是从位置   0   开始。后一个位置如果是负数，则返回空串，如果第二个参数小于第一个参数，那么同样返回空串，但是如果相等呢，还是空串，因为这是一个半开半闭区间   [from ， to)   。

另外几个查找的方法   :match   、   search   将在后面介绍正则表达式和   RegExp   类的时候详细介绍。替换方法   replace   也将在介绍正则表达式时介绍。另外一对有用的方法是   toLowerCase   和   toUpperCase   。他们就是将字符串进行大小写转换的。

字符串操作的另一个领悟的连接字符串。字符串对象是长度不可变的，仔细回顾下之前所有的方法中没有一个是修改对象本身的方法。关于这点将于稍后一个思考题单独会展开来介绍。现在你要做的就是知道这点。字符串对象的连接方法常见的三种，第一种是使用   concat   方法，在介绍   Array   类的时候我们也见过这个方法，他们其实是一样的东西，连接字符串为一个新串，另外字符串对象重载了   +   号运算符，用来简化连接操作，因此   "abc"+"de" == "abcde";   还有一个方法是借助   Array   对象中的   push   和   join   方法连接字符串。

var arr = [];

for(var i = 0; i < 10; i++) {  
arr.push("");

}

arr = arr.join("");

这种方法很类似与   C#   中的   StringBuilder   的   append   和   ToString   方法，而好处也很类似。不要忘了在   join   的方法中加上参数 "" 哦，否则的话，多出的逗号可能就有点事与愿违了。为了方便操作，我们通常还会扩展一个方法来模拟   printf （ in c ）   和   format （ in c#) ：  
function formatString()  {

var args = arguments;

if(args.length > 1) {

return args[0].replace(new RegExp("/{([0-" + (args.length-2).toString() + "])/}","g"),function(s,m){

return args[+m+1];

});

}

}

首先我要说明，这个方法与原来的方法相比丑陋了许多，但是更容易理解，其次，这个方法有自身的   bug   存在，即当参数过多（ >10 ）时，正则表达式将不能正确运转。因此我们换个解决方案来解决这个   bug   （感谢 zswang   的仔细 , 下面的解决方案也是仿照 zswang 的。）

function formatString(str,params) {

return str.replace(//{(/d+)/}/g,function(s,m){

return params[+m];

});

}

alert(formatString("{0} is {1} old",['JeeChang',25]));

JavaScript   中没有一个   trim   方法，让我们很是苦恼，没有例外，我们自己写一个   trim   方法吧

String.prototype.trim = function(which){

var pattern = {

"left":"^//s*",

"right":"//s*$",

"both":"^//s*|//s*$"

}

return this.replace(new RegExp(pattern[which],'g'),"");

};

字符串的操作一直都不仅限于此，比如字符串截取往往还有这样的需求，即我们在浏览器显示的时候往往需要根据全半角来截断字符串，但是最后一个字符是全角的话则需要全部截断。看上去一定很复杂吧。没关系我们来添加这个方法。

String.prototype.splitCount = function(count){

var str = this;

var signs = ['~','!','|','`',':','$','#','&','*','@','.','?'];

var sign = '';

for(var i = 0; i < signs.length; i++) {

if(str.indexOf(signs[i]) < 0) {

sign = signs[i];

break;

}

}

str = str.replace(/[^/u0000-/u00FF]/g,sign + sign);

var ig = count;

for(var i = 0; i < count; i++) {

if(str[i] == sign)

ig-=0.5;

}

return this.substr(0,Math.floor(ig));

};

这个方法很可惜，替换字符不够全面，如果恰巧这些字符都存在于其中，那么结果就很可悲了。所以这个方法不是那么的可靠。其实可以通过初步判断总字符长度来截取掉后面的字符串然后再查找是否有替换字符。这样概率就相对小些。

介绍完了数组对象和字符串对象之后，我们看下面一个例子：

var a = "abc";

var b = "abc";

alert(a.valueOf() === b.valueOf);

alert(a.toString() === b.toString());

alert(a.valueOf() == b.valueOf());

var arr1 = ['a','b','c'];

var arr2 = ['a','b','c'];

alert(arr1.toString() === arr2.toString());

alert(arr1.valueOf() === arr2.valueOf());

请问输出结果是什么呢？

4 、   Date 类

日期类恐怕是我见过最无奈的 JavaScript 内置类（对象）。因为他的浏览器不同表现，时间日期的操作处理都显得那么的不友好。幸好， JavaScript 固有的机制可以让我们自己来解决这些问题。不过在此之前我们还是先大致了解下他的一些方法和属性。

创建一个日期对象可以有这些方法

方法一： var d = new Date(ms);//ms 代表从 1970.1.1 凌晨 0 点的毫秒数

方法二： var d = new Date(year,month[,day,hour,minute,second,millisecond]);

方法三： var d = new Date("localDateString");// 这里不是那么的通用。 2011/5/5 格式相对通用

如果我们需要创建一个当前时间的日期对象。直接 new Date() 用无参数的构造函数即可。当然我们不能忽略这个 new ，前面提到 String 和 Array 可以省略，然而这里千万不能这样做。因为 Date() 的结果是浏览器实现的一个日期对象的 toString 返回的表示日期的字符串。故此，这里两者不能混用。

日期对象的方法大致分为获取和设置日期时间的某一（几）个部分。获取方法相对好用一些，然后设置方法则显得不那么够用。这里有几个需要拿出来先说说。

getDate/setDate 。该方法操作的是天数，而非日期值。这个还是有点不大直观的。

getDay/setDay 。该方法操作的是周数，序数从 0 开始，即周日的值是 0 。

getMonth/setMonth 。该方法操作的是月数没有疑问，但是月数是从 0 开始。

getFullYear/setFullYear 。我通常建议用这组方法来代替直观的 getYear/setYear 。

toDateString/toTimeString== 输出日期的方法。但是并不是那么的好用。

接下来，让我们一步一步来打造更适合自己的一套方法。

首先，我们来格式化输出

var conf = {

syslang : "cn"   // 设置系统语言

};

Date.prototype.toFormatString = function(format) {

var weeks = {};

weeks['cn'] = [' 星期日 ',' 星期一 ',' 星期二 ',' 星期三 ',' 星期四 ',' 星期五 ',' 星期六 '];

weeks['en'] = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

var self = this;

var fix = {

'yyyy':self.getFullYear(),

'MM':self.getMonth()+1,

'dd':self.getDate(),

'wk':weeks[conf.syslang][self.getDay()],

'hh':self.getHours(),

'min':self.getMinutes(),

'ss':self.getSeconds()

};

return format.replace(/[a-zA-Z]+/g,function(m){

return fix[m];

});

};

嗯，这个方法多了个全局的配置对象，但是这个不是必须的，只是在这里提示大家如果实现个性化定制，但是如果是自己的项目使用，我更建议减少代码（把 en 或 cn 去掉）来打造适合自己项目的精简代码。该方法的使用一目了然，在这里也不多解释了。

接下来是日期的操作，第一组是日期的加减。熟悉 .net 的朋友都知道 AddXXX 的一组方法，因此我们也可以打造一组这样的代码，在此我只列举一个，有需要的可以自己实现其他的。其实这套方法可以使用伪泛型的方式将 Add 方法组并到一个方法。但是我更愿意用一目了然的方法名来提供。

Date.prototype.addMonth = function(n){

var month = this.getMonth();

this.setMonth(month+n);

};

怎么样，很简单吧。不用担心溢出（ 13 月）或者负月份（ -1 月）会造成什么不良后果，日期对象会自己为了通过调整年数来得到合适的结果。

接下来是日期比较。纯粹的日期比较不是问题，因为 getTime 获取毫秒数之后进行加减操作即可。然而如果要是比较相差的天数怎么办呢。其实也简单。那就是相差的毫秒数换算到天数即可

Date.prototype.compareTime = function(time) {

var ticks = time.getTime() - this.getTime();

return Math.floor(ticks/(1000*60*60*24));

}

至于比较周数同理，但是月数和年数呢？对不起，考虑到闰年和大小月等问题，这个方法比较复杂，在这里就不贴出来了，如果您有兴趣不妨尝试着自己写写看。

5 、   RegExp 类

现在要介绍的内容不完全与 RegExp 类有关，他几乎包含了正则表达式的大部分的基本知识点和含义，但是我无意扩展出来说，如果对此感兴趣，推荐些教程和好书。以下推荐绝非随机、随意。

《精通正则表达式》，该书的作者和译者都对正则表达式有十分深厚的功底和理解，同时该书也是我目前为止见到的最好的教材，而且不用担心你的英文不好，该书的中文版翻译质量绝对一流。不过，这本书正如书名一样，是给对正则有兴趣，且真心的希望有所精通的人看的。

blog.csdn.net/lxcnn 。该博客绝对是当今中国数一数二的关于正则方面的精品，博主的造诣绝不含糊，且文笔和内容也十分值得大家一看的。

《正则表达式傻瓜书》，该书的作者即《精通》一书的译者，有幸翻阅了该书的样章，书中的内容深浅合宜，语言精炼，加之作者深厚的功底，书的质量不言而喻。虽然该书尚未出版，但是绝对的值得期待。

《正则表达式必知必会》，该书短小易懂，适合不大希望精通于此，仅限于能用即可的朋友阅读，该书中有许多实例，很多内容大家甚至可以拿来就用，只是受制于其篇幅，该书不大适合进阶阅读。

如果你对以上的珍品不感兴趣，那么下面的内容希望你能耐心的看下去，我会尽我所能来让你有所收获。

正则表达式通常用于查找、验证、替换字符串内容。其便捷和高效致使它渐渐的为大家所接收和喜爱，我想很多看到这里的朋友可能会有这样的感受：“每次用到的时候我都会翻一遍正则的简明教程或手册，但是总是记不住，而且当有一天翻自己所写的正则时，会看不懂。”。那么没关系，记不住是因为你没有深入的去了解和思考它，我不会穷举每一个元字符和语法结构，尽量让它变得有那么一点意思。

案例一、验证一个字符串由 8 到 16 位数字、英文字母、下划线组成。

这个验证是最基本且最常用的，验证的首要条件是限制死首和尾，即正则必须匹配整个字符串，从起始字符一直到结尾字符。先看正则

/   ^   [   /d   a-zA-Z_]   {8,16}   $   /

这个正则中没有任何的空白，两个 / 之间的内容就是正则表达式，在 JavaScript 中我们有两个方式创建正则表达式对象，上面的是字面量对象，另外一个是构造函数方法，即

var reg = new RegExp("^[//da-zA-Z_]{8,16}$","mode");  

关于模式，有 g 、 i 、 m 三个， i 表示忽略大小写， g 和 m 会在后面深入解析，因为简单的说个一两句不会太容易理解。

两者效果几乎等效，而字面量方式简洁的许多，细心的你一定看到后一种方法中 /d 前多了一个 / 。原因是字符串中 /x 会被当作转义字符进行转义。

接下来看蓝色部分， ^ 和 $ 符号分别代表字符串的开始和字符串的结尾，但是在 m 模式的时候他们的含义会有不同，在 m 模式下，他们分别代表行首和行尾。

[] 之间的是字符集合，这相当于字符的 switch ， [^...] 则是匹配非集合。这个很好理解，在你看过的任何一篇教程中都不会漏下它，不过你一定想知道匹配不等于某个字符串的字符串该怎么办，答案是否定环视（断言、预查，以下统一称为环视），一会在介绍环视时，我们再来介绍。

{8,16} 表示一个范围量词，他表示匹配之前的分组或字符重复多少次。与之相对应的还有 +,*,?,{m,},{,n} 等。

案例二、验证一个有数字、字母组成的 8-12 位字符串。必须包含至少一个数字和字母。

这个与案例一有点区别，那就是最后一句的限制，所以我们需要引入一个判断逻辑，那就是环视，先引入环视的概念和解释吧 ^_^ 。

环视从方向来说分为逆序和顺序，从逻辑来说分为肯定和否定。不过 JavaScript 正则表达式不支持逆序的环视，只支持顺序肯定环视、顺序否定环视。环视有个特点就是不占据所匹配字符，所以他会预先进行一次匹配，然后匹配完了之后会回溯会环视匹配之前的位置。让我们看刚才的案例吧。首先进行 2 次否定环视，分别排除掉纯粹由数字或由字母组成的字符串。然后再把案例一的正则表达式放进来就可以了。如下

/^(?!/d+$)(?!/D+$)[a-zA-Z/d]{8,12}$/

假设字符串为 abcdefg123 。那么匹配的过程如下。首先 ^ 匹配字符串开始，接着是第一个否定环视， (?!/d+$) 他从 'a' 开始匹配， /d+ 即不能匹配，匹配失败，否定环视成功，接下来匹配 (?!/D+$) ， /D 表示非数字，那么从 a-g 都可以匹配，接下来是 1 ， /D+ 匹配完成，如果没有 $ 那么这个匹配其实也算成功，但是 /D+ 匹配完成之后有一个 $ ，那么 $ 匹配 1 失败。否定环视成功，此时字符串位置回到 a 之前。开始后面的匹配。 [a-zA-Z/d]{8,12} 匹配 abcdefg123 成功，具体过程忽略，然后把句柄交给 $ ，匹配成功。此时整个匹配成功。因为篇幅和表述能力问题，关于环视的解释不够清晰，如果至此你依然没有弄清。那么请访问过客的相关博客，真的很棒（   blog.csdn.net/lxcnn   ）。

好吧，我们现在倒回来看一些日常应用中的一些误解导致的错误应用。

1 、   包含字母数字的字符串判断使用 /w 是不对的。因为 /w<==>[a-zA-Z0-9_] ，所以使用时请注意

2 、   JavaScript 中不支持逆序环视。无论是肯定还是否定，因此如果其他语言的程序员在使用 js 正则的时候千万要注意

3 、   . 元字符在字符组中是普通字符，而不解释为任意字符的元字符，同时 . 元字符不匹配 /n （换行符）， JavaScript 中没有单行模式以使 . 匹配 /n 。

4 、   在使用 test 、 exec 时一定要弄清楚 g 模式之后再使用。因为一旦使用了 g 模式，那么会保存全局的 lastIndex ，在你下一次进行匹配时是从 lastIndex 开始，而非字符串首。（感谢过客之前对此的解释和指导。有兴趣的可以看这个帖子，看过客的解释   http://topic.csdn.net/u/20110117/18/e2423564-856b-4f46-8879-0c382a3e1c7a.html?93335   ）。在这里我把其中的例子发出来，让大家有个了解，请看：

var    arr   =   [ 1 , 2 , 3 , 4 , 5 ];  

var    reg   =   /^/d+$/g ;  

for  (  var    i   =   0 ;   i   <   arr . length ; i ++){  

    alert ( reg . test ( arr [ i ]));  

}   

 

5 、   js 正则不支持命名分组，所以后向引用的时候要格外注意分组的序号。

6 、   js 正则不支持固话分组和占有优先量词。所以如果可以的话， [^xx]+ 取代 .+? 来使用，一方面可以提高效率，另一方面可以减少错误的匹配结果。

7 、   正则效率上， new RegExp() 与字面量方式创建没有区别，而使用变量保存一个正则对象和循环中使用同一个正则表达式字面量效率上也没区别（至少在大部分的浏览器上是这样的）。

8 、   在使用 new RegExp() 创建正则的时候，切记转义问题。 new RegExp("//d") 才等价于 //d/ ，使用 new RegExp("/d") 就会得到错误的正则。

9 、   回溯和环视是 2 个非常重要的概念，同时也要弄清楚位置和字符的区别。时间和能力的原因，推荐移步过客的博客（   http://blog.csdn.net/lxcnn/archive/2009/06/28/4304754.aspx   和   http://blog.csdn.net/lxcnn/archive/2009/06/28/4304651.aspx   ）

关于正则目前仅仅只提这些，因为后面准备了一个实战博客，那个时候会详细介绍几个实用的实例以及推导过程。下面看看在介绍字符串的时候落下的几个方法。 replace/match/search ， OK ，我们来一个一个看吧

replace 方法是提供强大的替换功能，他不仅能够替换简单的文本。还能使用一个替换函数来进行更复杂的替换，请看下面的代码：

var    str   =    "dream on, dream on, dream on,dream yourself a dream come true.dream on, dream on, dream on,"  ;  

var    reg   =   /dream/g ;  

var    i   =   0 ;  

alert ( str . replace ( reg ,  function  ( m ){  

     return    m   +   ( i ++). toString ();  

}));   

该方法通过一个匿名方法，将查找到的 dream 单词进行替换，该替换会给后面的 dream 单词添加一个序列。你可能会想到下面的方法：

var    str   =    "dream on, dream on, dream on,dream yourself a dream come true.dream on, dream on, dream on,"  ;  

var    reg   =   /(dream)/g ;  

var    i   =   0 ;  

alert ( str . replace ( reg ,  "$1"    +   i ++));   

可惜很遗憾你运行一下就会发现每次都是 0 。这点在任何可以使用委托方法（匿名方法、函数指针 == ）进行替换的语言中都是一样的，这个和替换机制是有关的。

replace 的时候非正则替换有个缺陷，就是只会替换第一个。相当于没有加上 g 模式的正则。所以使用的时候一定要注意，当然在替换的时候不要忘了 g 模式哟。

match 则是查找匹配的方法，他同样支持正则表达式作为查找模式，不过有一点需要注意，如果使用全局检索（ g 模式）的时候，返回的是一个数组，该数组不包括分组信息。而如果不使用全局检索（ g 模式）的时候，返回的是第一个匹配的文本，以及各分组的匹配内容。比如下面的代码：

var    str   =    "dream on, dream on, dream on,dream yourself a dream come true.dream on, dream on, dream on,"  ;  

var    reg   =   /(dream)[^,]+/ ;  

alert ( str . match ( reg ));  // 返回数组，数组内容为  dream on,dream2  个元素。   

reg   =   /(dream)[^,]+/g ;  

alert ( str . match ( reg ));  // 返回数组，数组内容为  dream on,dream on,dream on,dream yourself a dream come true.dream on, dream on,dream on  几个元素。

最后一个是 search ，他接收一个正则对象，他返回 search 到的第一个匹配文本的起始位置，该方法不受 g 模式的影响。

var    str   =    "dream on, dream on, dream on,dream yourself a dream come true.dream on, dream on, dream on,"  ;  

reg   =   /dream/g ;  

alert ( str . search ( reg ));  

alert ( str . search ( reg ));  

alert ( str . search ( reg ));   

该方法三次 alert 出的都是 0 。其实还有一个 split 方法也支持正则。不过它很简单，在这里不再提了。

RegExp 有以下的属性需要记住， lastIndex 是最后一次匹配的位置（还记得 g 模式么）， source 是正则表达式的源文本，而 $1 、 $+ 、 $$ 等意味著什么请可查看下手册，这里就不一一列举了。

6 、   Global 对象

这里没有用类这个名词，是因为连这个关键字实际上都不存在，在 JavaScript 中所有的函数都是对象的方法，所以你看到的所有内置的“函数”其实都是全局对象的方法。

编码、解码方法，对 uri 进行编码是为了使防乱码的一个有效措施，很多后台语言也都有相对应的解码、编码方法。   encodeURI/encodeURIComponent/decodeURI/decodeURIComponent 。

如果不能区分其中的区别，那么用后者代替前者吧。

escape/unescape 基本上不推荐使用，用上面的方法来取代吧。

类型转换的方法也是比较常用的方法。比如 Number 、 String 方法，但是看似简单的 2 个方法还有真点需要补充的。 Number 方法不能取代 parseInt 和 parseFloat 方法，因为 Number 方法只能把真正的数字转换为数字（该方法用来验证一个输入是否是数字很好吧）。先看这 4 句代码。

alert ( Number (  '01x'  ));  //NaN   

alert ( Number (  '011'  ));  //11   

alert ( String ( 0X11 ));  //17   

alert ( String ( 011 ));  //9    

其实关于这点我在之前的博客提到过，现在再拿出来解释下。第一个如果用 parseInt 会得到 1 ，而用 Number 强转将返回 NaN 。千万要使用 isNaN 来判断是否成功转换，而不是 Number('01x').constructor == Number 。因为 NaN 是个数字类型，但是他的意思是 Not a Number 。第二个返回的是 11 ，看上去很正常啊？可是 011 往往可能意味着是 8 进制的数哦。所以字符串形式的 011 和数字型的 011 可不是一个意思哦。所以在使用数字字面量的时候注意前置 0 的使用。第三行返回的是 17 ，为什么？刚才提到过 0X11 是 16 进制的数字，那么他翻译为 17 就意味着转换为 string 类型前会强转为 10 进制数，第三行同理。那么第三行想输出 11 怎么办呢，使用它： (0x11).toString('16') ， 8 进制也一样哦。所以转换的时候要了解清楚先。

最后一个要说的是最有争议的 eval 方法。他的功能十分强大，但是缺点也异常明显，代码不易读、性能低下、安全性降低。所以一般情况下可以用 setTimeout 、 setInterval 、数组等方法来替代。注意在处理 json 的时候要把 json 包括在一个括号里哦： eval('(' + jsondata + ')');