javascript进行数组追加方法小结

最新推荐文章于 2024-08-14 19:06:18 发布

javaPie

最新推荐文章于 2024-08-14 19:06:18 发布

阅读量2k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

175 篇文章 0 订阅

订阅专栏

javascript进行数组追加方法小结

投稿：shichen2014 字体：[增加减小] 类型：转载时间：2014-06-16 我要评论

javascript中给数组加元素是一个非常简单的问题,javascript本身就提供了大量这类函数，我们可以使用js自带函数快速给数组增加元素了，本文就javascript进行数组追加的方法做出如下小结。

id="iframeu2261530_0" src="http://pos.baidu.com/scom?sz=680x200&rdid=2261530&dc=2&di=u2261530&dri=0&dis=0&dai=2&ps=0x0&coa=at%3D3%26rsi0%3D680%26rsi1%3D200%26pat%3D6%26tn%3DbaiduCustNativeAD%26rss1%3D%2523FFFFFF%26conBW%3D1%26adp%3D1%26ptt%3D0%26titFF%3D%2525E5%2525BE%2525AE%2525E8%2525BD%2525AF%2525E9%25259B%252585%2525E9%2525BB%252591%26titFS%3D14%26rss2%3D%2523000000%26titSU%3D0%26ptbg%3D90%26piw%3D0%26pih%3D0%26ptp%3D0&dcb=BAIDU_SSP_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1463732477230&ti=javascript%E8%BF%9B%E8%A1%8C%E6%95%B0%E7%BB%84%E8%BF%BD%E5%8A%A0%E6%96%B9%E6%B3%95%E5%B0%8F%E7%BB%93_javascript%E6%8A%80%E5%B7%A7_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&ari=1&dbv=2&drs=1&pcs=1065x569&pss=1065x5185&cfv=0&cpl=4&chi=1&cce=true&cec=GBK&tlm=1462728896&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F51118.htm&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3D21T9CtzCAMKnWhRTHjK-DuQVYxsI0u10vNv56xmYSrHGXr9KrbndoUIHUntmCj4Y%26wd%3D%26eqid%3D8326131e0002e91800000005573ec8c0&ecd=1&psr=1366x768&par=1366x728&pis=-1x-1&ccd=24&cja=false&cmi=6&col=zh-CN&cdo=-1&tcn=1463732477&qn=b4d994b81cf339e2&tt=1463732477192.99.227.230" width="680" height="200" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">

javascript中给数组加元素是一个非常简单的问题,javascript本身就提供了大量这类函数，我们可以使用js自带函数快速给数组增加元素了，本文就javascript进行数组追加的方法做出如下小结。

以前常用的是arr.concat(arr2)这种方法来追加数组，例子如下：

复制代码代码如下:

 
 <script type="text/javascript"> 
  
 var arr = new Array(3); 
  
 arr[0] = "测试数组1为 1"; 
  
 arr[1] = "测试数组1为 2"; 
  
 arr[2] = "测试数组1为 3"; 
  
 var arr2 = new Array(3); 
  
 arr2[0] = "测试数组2为 1"; 
  
 arr2[1] = "测试数组2为 2"; 
  
 arr2[2] = "测试数组2为 3"; 
  
 document.write(arr.concat(arr2)+"<br/>"); 
  
 document.write(arr.concat("你大爷2","你大爷3")+"<br/>") 
  
 </script>

很多人对js数组元素的添加和删除一直比较迷惑，现给出如下测试的代码：

