JavaScript基础篇（3)之Object、Function等引用类型_javascript技巧

Object类型

1、通过构造函数来创建
2、通过字面量表示法来创建对象

Array类型

同样Array也有两种创建方式:
如果我们想要打印数组中所有的值，直接打印数组的变量名就可以：
往数组添值：
栈方法、队列方法：
关于数组的排序：
数组的一些操作方法：
查找位置方法
迭代方法

归并方法

Date类型

RegExp类型

Function类型

三种表示法：

方法重载
函数内部属性（arguments 和 this）

基本包装类型

浏览器的内置对象
URI 编码方法

总结

我们在《一步步学习javascript基础篇（1）:基本概念》中简单的介绍了五种基本数据类型Undefined、Null、Boolean、Number和String。今天我们主要介绍下复杂数据类型（即引用数据类型）

Object类型

我们用的最多的引用类型就属object类型了，一般用来存储和传输数据是再好不过的。然，它的两种创建方式我们是否了解呢？

1、通过构造函数来创建

如： var obj = new Object();

在js中的引用类型有个非常灵活的用法，可以动态的附加属性和赋值。

如：

2、通过字面量表示法来创建对象

现在大家用得比较多的就是字面量表示法来创建对象了。

如：

和上面的效果是等效的。通过这样方式创建感觉结构更加的清晰，更加有封装的感觉。：）

我们还可以这样用

如：

如：

是不是感觉很强大很灵活呢？我在访问属性的时候一般都是点出来，但是还有另外的方式。

如：(我们可以使用中括号的形式来访问属性值)

例：

Array类型

除了object之外，应该属数组用的最多了。下面来罗列下常见用法。

同样Array也有两种创建方式:

上面两种方式是等效的，我们可以直接通过下标的方式来访问数组： alert(arr[2]); 。

如果我们想要打印数组中所有的值，直接打印数组的变量名就可以：

例：

例：

上面直接打印arr2，我们发现默认都是以逗号分隔的。那么有时候，我们不想用逗号怎么办呢。那你可能可以用到join方法

往数组添值：

我们可以直接： arr2[4] = 7; arr2[5] = 8;

还有一种更加巧妙地添值方式： arr2[arr2.length] = 9; arr2[arr2.length] = 10; ，下标length刚好是数组最大长度的下一个，添加值后length再次动态自动累计。

栈方法、队列方法：

什么是栈？（后进先出）。什么是队列？（先进先出），我们怎样用数组来模仿这种数据结构的访问方式？下面通过一张图来解释下数组对象提供的四个方法。

从图可以看出：shift和push、unshift和pop的组合可以实现栈的数据结构访问，shitf和pop、shift和unshift的组合可以实现队列的数据机构访问方式。 这里需要注意：pop和shift取数据的同时，数组中对于的值也同时移除了。

例：

关于数组的排序：

关于数组的排序有sort（正）reverse（反）。

先看个例子，大家猜想下结果：

然结果并不是我们想要的：

为什么会这样呢？因为sort不会直接比较数字类型，而已转为string了再做的比较。那么我们想要比较数字怎办？我们可以往sort传函数，例：

有人会问o1和o2是怎么来的？这是sort函数规定的。这样说大家可能不好接受。下面，我们自己来模拟下sort的排序，大家就明白了。

当然，我们模拟的并不是那么的好，大概就是这么个意思。

反序就简单了：（直接reverse()就可以了）

数组的一些操作方法：
concat创建一个新的副本，并合并传进来的参数

slice创建一个新的副本，取数组的位置数据

splice会改变原数组数据，可实现对数组的删、插和替换

查找位置方法

indexOf()和 lastIndexOf()，就是查找在数组中的位置，和string中的对应方法差不多。

迭代方法

 every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true。
 filter()：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
 forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。
 map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
 some()：对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。

以上方法都不会修改数组中的包含的值。

如：

其中。forEach和map区别不大，只是一个有返回值，一个没有。实际中我们用forEach比较多，下面我们模拟forEach的实现。

归并方法

reduce()和 reduceRight()，这两个方法是比较有意思的，以前还真没接触过。先看例子，再解释：

也是个循环，第一次执行 prev 是 1， cur 是 2。第二次， prev 是 3（1 加 2 的结果）， cur 是 3（数组的第三项）。这个过程会持续到把数组中的每一项都访问一遍，最后返回结果。reduceRight只是方向相反。

下面我们来模拟：

Date类型

我们很多时候需要测试一个函数的性能，可以取它的执行进过时间：

下面列出一些常用方法

