位置：首页>> 网络编程>> JavaScript>> 将各种类型或对象都转变为数组

将各种类型或对象都转变为数组

　来源：Ruby's Louvre　发布时间：2009-12-28 13:19:00　

标签：jquery,bug,数组,对象

jQuery的makeArray有其局限性（1.3.4还有bug），我自己实现了一个，不过涉及N多辅助方法。

早期尝试使用Ext.isIterable，不过它有点小BUG，如放一个函数进去，它会返回undefined，好歹返回false嘛，另对于用户自定义的类数组对象无法检测，残念！不过我的isArrayLike也不完美，自定义的东西随意性太大了，暂时没办法一网打尽……以后慢慢改进！

下面是测试：

<!doctype html><html dir="ltr" lang="zh-CN" > <head id="head"> <meta charset="utf-8"/> <title>toArray函数 by司徒正美</title> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> var dom = {}, _toString = Object.prototype.toString, _slice = Array.prototype.slice; dom.is = function(obj,type) { return _toString.call(obj).match(/^\[object\s(.*)\]$/)[1] === type; } dom.isArray = function (obj) { return dom.is(obj,"Array"); } dom.isNumber = function (obj) { return dom.is(obj,"Number"); } dom.isString = function (obj) { return dom.is(obj,"String"); } dom.isArrayLike = function (obj) {//包括Array if(dom.isArray(obj) || obj.callee) return true; if(dom.is(obj,'NodeList')) return true; if(dom.is(obj,'HTMLCollection')) return true; //不能为字符串,不能为window,具有length属性 if(dom.isNumber(obj.length) && !dom.isString(obj) && !obj.eval){ if(obj.nextNode || obj.item) return true; var n = obj.length - 1 < 0 ? 0 : obj.length - 1 ; //如果是具有数字键或length属性的对象,如jQuery对象 if(obj.hasOwnProperty(n) && obj.hasOwnProperty(0)) return true return false; } return false; } dom.toArray = function (arr) { //把普通对象变成原生数组对象 if(arguments.length === 0 || arr === null){ return []; }else if(arr.callee){//如果是Arguments对象 return _slice.call(arr); }else if(dom.isArray(arr)){//如果Array对象返回一个克隆 return arr.concat(); }else if(dom.isArrayLike(arr)){ try{//jQuery对象，dom对象，el.getElementsByTagName得到的HTMLCollection //与el.childNodes得到的NodeList return _slice.call(arr); }catch(e){//IE用slice处理元素或节点集合会出错，只能慢慢拷贝 var ret = [], i = arr.length; while (i) ret[--i] = arr[i]; //Clone数组 return ret; } }else {//普通函数，单个元素节点，字符串，数字，window对象 return [arr]; } } window.onload = function(){ var assert = document.getElementById("assert"); if(!assert){ assert = document.createElement("ul"); assert.i = 0; var item = document.createElement("li"); document.body.insertBefore(assert,null); } var test = function(str){ var li = item.cloneNode(false); assert.appendChild(li); li.innerHTML = str; assert.i++; li.style.backgroundColor = assert.i％2 === 1? "#00bfff" : "#a9ea00"; } test("测试HTMLCollection") var htmlcollection = document.getElementsByTagName("input"); test("是否类数组 "+dom.isArrayLike(htmlcollection)); test(dom.toArray(htmlcollection)); test("转换成功与否 "+dom.isArray(dom.toArray(htmlcollection))) test("测试NodeList"); var nodelist = document.body.childNodes; test("是否类数组 "+ dom.isArrayLike(nodelist)); test(dom.toArray(nodelist)); test("转换成功与否 "+dom.isArray(dom.toArray(nodelist))) test("测试jQuery对象"); var jq = $("input"); test("是否类数组 "+ dom.isArrayLike(jq)); test("转换成功与否 "+dom.isArray(dom.toArray(jq))) test("测试普通具有数字键与length属性的对象"); var obj = {0:"aa",1:"bb",2:"cc",length:3} test("是否类数组 "+ dom.isArrayLike(obj)); test(dom.toArray(obj)); test("转换成功与否 "+dom.isArray(dom.toArray(obj))) test("测试函数对象"); var fn = function(){}; fn.length = 39; test("是否类数组 "+ dom.isArrayLike(fn)); test(dom.toArray(fn).length); test("转换成功与否 "+dom.isArray(dom.toArray(fn))) test("测试字符串对象"); var str = "司徒正美" test("是否类数组 "+dom.isArrayLike(str)); test(dom.toArray(str).length); test("转换成功与否 "+dom.isArray(dom.toArray(str))) test("测试window对象"); var w = window; test("是否类数组 "+dom.isArrayLike(w)); test(dom.toArray(w).length); test("转换成功与否 "+dom.isArray(dom.toArray(w))) test("测试布尔对象"); var t = true; test(dom.toArray(t).length); test("转换成功与否 "+dom.isArray(dom.toArray(t))) test("测试空对象"); var o = {}; test(dom.toArray(o).length); test("转换成功与否 "+dom.isArray(dom.toArray(o))) test("测试null值"); var nil = null; test(dom.toArray(nil).length); test("转换成功与否 "+dom.isArray(dom.toArray(nil))) test("测试array对象"); var array = [1,2,3,4]; test(dom.toArray(array).length); test("转换成功与否 "+dom.isArray(dom.toArray(array))) } </script> </head> <body> <form> <input type="button" value="提交3"> <input type="button" value="提交2"> <input type="button" value="提交3"> </form> </body></html>

投稿

将各种类型或对象都转变为数组

猜你喜欢