JS中数组Array的用法示例介绍


Posted in Javascript onFebruary 20, 2014

new Array()
new Array(len)
new Array([item0,[item1,[item2,...]]]
使用数组对象的方法:
var objArray=new Array();
objArray.concact([item1[,item2[,....]]]-------------------将参数列表连接到objArray的后面形成一个新的数组并返回,原有数组不受影响。如:var arr=["a","b","c"];
arr.concact("d","e");
将返回包括从"a"到"e"字母元素的数组。而arr本身不受影响。
objArray.join(separator)-----------------以separator指定的字符作为分割符,将数组转换为字符串,当seperator 为逗号时,其作用和toString()相同。
objArray.pop()---------通俗的讲,就是弹出数组的最后一个元素。结合下面的push方法,使得将数组作为栈来使用成为可能。pop方法返回数组最后一个元素的值,并将length属性减1,即返回后立即丢失最后一个元素。
objArray.push([value1[,value2[,....]]])-------------将参数添加到数组的结尾。如:[1,2,3, 4].push("a","b")将得到[1,2,3,4,"a","b"]
objArray.reverse()将数组中的元素反转排列。如:[1,2,3].reverse()将得到[3,2,1],这个操作是在原有数组上经行操作,同时也返回数组本身
objArray.shift()-----------移去数组的第一个元素,并返回这个元素的值。这个方法的性质和pop方法很类似,pop方法是移去最后一个元素。
objArray.slice(start,end)----------- 返回数组对象的一个子集,索引从start开始(包括 start),到end结束(不包括end),原有数组不受影响。如:[1,2,3,4,5,6].slice(1,4)将得到[2,3,4]。当 start或者end为负数时,则使用他们加上length后地值。如:[1,2,3,4,5,6].slice(-4,-1)将得到[3,4,5]。如果end小于等于start,将返回空数组。
objArray.sort(comparefn)------- 根据comparefn定义的大小比较函数,对一个数组进行排序。函数comparefn必须接受两个参数element1,element2,如果需要需要element1排在element2之前,应该返回一个负数;如果需要element1排在element2之后,应该返回一个正数,如果两个数平等对待(即保持原有顺序)则返回0。当省略comparefn时,则元素按照字典顺序排列。如:对定义的比较函数cmp: function cmp(e1,e2){return e1-e2;}则[3,4,2,7].sort(cmp)将得到[2,3,4,7].
objArray.splice(start,deleteCount[,item1,item2[,...]]]) 这是一个复杂的函数,用于完成数组元素的删除 取代和插入操作。其中,start参数表示要进行操作的索引位置,deleteCount指从start开始要删除的元素的元素个数(包括了start位置),如果deleteCount省略,则表示从start开始要删除数组的剩余部分。[,item1[,item2[,...]]]则表示可选的插入到start之前的元素列表。如:
var arr=[0,1,2,3,4,5,6];
arr.splice(1,1);
document.write(arr);//显示“0,2,3,4,5,6”
arr=[0,1,2,3,4,5,6];
arr.splice(0,0,"a","b");
document.write(arr);//显示“a,b,0,1,2,3,4,5,6"
arr=[0,1,2,3,4,5,6];
arr.splice(3,2,"c","d");
document.write(arr);//显示"0,1,2,c,d,5,6"
objArray.unshift(item1[,item2[,...]]])------------------- 将参数列表插入到数组的开头。其性质和push方法类型,但push方法是将元素添加到数组的结尾。如: [1,2,3,4].unshift("a","b")将得到["a","b",1,2,3,4]。

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 相关文章推荐
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
javascript的回调函数应用示例
Feb 20 #Javascript
JS的get和set使用示例
Feb 20 #Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 #Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 #Javascript
js确认删除对话框效果的示例代码
Feb 20 #Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 #Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 #Javascript
You might like
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
php反射应用示例
2014/02/25 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
angular过滤器实现排序功能
2017/06/27 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Golang与python线程详解及简单实例
2017/04/27 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
python函数的万能参数传参详解
2019/07/26 Python
python实现简单成绩录入系统
2019/09/19 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
幼儿园园长自我鉴定
2013/10/22 职场文书
剪彩仪式主持词
2014/03/19 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript