实例讲解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 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
原生js实现分页效果
Sep 23 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动态读取数据清除最右边距的方法
2017/04/12 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
js切换光标示例代码
2013/10/10 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
详解vue axios中文文档
2017/09/12 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python实现的多进程和多线程功能示例
2018/05/29 Python
Python实现的读写json文件功能示例
2018/06/05 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
为什么使用接口?
2014/08/13 面试题
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
物流合作计划书
2014/01/10 职场文书
带薪年假请假条
2014/02/04 职场文书
自荐信如何制作?
2014/02/21 职场文书
高二学生评语大全
2014/04/25 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers