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 相关文章推荐
一个JQuery操作Table的代码分享
Mar 30 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
使用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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
详解vue-router 初始化时做了什么
2018/06/11 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
描述内存分配方式以及它们的区别
2016/10/15 面试题
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
结婚喜宴主持词
2014/03/14 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
飞屋环游记观后感
2015/06/08 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
浅谈python数据类型及其操作
2021/05/25 Python
MySQL 时间类型的选择
2021/06/05 MySQL