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 相关文章推荐
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
细说Vue组件的服务器端渲染的过程
May 30 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
DISCUZ 分页代码
2007/01/02 PHP
二招解决php乱码问题
2012/03/25 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
JSON相关知识汇总
2015/07/03 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
浅析Python中的多条件排序实现
2016/06/07 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python装饰器语法糖
2019/01/02 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
abstract是什么意思
2012/02/12 面试题
运动会跳远广播稿
2014/02/04 职场文书
毕业自我鉴定书
2014/03/24 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
2015大学生实训报告
2014/11/05 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