实例讲解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 相关文章推荐
actionscript与javascript的区别
May 25 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
JS中Array数组学习总结
Jan 18 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
javascript中的数据类型检测方法详解
Aug 07 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
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
JavaScript原生数组Array常用方法
2017/04/06 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
python数组复制拷贝的实现方法
2015/06/09 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python引用模块和查找模块路径
2016/03/17 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
浅析matlab中imadjust函数
2020/02/27 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
先进单位事迹材料
2014/12/25 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
python图像处理 PIL Image操作实例
2022/04/09 Python