实例讲解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 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
JS + HTML 罗盘式时钟的实现
May 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
一个用于网络的工具函数库
2006/10/09 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
详解使用python crontab设置linux定时任务
2016/12/08 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
深入浅析Python传值与传址
2018/07/10 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
化验室技术员岗位职责
2013/12/24 职场文书
教师党员一句话承诺
2014/03/28 职场文书
社区义诊活动总结
2014/04/30 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
2016年国陪研修感言
2015/11/18 职场文书
责任书格式
2019/04/18 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis