实例讲解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 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 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
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python实现简单文件读写函数
2021/02/25 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
Skyscanner波兰:廉价航班
2017/11/07 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
自我鉴定范文
2013/11/10 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
开服装店计划书
2014/08/15 职场文书
公务员政审材料
2014/12/23 职场文书
三峡导游词
2015/01/31 职场文书
督导岗位职责
2015/02/04 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书