首页 > 代码库 > JavaScript大杂烩7 - 理解内置集合
JavaScript大杂烩7 - 理解内置集合
JavaScript内置了很多对象，简单的类型如String，Number，Boolean (相应的"值类型"拥有相同的方法)，复杂一点的如Function，Object，Array，它们支撑起来JavaScript编程的基石。由于Number与Boolean很简单，这里就不多说了，下面着重介绍其他的内置对象。
万物之源 - Object对象
JavaScript是单根的，唯一的根就是Object对象，这个对象提供了几个还是不错的方法，值得了解一下。
1. hasOwnProperty方法
这个方法我们前面已经遇到了，它用于判断方法的参数代表的成员是不是对象自己定义的，这个方法不会遍历原型链。这个方法是可以修改的，任何子类都可以重写它。例子还是原来那个：
var person = { name: ‘Frank‘, age: 10 }; for(item in person) { if (person.hasOwnProperty(item)){ alert(person[item]); } }
2. toString方法
由于人机交互的通道就是字符串，所以根类中提供这个方法是必然了，这个在前面强制转换里面也讲过了。除了这个方法，还有一个叫toLocaleString的方法，这个方法返回不同的本地化字符串，内置的各个对象都重写了这个方法。在不同的文化中，有些符号是不同的，比如逗号分隔符，数字中的千分位分隔符，小数点等，使用这个方法可以得到本地化的字符串，不过我从来没用过，这里仅仅给出网上的一个例子：
var born = new Date("July 21, 1983 01:15:00"); document.write(born.toLocaleString());
这段代码会在页面上输出： 7/21/2014 5:15:00 PM
3. constructor属性
这个属性返回对象的构造函数，通过这个函数我们能发现一些有趣的现象，看下列代码：
var o = {}; document.writeln(o.constructor); // function Object() { [native code] } var f = function() {}; document.writeln(f.constructor); // function Function() { [native code] } var i = 10; document.writeln(i.constructor); // function Number() { [native code] }
从代码的输出可见，这些对象，包括函数对象自身都是使用函数作为构造函数实现的，所以可以使用new语法创建实例。
这里比较有意思的是i有点不一样，虽然那字面量的方式定义的数字类型应该是number，但是JavaScript内部显然对其成员做了一些处理，使之与使用new Number方式得到的Number对象拥有相同的成员，比如constructor等。
4. isPrototypeOf方法
这个方法用于判断调用者是不是参数指定的对象的原型链上的对象，通过这个方法我们也可以得到一些有用的信息：
var o = {}; document.writeln(Function.prototype.isPrototypeOf(o)); // false document.writeln(Object.prototype.isPrototypeOf(o)); // true var f = function() {}; document.writeln(Function.prototype.isPrototypeOf(f)); // true document.writeln(Object.prototype.isPrototypeOf(f)); // true var i = 10; document.writeln(Function.prototype.isPrototypeOf(i)); // false document.writeln(Object.prototype.isPrototypeOf(i)); // false var io = new Number(10); document.writeln(Function.prototype.isPrototypeOf(io)); // false document.writeln(Object.prototype.isPrototypeOf(io)); // true
从页面的输出可以看出：
1). 字面量定义的number,string,boolean的这些"值类型"的原型链上不包括Object对象的原型，所以严格来说，它们不是对象，它们是特殊处理后的类型。而通过new出来的包装类型显然是对象。
2). 我们定义的函数的原型链上既包含Function对象的原型，也包含Object对象的原型的，说明函数是从对象继承的。
沿着这个思路寻找下去，我们还能从其他的方法，比如propertyIsEnumerable，valueof等发现很多有意思的信息，不过这里就到这里了，有兴趣的同学可以继续向前挖掘。
前面我们已经说过了，Object是一个集合对象，它可以作为通用的字典集合来使用，这里就不再多说了。下面看看另外一个超级集合对象。
超级集合 - Array对象
每个语言都提供了字典，数组，队列，堆栈等常用集合，JavaScript也不例外，只不过是以一种与别的语言截然相反的方式，别的语言尽量按照面向对象的基本原则"单一职责原则(对象功能要单一，这样容易扩展和维护)"去设计语言，但是JavaScript偏偏把这些集合糅合到了一起：字典由对象兼任了，队列与堆栈的功能由数组Array对象提供。于是，Array对象变成了JavaScript中唯一名正言顺的集合，它一个对象身兼数职，可以当数组使用，可以当队列使用，甚至可以当堆栈来使用。
1. 当做数组的Array
var arr = [‘Frank‘, ‘Dong‘]; // 比较神奇的地方 arr[3] = ‘JavaScript‘; for(var i = 0, len = arr.length; i < len; i++) { alert(arr[i]); }
数组通过[]访问，这个最正常不过了，不过JavaScript中实现的显然是动态的数组，不仅可以访问现有的值，还可以动态添加数据。
这里最神奇的就是arr[3]那种访问超出最大index值的情况，别的语言早就抛异常了，但是arr淡定的在脱节的地方填充了undefined。
2. 当做堆栈的Array
堆栈的特性是"先进后出"，这是通过push与pop方法实现的：
var arr = [‘Frank‘, ‘Dong‘]; arr.push(‘C#‘, ‘JavaScript‘); alert(arr.pop()); alert(arr.length);
push方法一次可以添加任意数量的元素到集合末尾，修改集合的length值，并返回修改后的集合长度。
pop方法则移除集合最后一项，修改集合的length值，然后返回移出的元素。
3. 当做队列的Array
队列的最醒目特征就是"先进先出"，这个是通过push与shift方法实现的：
var arr = [‘Frank‘, ‘Dong‘]; arr.push(‘C#‘, ‘JavaScript‘); alert(arr.shift()); alert(arr.length);
上面的代码很简洁，但是需要说明的是：
1). shift方法移除集合第一个元素，修改集合的length值，然后返回移出的元素。
2). 可以使用unshift和pop方法，模拟反向队列，即在集合的前端添加元素，从集合末端移出元素，看个例子：
var arr = [‘Frank‘, ‘Dong‘]; arr.unshift(‘C#‘, ‘JavaScript‘); alert(arr.pop()); alert(arr.length);
这里unshift方法同样可以一次添加多个元素。
4. 集合通用的功能
针对集合中的元素，Array对象提供了很多实用的功能：
1). 集合排序：sort方法
这个方法可以对集合中的现有元素排序，默认情况下是按照升序排列的，看最简单的例子：
var arr = [2, 1, 3, 4, 5]; arr.sort(); alert(arr); var arrString = [‘A‘, ‘a‘, ‘B‘, ‘b‘]; arrString.sort(); alert(arrString);
如果要实现自定义的排序方式，需要提供sort的参数，就是自定义排序的方法，看例子：
// 实现升序排列：等同于JavaScript的默认实现 function compareAscendingly(value1,value2){ if(value1 < value2) { return -1; } else if(value1 > value2) { return 1; } else { return 0; } } // 实现降序排列 function compareDescendingly(value1,value2){ if(value1 < value2) { return 1; } else if(value1 > value2) { return -1; } else { return 0; } } var arr = [2, 1, 3, 4, 5]; arr.sort(compareDescendingly); alert(arr); var arrString = [‘A‘, ‘a‘, ‘B‘, ‘b‘]; arrString.sort(compareDescendingly); alert(arrString);
上面的例子实现了数值和字符串的降序排列，当然了对于数值对象，也可以使用更加方便的方式：
// 实现升序排列：等同于JavaScript的默认实现 function compareAscendingly(value1, value2){ return value1 - value2; } // 实现降序排列 function compareDescendingly(value1, value2){ return value2 - value1; } var arr = [2, 1, 3, 4, 5]; arr.sort(compareDescendingly); alert(arr);
对于自定义的对象复杂一点的对象，这里也只需要实现自己的compare逻辑，然后传给sort方法就可以，相当的简单：
function Person(name, age) { this.name = name; this.age = age; // 重写toString方法 this.toString = function() { return name + ‘ ‘ + age; }; } // 实现按照年龄升序排列 function compareAscendingly(p1, p2){ return p1.age - p2.age; } var arr = [new Person(‘Frank‘, 20), new Person(‘Dong‘, 10)]; arr.sort(compareAscendingly); alert(arr);
2). 集合翻转： reverse方法
这个方法很简单，翻转当前集合中的元素，看一个小例子：
function Person(name, age) { this.name = name; this.age = age; // 重写toString方法 this.toString = function() { return name + ‘ ‘ + age; }; } var arr = [new Person(‘Frank‘, 20), new Person(‘Dong‘, 10)]; arr.reverse(); alert(arr);
3). 集合转成字符串
Array已近重写了toString方法，该方法会调用集合中每个元素的toSyting()方法，然后以","做分隔输出，例如：
function Person(name, age) { this.name = name; this.age = age; // 重写toString方法 this.toString = function() { return name + ‘ ‘ + age; }; } var arr = [new Person(‘Frank‘, 20), new Person(‘Dong‘, 10)]; alert(arr.toString()); // 等同于：alert(arr);
除了toString方法外，如果想自定义输出的格式(其实主要是自定义分隔符)，则可以使用join方法：
var ps = ["Frank","Dong"]; alert(ps.join("-"));
4). 返回集合的子集合
这个功能是使用slice方法实现的，这个方法能够返回当前集合的一个子集合。
它可以接收一个或两个参数，即要返回元素的起始和结束位置。当只传入一个参数时，返回该参数指定位置开始到当前集合末尾的所有元素。当传入两个参数时，则返回起始位置到结束位置的所有元素——不包括结束位置的元素。这个操作不影响原始集合，会生成新的集合。看个例子：
var ps = [‘Frank‘, ‘Dong‘, ‘C#‘, ‘JavaScript‘]; var ps1 = ps.slice(1); var ps2 = ps.slice(1,2); alert(ps1); // Dong,C#,JavaScript alert(ps2); // Dong
5). 连接多个集合
这个功能可以使用concat()实现，这个方法把参数中的集合连接到一起然后创建一个新的集合返回，看例子：
var ps1 = [‘Frank‘, ‘Dong‘]; var ps2 = [‘C#‘]; var ps3 = [‘JavaScript‘]; // 连接集合 var ps = ps1.concat(ps2, ps3); alert(ps); // Frank,Dong,C#,JavaScript // 注意ps1本身并没有改变 alert(ps1); // Frank,Dong // 充当添加元素的角色，只不过会创建新的集合 alert(ps1.concat(‘Java‘, ‘C++‘));
6). 删除元素并添加新元素
splice是个奇怪的方法，不过功能还是挺强大的。splice方法向/从数组中添加/删除项目，然后返回被删除的项目。功能似乎与slice方法相似，不过请注意，splice方法与slice方法的作用是不同的，splice方法会直接对数组进行修改，这个函数参数比较复杂，看一下声明：
arrayObject.splice(index,howmany,item1,.....,itemX) index参数：必需。整数，规定添加/删除项目的位置，使用负数可从集合结尾处规定位置开始操作。 howmany参数：必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1, ..., itemX参数：可选。向集合添加的新项目。 这个函数的返回值是修改后的数组(如果有的话)。
看一个小例子：
var ps = [‘Frank‘, ‘Dong‘, ‘C#‘, ‘JavaScript‘]; ps.splice(1, 1, ‘DDD‘); alert(ps); // Frank,DDD,C#,JavaScript ps.splice(1, 1); alert(ps); // Frank,C#,JavaScript
7). 集合length属性的特殊性
Array的length属性我们前面已经使用过多次的，不过也许大家会很奇怪，这个属性不是只读的，可以通过设置这个属性，来完成一些特殊的任务。比如清空一个集合的方式可以是：
var ps = [‘Frank‘, ‘Dong‘]; // 最佳方式： 创新新的空集合，之前的集合如果没有引用在指向它将等待垃圾回收。 // 据有关人员测试，此种方式效率最高。 ps = []; alert(ps); var ps1 = [‘Frank‘, ‘Dong‘]; // 最奇怪的方式：简单粗暴但是有效，很多的类库都在使用 ps1.length = 0; alert(ps); var ps2 = [‘Frank‘, ‘Dong‘]; // 无法评价splice函数了，功能太多了 ps2.splice(0, ps.length); alert(ps);
到此，JavaScript中的集合就总结到此了，简单说了，JavaScript内置对象中Object和Array可以演化成各种常用的集合来完成特定的功能。
最佳参考：
W3C的教程是无法替代的，相当详实，内置对象的所有方法都能找到详尽的说明：http://www.w3school.com.cn/jsref/jsref_obj_array.asp
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。