实例讲解JS中数组Array的操作方法


Posted in Javascript onMay 09, 2014

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,...
在清空数组时,只需传递startIndex。
如果不删除所有元素,再传递deleteCount参数。
splice还具有先删除后添加的功能,即先删除几个元素,然后在删除的位置再添加若干元素,删除与添加的元素的个数没有必须相等,这时侯deleteCount也是要用到的。
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);
}
Javascript 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
一个JavaScript的求爱小特效
May 09 #Javascript
js中的setInterval和setTimeout使用实例
May 09 #Javascript
js获取 type=radio 值的方法
May 09 #Javascript
js实现的点击数量加一可操作数据库
May 09 #Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 #Javascript
js四舍五入数学函数round使用实例
May 09 #Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 #Javascript
You might like
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
德国机车企业:FC-Moto
2017/10/27 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
为什么要使用servlet
2016/01/17 面试题
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
寄语是什么意思
2014/04/10 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
金融保险专业求职信
2014/09/03 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
创业计划书之服装
2019/10/07 职场文书
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL