Java程序员学习JavaScript（05）对象

1、一切都是对象

在Java世界里，可以说一切都是对象，在JavaScript的世界里，也可以这么说：一切都是对象！定义一个普通对象如下：

但是某些对象还是和其他对象不太一样。下面是一些常用的数据和对象类型，我们用来 typeof 操作符获取对象的类型并输出，它总是返回一个字符串：

可见，number、string、boolean、function和undefined是一些特殊对象的名字，有别于其他object类型。特别注意null的类型是object，Array的类型也是object，如果我们用 typeof 将无法区分出null、Array和通常意义上的空object——{}。

2、包装对象

熟悉Java的小伙伴肯定很清楚int和Integer的关系，一个是基础类型，一个是包装类型。

JavaScript其实也类似，像数字（number），布尔类型（boolean），字符串（string）等，除了基础的对象，JavaScript还提供了包装对象。

没错，在JavaScript中，字符串也区分string类型和它的包装类型。包装对象用new创建：

虽然包装对象看上去和原来的值一模一样，显示出来也是一模一样，但他们的类型已经变为object了！所以，包装对象和原始值用===比较会返回false：

所以郑重劝在座各位一下：不要使用包装对象！

如果我们在使用Number、Boolean和String时，没有写new会发生什么情况？如下：

此时，Number()、Boolean和String()被当做普通函数，把任何类型的数据转换为number、boolean和string类型。

总结一下，有这么几条规则需要遵守：

1、不要使用new Number()、new Boolean()、new String()创建包装对象；

2、用parseInt()或parseFloat()来转换任意类型到number；

3、用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；

4、通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {…}；

5、typeof操作符可以判断出number、boolean、string、function和undefined；

6、判断Array要使用Array.isArray(arr)；

7、判断null请使用myVar === null；

8、判断某个全局变量是否存在用typeof window.myVar === ‘undefined’；

9、函数内部判断某个变量是否存在用typeof myVar === ‘undefined’。

任何对象都有toString()方法吗？答案是不是！null和undefined就没有！确实如此，这两个特殊值要除外，虽然null还伪装成了object类型。

还有一个同学指出，number对象调用toString()报SyntaxError：

所以数字类型使用String()更好：

强行使用toString() 也可以，不过要用两个点调用：

所以 尽量使用 String(123) 吧！

3、Date对象

在Java中，定义一个日期类型通常是 Date now = new Date(); 。

在JavaScript中非常类似，获取系统当前时间： var now = new Date(); 。

来看一下日期类型的大概属性：

注意，当前时间是浏览器从本机操作系统获取的时间，所以不一定准确，因为用户可以把当前时间设定为任何值。

如果要创建一个指定日期和时间的Date对象，可以用：

你可能观察到了一个非常非常坑爹的地方，就是JavaScript的月份范围用整数表示是0~11，0表示一月，1表示二月……，所以要表示6月，我们传入的得是5！唉，真是。。。
也就是说，JavaScript的Date对象月份值从0开始，牢记0=1月，1=2月，2=3月，……，11=12月。

第二种创建一个指定日期和时间的方法是解析一个符合ISO 8601格式的字符串：

但它返回的不是Date对象，而是一个时间戳。不过有时间戳就可以很容易地把它转换为一个Date：

注意：使用Date.parse()时传入的字符串使用实际月份01-12，转换为Date对象后getMonth()获取的月份值为0~11。

时间数据不可忽略的就是时区，Date对象表示的时间总是按浏览器所在时区显示的，不过我们既可以显示本地时间，也可以显示调整后的UTC时间：

那么在JavaScript中如何进行时区转换呢？实际上，只要我们传递的是一个number类型的时间戳，我们就不用关心时区转换。任何浏览器都可以把一个时间戳正确转换为本地时间。

时间戳是个什么东西？时间戳是一个自增的整数，它表示从1970年1月1日零时整的GMT时区开始的那一刻，到现在的毫秒数。假设浏览器所在电脑的时间是准确的，那么世界上无论哪个时区的电脑，它们此刻产生的时间戳数字都是一样的，所以，时间戳可以精确地表示一个时刻，并且与时区无关。

所以，我们只需要传递时间戳，或者把时间戳从数据库里读出来，再让JavaScript自动转换为当地时间就可以了。

要获取当前时间戳，可以用 Date.now ：

但是由于有些老的浏览器，比如老的IE，没有now()方法，所以，可以用下面的写法：

4、正则表达式

正则表达式通常被用来检索、替换那些符合某个模式(规则)的字符串文本。

字符串是编程时涉及到的最多的一种数据结构，对字符串进行操作的需求几乎无处不在。比如判断一个字符串是否是合法的Email地址，虽然可以编程提取@前后的子串，再分别判断是否是单词和域名，但这样做不但麻烦，而且代码难以复用。

正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。

所以我们判断一个字符串是否是合法的Email的方法是：

1、创建一个匹配Email的正则表达式；

2、用该正则表达式去匹配用户的输入来判断是否合法。

因为正则表达式也是用字符串表示的，所以，我们要首先了解如何用字符来描述字符。

