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动态加载js三种方法实例
Aug 03 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
Vue.set 全局操作简单示例
Sep 19 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调用数据库的存贮过程
2006/10/09 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
python 批量将中文名转换为拼音
2021/02/07 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
个人委托书怎么写
2014/04/04 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
公司禁烟通知
2015/04/23 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript