实例讲解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学习指南
Dec 01 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
用原生js做单页应用
Jan 17 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
一个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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
浅谈PHP中的
2016/04/23 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
详解python中的json和字典dict
2018/06/22 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
django rest framework 自定义返回方式
2020/07/12 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
十佳大学生村官事迹
2014/01/09 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
教师演讲稿大全
2014/05/16 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
安全主题班会教案
2015/08/12 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
nginx静态资源的服务器配置方法
2022/07/07 Servers