在正则表达式中，如果直接给出字符，就是精确匹配。用 \d 可以匹配一个数字， \w 可以匹配一个字母或数字，所以：

• ‘00\d’可以匹配’007’，‘008’，‘009’等任意一个以 ‘00’ 开头的三位数字，第三位必须是数字，所以无法匹配’00A’；
• ‘\d\d\d’可以匹配’010’，‘123’，‘777’ 等任意三个数字；
• ‘\w\w’可以匹配’js’，‘cc’ 等任意两个字母；

一个点，.可以匹配任意字符，所以：

'js.‘可以匹配’jsp’、‘jss’、‘js6’、‘js!’ 等等。

以上匹配的都是固定长度，并且有规则的字符串，如果要匹配变长的字符，在正则表达式中，用*表示任意个字符（包括0个），用+表示至少一个字符，用?表示0个或1个字符，用{n}表示n个字符，用{n,m}表示n-m个字符：

来看一个复杂的例子：\d{3}\s+\d{3,8}。

我们来从左到右解读一下：

1、\d{3}表示匹配3个数字，例如’010’；

2、\s可以匹配一个空格（也包括Tab等空白符），所以\s+表示至少有一个空格，例如匹配' '，'\t\t'等；

3、\d{3,8}表示3-8个数字，例如’1234567’。

综合起来，上面的正则表达式可以匹配以任意个空格隔开的带区号的电话号码。

如果要匹配'010-12345'这样的号码呢？由于'-'是特殊字符，在正则表达式中，要用'\'转义，所以，上面的正则是\d{3}\-\d{3,8}。

但是，仍然无法匹配'010 - 12345'，因为带有空格。所以我们需要更复杂的匹配方式，例如： \d{3}\s*\-\s*\d{3,8}

上面只是举了几个简单的例子，要做更精确地匹配，可以用[]表示范围，下面是一些更精确的更复杂的匹配：

• 中括号[]表示任选其中一个，[0-9a-zA-Z\_]可以匹配一个数字、小写字母、大写字母或者下划线；
• [0-9a-zA-Z\_]+可以匹配至少由一个数字、字母或者下划线组成的字符串，比如'a100'，'0_Z'，'js2015'等等；
• [a-zA-Z\_\$][0-9a-zA-Z\_\$]*可以匹配由字母或下划线、$开头，后接任意个由一个数字、字母或者下划线、$组成的字符串，也就是JavaScript允许的变量名的规则；
• [a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19}更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。
• A|B可以匹配A或B，所以(J|j)ava(S|s)cript可以匹配'JavaScript'、'Javascript'、'javaScript'或者'javascript'。
• ^表示行的开头，^\d表示必须以数字开头。
• $表示行的结束，\d$表示必须以数字结束。

有了上面的一点点知识，我们可以试着使用一下JavaScript中的正则表达式对象，比如匹配三位任意数字，使用new方式创建正则表达式对象：

var reg = new RegExp('\d\d\d');

但是上面的写法有一个问题，如果使用这种写法，因为字符串的转义问题，字符串的中如果要包含一个 \ ，则需要写成两个 \\ 。因此正确写法如下：

var reg = new RegExp('\\d\\d\\d');

RegExp对象的test()方法用于测试给定的字符串是否符合条件，代码示例如下：

你可能注意到了，上面的验证中，'1234' 也可以匹配 '\d\d\d'，这种方式不太严谨，如果想要严谨的规则，严谨匹配三位数字，可以在开头加上 ^ ，在结尾加上 $ 。加上开头和结尾后，会非常严谨的验证匹配，示例如下：

除了上面这种写法，还有第二种写法，就是直接把正则表达式写出来，不需要创建对象，在两边分别加上开头（/）和结尾（/），也就是说，开头和结尾需要加上斜杠：

var reg2 = /\d\d\d/;

两种写法都是可以的，第二种写法的示例代码如下：

同样，这种写法可以修改为比较严谨的一种写法，以（/^）开头，以（$/）结尾。其实就是开头和结尾分别加上^和$ 即可：

可以看到，不严谨的写法只要字符串中包含正则中的规则就返回true，严谨的必须严格符合才行。

再看一个复杂的正则表达式：

var reg3 = /^\d{3}\-\d{3,8}$/;

开头是三位数字，接着是一个横线，最后是三到八位数字，现实中可以根据类似的规则判断座机号：

4.1、切分字符串

正则表达式也可以用来切分字符串。用正则表达式切分字符串比用固定的字符更灵活，请看正常的切分代码：

但是如果规则要求连续的空格要按照整体处理算一个的话，这种方式就无法识别连续的空格，用正则表达式试试（注意，这种灵活切分的方式不能使用严谨的正则表达式）：

无论多少个空格都可以正常分割。如果不单单是一个或者多个空格，而是根据一个或者多个空格或逗号，试试：

再加入分号试试：

可以看到，使用正则表达式，可以让split方法不仅仅能根据一个字符，还能根据一个复杂的字符串进行切分。

4.2、分组

除了简单地判断是否匹配之外，正则表达式还有提取子串的强大功能。用()表示的就是要提取的分组（Group）。比如把上面的正则表达式：

