1
、数组的创建
以下为引用的内容:
vararrayObj=newArray();
//
创建一个数组
vararrayObj=newArray([size]);
//
创建一个数组并指定长度,注意不是上限,是长度
vararrayObj=newArray([element0[,element1[,...[,elementN]]]]);
创建一个数组并赋值
|
要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5
,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。
2
、数组的元素的访问
vartestGetArrValue=arrayObj[1];//
获取数组的元素值
arrayObj[1]="
这是新值";//
给数组元素赋予新的值
3
、数组元素的添加
arrayObj.push([item1[item2[...[itemN]]]]);//
将一个或多个新元素添加到数组结尾,并返回数组新长度
arrayObj.unshift([item1[item2[...[itemN]]]]);//
将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度
arrayObj.splice(insertPos,0,[item1[,item2[,...[,itemN]]]]);//
将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""
。
4
、数组元素的删除
arrayObj.pop();//
移除最后一个元素并返回该元素值
arrayObj.shift();//
移除最前一个元素并返回该元素值,数组中元素自动前移
arrayObj.splice(deletePos,deleteCount);//
删除从指定位置deletePos
开始的指定数量deleteCount
的元素,数组形式返回所移除的元素
5
、数组的截取和合并
arrayObj.slice(start,[end]);//
以数组的形式返回数组的一部分,注意不包括end
对应的元素,如果省略end
将复制start
之后的所有元素
arrayObj.concat([item1[,item2[,...[,itemN]]]]);//
将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组
6
、数组的拷贝
arrayObj.slice(0);//
返回数组的拷贝数组,注意是一个新的数组,不是指向
arrayObj.concat();//
返回数组的拷贝数组,注意是一个新的数组,不是指向
7
、数组元素的排序
arrayObj.reverse();//
反转元素(最前的排到最后、最后的排到最前),返回数组地址
arrayObj.sort();//
对数组元素排序,返回数组地址
8
、数组元素的字符串化
arrayObj.join(separator);//
返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用separator
隔开。
toLocaleString
、toString
、valueOf
:可以看作是join
的特殊用法,不常用
二、数组对象的3
个属性
1
、length
属性
Length
属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0
开始,所以一个数组的上下限分别是:0
和length-1
。和其他大
多数语言不同的是,JavaScript
数组的length
属性是可变的,这一点需要特别注意。当length
属性被设置得更大时,整个数组的状态事实上 不会发生变化,仅仅是length
属性变大;当length
属性被设置得比原来小时,则原先数组中索引大于或等于length
的元素的值全部被丢失。下面
是演示改变length
属性的例子:
vararr=[12,23,5,3,25,98,76,54,56,76];
//
定义了一个包含10
个数字的数组
alert(arr.length);//
显示数组的长度10
arr.length=12;//
增大数组的长度
alert(arr.length);//
显示数组的长度已经变为12
alert(arr[8]);//
显示第9
个元素的值,为56
arr.length=5;//
将数组的长度减少到5
,索引等于或超过5
的元素被丢弃
alert(arr[8]);//
显示第9
个元素已经变为"undefined"
arr.length=10;//
将数组长度恢复为10
alert(arr[8]);//
虽然长度被恢复为10
,但第9
个元素却无法收回,显示"undefined"
由 上面的代码我们可以清楚的看到length
属性的性质。但length
对象不仅可以显式的设置,它也有可能被隐式修改。JavaScript
中 可以使用一个未声明过的变量,同样,也可以使用一个未定义的数组元素(指索引超过或等于length
的元素),这时,length
属性的值将被设置为所使 用元素索引的值加1
。例如下面的代码:
vararr=[12,23,5,3,25,98,76,54,56,76];
alert(arr.length);
arr[15]=34;
alert(arr.length);
代 码中同样是先定义了一个包含10
个数字的数组,通过alert
语句可以看出其长度为10
。随后使用了索引为15
的元素,将其赋值为15
,即 arr[15]=34
,这时再用alert
语句输出数组的长度,得到的是16
。无论如何,对于习惯于强类型编程的开发人员来说,这是一个很令人惊讶的特 性。事实上,使用newArray()
形式创建的数组,其初始长度就是为0
,正是对其中未定义元素的操作,才使数组的长度发生变化。
由上面的介绍可以看到,length
属性是如此的神奇,利用它可以方便的增加或者减少数组的容量。因此对length
属性的深入了解,有助于在开发过程中灵活运用。
2
、prototype
属性
返回对象类型原型的引用。prototype
属性是object
共有的。
objectName.prototype
objectName
参数是object
对象的名称。
说明:用prototype
属性提供对象的类的一组基本功能。
对象的新实例“
继承”
赋予该对象原型的操作。
对于数组对象,以以下例子说明prototype
属性的用途。
给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入Array.prototype
,
并使用它。
以下为引用的内容:
functionarray_max()
{
vari,max=this[0];
for(i=1;i<this.length;i++)
{
if(max<this[i])
max=this[i];
}
returnmax;
}
Array.prototype.max=array_max;
varx=newArray(1,2,3,4,5,6);
vary=x.max();
|
该代码执行后,y
保存数组x
中的最大值,或说6
。
3
、constructor
属性
表示创建对象的函数。
object.constructor//object
是对象或函数的名称。
说明:constructor
属性是所有具有prototype
的对象的成员。它们包括除Global
和Math
对象以外的所有JScript
固有对象。constructor
属性保存了对构造特定对象实例的函数的引用。
例如:
x=newString("Hi");
if(x.constructor==String)//
进行处理(条件为真)。
或
functionMyFunc{
//
函数体。
}
y=newMyFunc;
if(y.constructor==MyFunc)//
进行处理(条件为真)。
对于数组来说:
y=newArray();
判断是否数组的方法
vararrayVar=[\"aaa\",\"bbb\",\"ccc\"];
varnonArrayVar={length:4,otherAttribute:\"attr\"};
document.write(arrayVar.constructor==Array);
document.write(\"<br/>\");
document.write(nonArrayVar.constructor==Array);
结果是true,false
关于数组转换
可以使用[].slice.call()
或者Array.prototype.slice.call()
,但是IE6,IE7
下对DOM
元素集合使用这个操作时会报错,其它浏览器(Firefox,Opera,Safari)
都正常
示例代码:
(function(){
//SupportedbyFirefox,IE6,IE7,Opera,Safari
varargArray=[].slice.call(arguments);//argumentsisnotanarray,
//[].slice.call()willmakeanewarraywitharguments
document.write(argArray.reverse().join(\"&\"));//result:www&2&1
document.write(\"<br/>\"); [Page]
//SupportedbyFirefox,IE6,IE7,Opera,Safari
vararrayLike={0:\"ccc\",1:1,2:\"eee\",3:8,length:4};//anobjectthatlookslikeanobject
vartrueArray=[].slice.call(arrayLike,2,arrayLike.length);//makeanewarraywitharrayLike
trueArray.push(\"2008-02-12\");
document.write(trueArray.join(\"|\"));//result:eee|8|2008-02-12
document.write(\"<br/>\");
//SupportedbyFirefox,Opera,Safari
varobj=document.createElement(\"ul\");
obj.innerHTML=’<li>AAAAAA</li><listyle=\"display:none;\">BBBBBB</li>
<li>CCCCCC</li><li>DDDDDD</li>’;
varnodeList=obj.getElementsByTagName(\"li\");//DOMElementcollections
document.write(nodeList.length+\"linodefound!<br/>\");
varnodeArray=[].slice.call(nodeList);//makeanewarraywithnodeList
for(vari=0;i<nodeArray.length;i++){
document.write(nodeArray[i].textContent||nodeArray[i].innerText);
document.write(\"$\");
}//result:AAAAAA$BBBBBB$CCCCCC$DDDDDD$
})(1,2,\"www\");
grep
、map
Perl
语言带出来的东西,jQuery
里面就用了自己的grep
和map
实现
grep
对数组的grep
操作,指类似这样的代码:
ArraynewArray=grep(condition,oldArray)
,这个操作将对oldArray
数组的每个元素进行遍历,如果当前处理元素符合条件condition
,则加入到返回数组中
jQuery
中的grep
类似这样:function(elems,callback)
,elems
是DOM
元素集合,callback
是实现selector
的一些表达式函数,如果callback
返回true
则表明当前处理的元素符合selector
表达式
map
与grep
不同的是,map
不进行条件判断,只是对数组中每个元素执行指定的操作,就是将一个循环过程进行改装 [Page]
喜欢动态语言风格的,可以给数组加个grep
和map
方法,例如:
Array.prototype.grep=function(condition,operation,inverse){
if(arguments.length<1)return[];
vartester;
if(typeofcondition==\"function\")tester=condition;
elseif(condition.constructor==RegExp)tester=function(e,i){returncondition.test(e);};
elseif(typeofcondition==\"string\")
try{
tester=eval(\"false||function(e,i){return\"+condition+\";}\");
}catch(e){
}
elsetester=function(e,i){returnfalse;};
if(!tester)return[];
varcommand;
if(typeofoperation==\"function\")command=operation;
elseif(typeofoperation==\"string\")
try{
command=eval(\"false||function(e,i){\"+operation+\";returne;}\");
}catch(e){
}
if(typeofcommand!=\"function\")command=function(e,i){returne;};
varresult=[],match,t;
for(vari=0;i<this.length;i++){
match=tester(this[i],i);
if(match)t=command(this[i],i);
if(match&&!inverse&&t!=null)t.constructor==Array?result.concat(t):result.push(t);
elseif(!match&&inverse)result.push(this[i]);
[Page]
}
returnresult;
};
Array.prototype.map=function(callback){
if(!callback||typeofcallback!=\"function\")returnthis;
for(vari=0;i<this.length;i++)callback(this[i],i);
returnthis;
};
使用示例:
varoldArray=[2,7,8,5,1,9,2,6,0];
varnewArray1=oldArray.grep(\"i%2==0\");//returnelementswithevenindex
varnewArray2=oldArray.grep(\"e%2==1\");//returnelementswithoddvalue
document.write(newArray1+\"<br/>\");//result:2,8,1,2,0
document.write(newArray2+\"<br/>\");//result:7,5,1,9
oldArray=[\"aa\",\"bbbb\",\"abcdefg\",\"ccccc\",\"111121111\",\"999999999\"];
varnewArray3=oldArray.grep(/(\\w)\\1{4,}/);
document.write(newArray3+\"<br/>\");//result:ccccc,999999999
典型jQuery
风格的代码:
varobj=document.createElement(\"ul\");
obj.innerHTML=’<li>AAAAAA</li><listyle=\"display:none;\">BBBBBB</li>
<li>CCCCCC</li><li>DDDDDD</li>’;
document.body.appendChild(obj);
window.setInterval(function(){
//makeanewaarraywithDOMElementcollection
varliList=obj.getElementsByTagName(\"li\");
varliArray=[];
for(vari=0;i<liList.length;i++)liArray.push(liList[i]);
//grepforarraysexample
liArray
.grep(’e.style[\"display\"]==\"none\"’,’e.style[\"display\"]=\"\";’,true)
.map(function(e,i){e.style[\"display\"]=\"none\";});
},1500);
分享到:
相关推荐
主要详细介绍了javascript操作数组的方法以及示例,需要的朋友可以参考下
Javascript数组及其操作
个人做的一个数组删除的方法,因实际需要就写了个,分享给大家吧!
JavaScript常用数组操作方法1
JavaScript常用数组操作方法,让您更快了解数组操作,更好理解
资源名称:Javascript数组及其操作 WORD版内容简介:本文档主要讲述的是Javascript数组及其操作;希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看 资源太大,传百度网盘了,链接在附件中,有...
Javascript数组操作整理.rarJavascript数组操作整理.rar
在日常的代码开发中,关于数组排序的操作可不少,JavaScript 中可以调用 sort 方法对数组进行快速排序。 今天,就数组的 sort 方法来学习一下,避免日后踩坑的悲惨遭遇。 sort 方法用于对数组的元素进行排序。 ...
主要介绍了JavaScript把数组作为堆栈使用的方法,实例分析了javascript操作数组的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
第一章JavaScript基础 1. 如何实现JavaScript 4 (1) 如何把JavaScript代码放到HTML页面里 4 使用[removed]标签,直接在HTML代码里加入JavaScript代码 4 使用[removed]调用外部的JavaScript(.js文件) 4 如何...
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象 Javascript不支持多维数组,但是因为数组里面可以...
Vectorious 是一个 JavaScript 库用来操作 N 维数组和向量。支持 Node.js 和浏览器。示例代码:var vectorious = require('vectorious'); var vector, matrix; vector = new vectorious.Vector(); // {...
1、concat方法 [作用] 将多个数组联合起来,这个方法不会改变现存的数组,它只返回了所结合数组的一份拷贝。 [语法] arrayObj.concat(array1,array2,…) [实例] [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2...
经常使用javascript对数组和json数组进行操作,但是时间久了就忘记咋操作的了,所以这里简单记录一下 直接看代码吧 <!DOCTYPE html> <... <...<h2>javascript操作数组 <input type=button value=
本文实例汇总了JavaScript数组的常用操作技巧。分享给大家供大家参考。具体如下: 前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法。这里无非是...
主要介绍了JavaScript从数组中删除指定值元素的方法,实例分析了两种常用的javascript操作数组指定元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
主要介绍了JavaScript遍历数组的三种方法map、forEach与filter,结合实例形式详细分析了javascript针对数组遍历的map、forEach与filter三种方法相关操作技巧与注意事项,需要的朋友可以参考下
javascript splice数组简单操作
js数组操作,是工作中的一些积累整理起来,和大家分享