getTime() 返回表示日期的毫秒数；与valueOf()方法返回的值相同
setTime(毫秒) 以毫秒数设置日期，会改变整个日期
getFullYear() 取得4位数的年份（如2007而非仅07）
getUTCFullYear() 返回UTC日期的4位数年份
setFullYear(年) 设置日期的年份。传入的年份值必须是4位数字（如2007而非仅07）
setUTCFullYear(年) 设置UTC日期的年份。传入的年份值必须是4位数字（如2007而非仅07）
getMonth() 返回日期中的月份，其中0表示一月， 11表示十二月
getUTCMonth() 返回UTC日期中的月份，其中0表示一月， 11表示十二月
setMonth(月) 设置日期的月份。传入的月份值必须大于0，超过11则增加年份
setUTCMonth(月) 设置UTC日期的月份。传入的月份值必须大于0，超过11则增加年份
getDate() 返回日期月份中的天数（1到31）
getUTCDate() 返回UTC日期月份中的天数（1到31）
setDate(日) 设置日期月份中的天数。如果传入的值超过了该月中应有的天数，则增加月份
setUTCDate(日) 设置UTC日期月份中的天数。如果传入的值超过了该月中应有的天数，则增加月份
getDay() 返回日期中星期的星期几（其中0表示星期日， 6表示星期六）
getUTCDay() 返回UTC日期中星期的星期几（其中0表示星期日， 6表示星期六）
getHours() 返回日期中的小时数（0到23）
getUTCHours() 返回UTC日期中的小时数（0到23）
setHours(时) 设置日期中的小时数。传入的值超过了23则增加月份中的天数
setUTCHours(时) 设置UTC日期中的小时数。传入的值超过了23则增加月份中的天数
getMinutes() 返回日期中的分钟数（0到59）
getUTCMinutes() 返回UTC日期中的分钟数（0到59）
setMinutes(分) 设置日期中的分钟数。传入的值超过59则增加小时数
setUTCMinutes(分) 设置UTC日期中的分钟数。传入的值超过59则增加小时数
getSeconds() 返回日期中的秒数（0到59）
getUTCSeconds() 返回UTC日期中的秒数（0到59）
setSeconds(秒) 设置日期中的秒数。传入的值超过了59会增加分钟数
setUTCSeconds(秒) 设置UTC日期中的秒数。传入的值超过了59会增加分钟数
getMilliseconds() 返回日期中的毫秒数
getUTCMilliseconds() 返回UTC日期中的毫秒数
setMilliseconds(毫秒) 设置日期中的毫秒数
setUTCMilliseconds(毫秒) 设置UTC日期中的毫秒数
getTimezoneOffset() 返回本地时间与UTC时间相差的分钟数。例如，美国东部标准时间返回300。在某地进入夏令时的情况下，这个值会有所变化

RegExp类型

两种表示法：

后面的参数代表模式，如：g：表示全局（global）模式、i：表示不区分大小写（case-insensitive）模式、m：表示多行（multiline）模式

关于正则了解不是很清楚，后期有机会在单独学习整理正则这块。

Function类型

三种表示法：

以上三种都是可行的，不过我们平时用得比较多的是第一种，第二种也有用，第三种用得比较少，但是最能看出function的本质，其实就是一个Function对象的实例。

我们来看看1和2的区别。

因为js解析器是从上到下的解析，在执行sum2的时候还没有定义，所以报异常。但是sum1比较特殊，是申明式的。在执行sum1之前就会”预解析“（函数声明提升）。相当于把sun1的定义提到了最上面(放到源代码树的顶部)。

方法重载

严格来说，js中是没有方法重载的，不过我们可以根据参数的个数来模拟。（还有，js中函数的形参我们是不确定类型的）

例：
上面并没有出现我们预料中的结果，因为第二次定义的sun1不是实现的重载，而是直接覆盖了第一次的定义。下面，我们就简单的模拟实现方法重载：

函数内部属性（arguments 和 this）

arguments:类数组对象，包含着传入函数中的所有参数。下面通过arguments实现上面的模拟重载:

我们在第一篇博文里面有提一个问题：

六、

不过，并没有同学去解答，有人可能觉得太简单，或是不乐意懒得去解答。这题的答案是：

为什么会是这个答案呢？好像和我们预料中的不一样。下面我们图解：

我们可能发现了一个问题，那就是第4步调用的已经不是所在的这个函数本身了（也就是没有递归了），这不是我们想要的。我们要的是，不管外面怎么改变，4处都代表所在的函数指针。那么我们可以用到arguments的callee方法，例：

函数的另一个内部属性this：

首先我们看看这样一个问题：

为什么会有不同的结果？我们记住一句话，一般情况"哪个对象点出来的方法，this就是哪个对象"。上面的例子其实等效于：

虽然"哪个对象点出来的方法，this就是哪个对象"，但是有时候我们不想要这样的结果，我们不想用对象点或者对象点出了想this是另外的对象。那么我们可以使用call：

传如的第一个参数，直接赋值给函数里面的this。和call类似的有apply，区别看下面：

基本包装类型

在这个系列的第一篇中有个问题：

四、

为什么会是这样的结果？因为str1.name2设置值的时候访问的是string的包装类，然后再次访问str1.name2之前就把之前那个包装类已经被销毁。

为什么要有包装类？

因为可以像操作引用对象一样操作基本数据类型，如： var s1 = "some text"; var s2 = s1.substring(2);

哪些基本类型有包装类?

Boolean、Number和String类型。

浏览器的内置对象

Global（其实也就是我们平时用的window）和Math（一些计算功能）

URI 编码方法

这是一个js中最最最强大的函数了，相对与一个独立的解析器。如我文中的操作实例就是用这个函数实现的。

如：

效果图：

当然，你还的引入jqeruy问题，博客园中默认就已经引入了。所以，你不需要再次引入，你测试的话是看不到alert弹框的，因为博客园禁掉了。我的是用的jquery ui中的Dialog对话框做的。