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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
vue计算属性及使用详解
Apr 02 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
微信小程序自定义胶囊样式
Dec 27 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
用Zend Encode编写开发PHP程序
2010/02/21 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
PHP安全下载文件的方法
2016/04/07 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
python模块之time模块(实例讲解)
2017/09/13 Python
Python shutil模块用法实例分析
2019/10/02 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
枚举与#define宏的区别
2014/04/30 面试题
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
工厂仓管员岗位职责
2014/01/01 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
国庆节慰问信
2015/02/15 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
详解CSS故障艺术
2021/05/25 HTML / CSS
MySQL基于索引的压力测试的实现
2021/11/07 MySQL