var reg3 = /^\d{3}\-\d{3,8}$/;

中间的横线 \- 去掉，再把第一部分的三个数字和第二部分的3到8个数字用小括号括起来：

^(\d{3})-(\d{3,8})$

上面这个正则，分别定义了两个分组，可以直接从匹配的字符串中提取出区号和本地号码，示例如下：

上面的例子中，使用正则表达式，进行分组，并提取子串，这个正则表达式调用了 exec 这个方法，这个方法返回了一个结果，长度是3，其中 execResult[0] 表示被提取的字符串，execResult[1] 表示分组的第一个子串，execResult[2] 表示分组的第二个子串。

再看一个例子，给定一个字符串，其中有三个子串是字母，其它都是数字，提取3处字母子串，字符串是：

var str = "123abccc456defff789xyzzz000";

正则表达式是：

var regGroup = /^\d*([a-zA-Z]+)\d*([a-zA-Z]+)\d*([a-zA-Z]+)\d*$/;

这时候猜测结果，要提取的地方有三个，会返回四个结果，第一个是被提取的完整字符串，其余三个分别是三个子串：

exec()方法在匹配失败时返回null。
提取子串非常有用，尤其是在一些固定格式的字符串中，比如日期，电话，邮箱等等。

但是有些时候，用正则表达式也无法做到完全验证，比如识别日期，有的月份有30天，有的有31天，有的有20天，所以这种时候就需要程序的辅助。

4.3、贪婪匹配

需要特别指出的是，正则匹配默认是贪婪匹配，也就是匹配尽可能多的字符。举例如下，匹配出数字后面的0：

由于\d+采用贪婪匹配，直接把包括后面的0在内的所有数字全部匹配了，结果0*只能匹配空字符串了。

必须让\d+采用非贪婪匹配（也就是尽可能少匹配），才能把后面的0匹配出来，加个?就可以让\d+采用非贪婪匹配：

4.4、全局搜索

JavaScript的正则表达式还有几个特殊的标志，最常用的是 g ，表示全局匹配，把 标识符放在正则表达式后面，比如精确搜索字符串中的 test 字符串，以下是两种等价的写法，表示搜索正则表达式：

//以下两个等价
var reg1 = /test/g;
var reg2 = new RegExp('test', 'g');

来看一下搜索效果：

上面要搜索的正则是一个准确的test字符串，被搜索的字符串str中包含两个test，执行第一次exec()方法后，返回的结果可以理解为一个数组对象，属性 res1[0] 表示返回的子串，属性 res1['index'] 表示匹配到的子字符串开始的位置，再来精简一下输出：

全局匹配可以多次执行exec()方法来搜索一个匹配的字符串。当我们指定g标志后，每次运行exec()，正则表达式本身会更新lastIndex属性，表示上次匹配到的最后索引，直到结束仍没有匹配到，就会返回null。

全局匹配类似搜索，因此不能使用/^...$/，那样只会最多匹配一次。

正则表达式还可以指定 i 标志，表示忽略大小写，m标志，表示执行多行匹配：

5、JSON对象

JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。

在JSON出现之前，大家一直用XML来传递数据。因为XML是一种纯文本格式，所以它适合在网络上交换数据。XML本身不算复杂，但是，加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后，任何正常的软件开发人员碰到XML都会感觉头大了，最后大家发现，即使你努力钻研几个月，也未必搞得清楚XML的规范。

终于，在2002年的一天，道格拉斯·克罗克福特（Douglas Crockford）同学为了拯救深陷水深火热同时又被某几个巨型软件企业长期愚弄的软件工程师，发明了JSON这种超轻量级的数据交换格式。

道格拉斯同学长期担任雅虎的高级架构师，自然钟情于JavaScript。他设计的JSON实际上是JavaScript的一个子集。在JSON中，一共就这么几种数据类型：

• number：和JavaScript的number完全一致；
• boolean：就是JavaScript的true或false；
• string：就是JavaScript的string；
• null：就是JavaScript的null；
• array：就是JavaScript的Array表示方式——[]；
• object：就是JavaScript的{ … }表示方式。

以及上面的任意组合。

并且，JSON还定死了字符集必须是UTF-8，表示多语言就没有问题了。为了统一解析，JSON的字符串规定必须用双引号""，Object的键也必须用双引号""。

由于JSON非常简单，很快就风靡Web世界，并且成为ECMA标准。几乎所有编程语言都有解析JSON的库，而在JavaScript中，我们可以直接使用JSON，因为JavaScript内置了JSON的解析。

5.1、序列化

把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串，这样才能够通过网络传递给其他计算机。例如：

要输出得好看一些，可以加上参数，按缩进输出：

stringify 方法中，第二个参数用于控制如何筛选对象的键值，如果我们只想输出指定的属性，可以传入Array：

stringify 方法中第二个参数，还可以传入一个函数，这样对象的每个键值对都会被函数先处理：

如果我们还想要精确控制如何序列化对象，可以给对象定义一个toJSONString()的方法，直接返回JSON应该序列化的数据：

5.2、反序列化

如果我们收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象了。例如：

JSON.parse()还可以接收一个函数，用来转换解析出的属性：