复制代码代码如下:

 
 var arr = new Array(); 
  
 arr[0] = "aaa"; 
  
 arr[1] = "bbb"; 
  
 arr[2] = "ccc"; 
  
 //alert(arr.length);//3 
  
 arr.pop(); 
  
 //alert(arr.length);//2 
  
 //alert(arr[arr.length-1]);//bbb 
  
 arr.pop(); 
  
 //alert(arr[arr.length-1]);//aaa 
  
 //alert(arr.length);//1 
  
 var arr2 = new Array(); 
  
 //alert(arr2.length);//0 
  
 arr2[0] = "aaa"; 
  
 arr2[1] = "bbb"; 
  
 //alert(arr2.length);//2 
  
 arr2.pop(); 
  
 //alert(arr2.length);//1 
  
 arr2 = arr2.slice(0,arr2.length-1);  
  
 //alert(arr2.length);//0 
  
 arr2[0] = "aaa"; 
  
 arr2[1] = "bbb"; 
  
 arr2[2] = "ccc"; 
  
 arr2 = arr2.slice(0,1);  
  
 alert(arr2.length);//1 
  
 alert(arr2[0]);//aaa 
  
 alert(arr2[1]);//undefined 
  
 shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined  
  
 var a = [1,2,3,4,5];  
  
 var b = a.shift(); //a：[2,3,4,5]   b：1 
  
 unshift：将参数添加到原数组开头，并返回数组的长度  
  
 var a = [1,2,3,4,5];  
  
 var b = a.unshift(-2,-1); //a：[-2,-1,1,2,3,4,5]   b：7  
  
 注：在IE6.0下测试返回值总为undefined，FF2.0下测试返回值为7，所以这个方法的返回值不可靠，需要用返回值时可用splice代替本方法来使用。 
  
 pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined  
  
 var a = [1,2,3,4,5];  
  
 var b = a.pop(); //a：[1,2,3,4]   b：5 //不用返回的话直接调用就可以了 
  
 push：将参数添加到原数组末尾，并返回数组的长度  
  
 var a = [1,2,3,4,5];  
  
 var b = a.push(6,7); //a：[1,2,3,4,5,6,7]   b：7 
  
 concat：返回一个新数组，是将参数添加到原数组中构成的  
  
 var a = [1,2,3,4,5];  
  
 var b = a.concat(6,7); //a：[1,2,3,4,5]   b：[1,2,3,4,5,6,7] 
  
 splice(start,deleteCount,val1,val2,...)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,...  
  
 var a = [1,2,3,4,5];  
  
 var b = a.splice(2,2,7,8,9); //a：[1,2,7,8,9,5]   b：[3,4]  
  
 var b = a.splice(0,1); //同shift  
  
 a.splice(0,0,-2,-1); var b = a.length; //同unshift  
  
 var b = a.splice(a.length-1,1); //同pop  
  
 a.splice(a.length,0,6,7); var b = a.length; //同push 
  
 reverse：将数组反序  
  
 var a = [1,2,3,4,5];  
  
 var b = a.reverse(); //a：[5,4,3,2,1]   b：[5,4,3,2,1] 
  
 sort(orderfunction)：按指定的参数对数组进行排序  
  
 var a = [1,2,3,4,5];  
  
 var b = a.sort(); //a：[1,2,3,4,5]   b：[1,2,3,4,5] 
  
 slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组  
  
 var a = [1,2,3,4,5];  
  
 var b = a.slice(2,5); //a：[1,2,3,4,5]   b：[3,4,5] 
  
 join(separator)：将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符  
  
 var a = [1,2,3,4,5];  
  
 var b = a.join("|"); //a：[1,2,3,4,5]   b："1|2|3|4|5" 
  
 再给个利用数组模拟javaStringBuffer处理字符串的方法： 
  
 /** 
  
 * 字符串处理函数 
  
 */ 
  
 function StringBuffer() 
  
 { 
  
 var arr = new Array; 
  
 this.append = function(str) 
  
 { 
  
     arr[arr.length] = str;  
  
 }; 
  
 this.toString = function() 
  
 { 
  
     return arr.join(""); //把append进来的数组ping成一个字符串 
  
 }; 
  
 } 
  
 今天在应用中突然发现join是一种把数组转换成字符串的好方法，故封装成对象使用了： 
  
 /** 
  
 * 把数组转换成特定符号分割的字符串 
  
 */ 
  
 function arrayToString(arr,separator) 
  
 { 
  
 if(!separator) separator = "";//separator为null则默认为空 
  
     return arr.join(separator);  
  
 } 
  
 /** 
  
 * 查找数组包含的字符串 
  
 */ 
  
 function arrayFindString(arr,string) 
  
 { 
  
 var str = arr.join("");  
  
     return str.indexOf(string);  
  
 }

最后有一个关于push.apply追加数组时碰到一些问题给喜欢玩a.push.apply(a, b);这种做法的朋友一个测试
a.push.apply(a, b);这种自以为很酷的，不需要写for循环的写法，一直也没遇到什么问题，直到今天我要append的b是个很大的数组时才遇到了坑。

复制代码代码如下:

 
 a = new Array();      
  
 b = new Array(125624);                      
  
 a.push.apply(a, b);

以上的代码在mac的chrome下抛出了如下的异常

Uncaught RangeError: Maximum call stack size exceeded

如果把数组改为b = new Array(125623);小一个元素居然就好了，测试了一下其他浏览器也都有大数组才出错的问题，但不同浏览器临界值还各异

在此给出的建议是老老实实用forEach，不仅可以避免大数组的异常问题，并且从性能角度考虑forEach也是最快的