javascript进行数组追加方法小结


Posted in Javascript onJune 16, 2014

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也是最快的

Javascript 相关文章推荐
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
js style动态设置table高度
Oct 21 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
jQuery实现本地存储
Dec 22 jQuery
Vue实现省市区三级联动
Dec 27 Vue.js
js中延迟加载和预加载的具体使用
Jan 14 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 #Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 #Javascript
js限制文本框只能输入数字方法小结
Jun 16 #Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 #Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 #Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 #Javascript
js中的如何定位固定层的位置
Jun 15 #Javascript
You might like
用PHP连接Oracle数据库
2006/10/09 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
Javascript的闭包详解
2014/12/26 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
ionic3 懒加载
2017/08/16 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
python多线程扫描端口示例
2014/01/16 Python
Python collections模块实例讲解
2014/04/07 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
Python 实现简单的客户端认证
2020/07/29 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
大学毕业生简单自荐信
2013/11/05 职场文书
体育教育专业毕业生自荐信
2013/11/15 职场文书
人事助理岗位职责
2013/11/18 职场文书
武侯祠导游词
2015/02/04 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android