Javascript数组 Array 操作整理.docx

Javascript数组 Array 操作整理.docx

《Javascript数组 Array 操作整理.docx》由会员分享，可在线阅读，更多相关《Javascript数组 Array 操作整理.docx（20页珍藏版）》请在冰豆网上搜索。

Javascript数组Array操作整理

Javascript数组操作整理

Array对象属性

属性

描述

FF

IE

constructor

返回对创建此对象的数组函数的引用。

1

4

index

1

4

input

1

4

length

设置或返回数组中元素的数目。

1

4

prototype

使您有能力向对象添加属性和方法。

1

4

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];//定义了一个包含10个数字的数组

alert（arr.length）;//显示10

arr[15]=34;

alert（arr.length）;//显示16

代码中同样是先定义了一个包含10个数字的数组，通过alert语句可以看出其长度为10。

随后使用了索引为15的元素，将其赋值为15，即arr[15]=34，这时再用alert语句输出数组的长度，得到的是16。

无论如何，对于习惯于强类型编程的开发人员来说，这是一个很令人惊讶的特性。

事实上，使用newArray（）形式创建的数组，其初始长度就是为0，正是对其中未定义元素的操作，才使数组的长度发生变化。

由上面的介绍可以看到，length属性是如此的神奇，利用它可以方便的增加或者减少数组的容量。

因此对length属性的深入了解，有助于在开发过程中灵活运用。

prototype

说明：

prototype是在IE4及其以后版本引入的一个针对于某一类的对象的方法，而且特殊的地方便在于：

它是一个给类的对象添加方法的方法！

这一点可能听起来会有点乱，别急，下面我便通过实例对这一特殊的方法作已下讲解：

　　首先，我们要先了解一下类的概念，JavaScript本身是一种面向对象的语言，它所涉及的元素根据其属性的不同都依附于某一个特定的类。

我们所常见的类包括：

数组变量（Array）、逻辑变量（Boolean）、日期变量（Date）、结构变量（Function）、数值变量（Number）、对象变量（Object）、字符串变量（String）等，而相关的类的方法，也是程序员经常用到的（在这里要区分一下类的注意和属性发方法），例如数组的push方法、日期的get系列方法、字符串的split方法等等，

　　但是在实际的编程过程中不知道有没有感觉到现有方法的不足？

prototype方法应运而生！

下面，将通过实例由浅入深讲解prototype的具体使用方法：

1、最简单的例子，了解prototype：

（1）Number.add（num）：

作用，数字相加

实现方法：

Number.prototype.add=function（num）{return（this+num）;}

试验：

alert（（3）.add（15））->显示18

（2）Boolean.rev（）:

作用，布尔变量取反

实现方法：

Boolean.prototype.rev=function（）{return（!

this）;}

试验：

alert（（true）.rev（））->显示false

是不是很简单？

这一节仅仅是告诉读者又这么一种方法，这种方法是这样运用的。

2、已有方法的实现和增强，初识prototype：

（1）Array.push（new_element）

作用：

在数组末尾加入一个新的元素　　

实现方法：

Array.prototype.push=function（new_element）{

        this[this.length]=new_element;

        returnthis.length;

}

让我们进一步来增强他，让他可以一次增加多个元素！

实现方法：

　Array.prototype.pushPro=function（arguments）{

        varcurrentLength=this.length;

        for（vari=0;i

            this[currentLength+i]=arguments[i];

        }

        returnthis.length;

    }

（2）javascript中无法通过一个索引去移除一个无素.通过对ARRAY的扩展.实现了对javascriptArray对象通过索引移除数组中的一个元素.

让我们来实现他！

实现方法：

Array.prototype.remove=function（index）

 {

   if（isNaN（index）||index>this.length）{returnfalse;}

   for（vari=0,n=0;i

   {

       if（this[i]!

=this[index]）

       {

           this[n++]=this[i]

       }

   }

   this.length-=1

}

（3）String.length

　　作用：

这实际上是String类的一个属性，但是由于JavaScript将全角、半角均视为是一个字符，在一些实际运用中可能会造成一定的问题，现在我们通过prototype来弥补这部不足。

实现方法：

SLength=function（）{

   vararr=this.match（/[^\x00-\xff]/ig）;

   returnthis.length+（arr==null?

0:

arr.length）;

}

试验：

alert（"EaseWe空间Spaces".cnLength（））->显示16

　　这里用到了一些正则表达式的方法和全角字符的编码原理，由于属于另两个比较大的类别，本文不加说明，请参考相关材料。

3、新功能的实现，深入prototype：

在实际编程中所用到的肯定不只是已有方法的增强，更多的实行的功能的要求，下面我就举两个用prototype解决实际问题的例子：

（1）String.left（）

　　问题：

用过vb的应该都知道left函数，从字符串左边取n个字符，但是不足是将全角、半角均视为是一个字符，造成在中英文混排的版面中不能截取等长的字符串

作用：

从字符串左边截取n个字符，并支持全角半角字符的区分

实现方法：

String.prototype.left=function（num,mode）{

   if（!

/\d+/.test（num））return（this）;

   varstr=this.substr（0,num）;

   if（!

mode）returnstr;

   varn=str.Tlength（）-str.length;

   num=num-parseInt（n/2）;

   returnthis.substr（0,num）;

}

 试验：

  alert（"EaseWe空间Spaces".left（8））->显示EaseWe空间

   alert（"EaseWe空间Spaces".left（8,true））->显示EaseWe空

 本方法用到了上面所提到的String.Tlength（）方法，自定义方法之间也能组合出一些不错的新方法呀！

（2）Date.DayDiff（）

　　作用：

计算出两个日期型变量的间隔时间（年、月、日、周）　

实现方法：

Date.prototype.DayDiff=function（cDate,mode）{

        try{

            cDate.getYear（）;

        }catch（e）{

            return（0）;

        }

        varbase=60*60*24*1000;

        varresult=Math.abs（this-cDate）;

        switch（mode）{

            case"y":

                result/=base*365;

                break;

            case"m":

                result/=base*365/12;

                break;

            case"w":

                result/=base*7;

                break;

            default:

                result/=base;

                break;

        }

        return（Math.floor（result））;

}

试验：

alert（（newDate（））.DayDiff（（newDate（2002,0,1））））->显示329

alert（（newDate（））.DayDiff（（newDate（2002,0,1））,"m"））->显示10

当然，也可以进一步扩充，得出响应的小时、分钟，甚至是秒。

（3）Number.fact（）

　　作用：

某一数字的阶乘　　　　

实现方法：

Number.prototype.fact=function（）{

        varnum=Math.floor（this）;

        if（num<0）returnNaN;

        if（num==0||num==1）

            return1;

        else

            return（num*（num-1）.fact（））;

}

试验：

alert（（4）.fact（））->显示24

这个方法主要是说明了递归的方法在prototype方法中也是可行的！

Constructor

说明：

表示创建对象的函数。

始终指向创建当前对象的构造函数。

比如下面例子：

//等价于varfoo=newArray（1,56,34,12）;

vararr=[1,56,34,12];

console.log（arr.constructor===Array）;//true

//等价于varfoo=newFunction（）;

varFoo=function（）{};

console.log（Foo.constructor===Function）;//true

//由构造函数实例化一个obj对象

varobj=newFoo（）;

console.log（obj.constructor===Foo）;//true

//将上面两段代码合起来，就得到下面的结论

console.log（obj.constructor.constructor===Function）;//true

但是当constructor遇到prototype时，有趣的事情就发生了。

我们知道每个函数都有一个默认的属性prototype，而这个prototype的constructor默认指向这个函数。

如下例所示：

functionPerson（name）{

this.name=name;

};

Person.prototype.getName=function（）{

returnthis.name;

};

varp=newPerson（"ZhangSan"）;

console.log（p.constructor===Person）;//true

console.log（Person.prototype.constructor===Person）;//true

//将上两行代码合并就得到如下结果

console.log（p.constructor.prototype.constructor===Person）;//true

当时当我们重新定义函数的prototype时（注意：

和上例的区别，这里不是修改而是覆盖），constructor属性的行为就有点奇怪了，

如下示例：

functionPerson（name）{

this.name=name;

};

Person.prototype={

getName:

function（）{

returnthis.name;

}

};

varp=newPerson（"ZhangSan"）;

console.log（p.constructor===Person）;//false

console.log（Person.prototype.constructor===Person）;//false

console.log（p.constructor.prototype.constructor===Person）;//false

怎么修正这种问题呢？

方法也很简单，重新覆盖Person.prototype.constructor即可，

如下示例：

functionPerson（name）{

this.name=name;

};

Person.prototype=newObject（{

getName:

function（）{

returnthis.name;

}

}）;

Person.prototype.constructor=Person;

varp=newPerson（"ZhangSan"）;

console.log（p.constructor===Person）;//true

console.log（Person.prototype.constructor===Person）;//true

console.log（p.constructor.prototype.constructor===Person）;//true

说到了constructor我们就说是它与typeof函数的区别。

首先我们运行一下下面这段代码：

vari;

alert（typeof（i））;

alert（i.constructor）;

这3行代码告诉你什么情况下可以用constructor。

你可以看到第2行返回了字符串’undefined’，而第三行则发生了错误，原因是i变量还没有类型定义，自然也没有constructor的存在。

从这一点上看，typeof可以检查到变量是否有定义，而construct只能检查已定义变量的类型。

再运行一下下面这段代码：

vari=2;

alert（typeof（i））;

alert（i.constructor）;

alert（typeof（i.constructor））;

你会看到第2行返回了字符串’number’，第3行返回了一串类似函数定义的代码字符串（这就是跟《精通JavaScript》一书中介绍的不一样的地方）。

我们再用typeof检查一下constructor到底是个什么样类型的属性，第4行返回结果’function’，也就是说，实际上constructor是一个函数，更确切地说是一个构造函数。

这时你就可以知道，为什么constructor可以检查出各种类型了。

有经验的程序员看到这里应该知道要怎么利用constructor来检查变量类型了。

方法有多种，这里提供一种比较容易理解的方法。

其实想法很简单，就是把construcor转化为字符串，通过寻找匹配字符串（function名）来确定是否指定类型。

如下例子：

functionuser（）{};

vari=newuser（）;

alert（（i.constructor+”）.match（/user/）==null）;

这仅仅是个简单的例子。

如果返回true则变量i不是user类型，返回false则变量是user类型。

当然，这样检测是不够精确的，比如其实他是一个myuser类型的时候，同样会被认为是user类。

所以你需要书写更精确的正则表达式去进行匹配。

可以这样简单改进你的正则表达式：

/functionuser\（\）/

替换上面代码段中的/user/。

当然，如果你的构造函数原型是user（a），那么应该这样书写你的正则表达式：

/functionuser\（a\）/

提醒：

Object/Array/Function/String/Number/Boolean

在你的正则表达式中，一定要将这些单词的首字母大写！

！

而如果该类型是自定义类型，则根据你定义的时候标识符的写法确定。

Array对象方法

方法

描述

FF

IE

concat（）

连接两个或更多的数组，并返回结果。

1

4

join（）

把数组的所有元素放入一个字符串。

元素通过指定的分隔符进行分隔。

1

4

pop（）

删除并返回数组的最后一个元素

1

5.5

push（）

向数组的末尾添加一个或更多元素，并返回新的长度。

1

5.5

reverse（）

颠倒数组中元素的顺序。

1

4

shift（）

删除并返回数组的第一个元素

1

5.5

slice（）

从某个已有的数组返回选定的元素

1

4

sort（）

对数组的元素进行排序

1

4

splice（）

删除元素，并向数组添加新元素。

1

5.5

toSource（）

返回该对象的源代码。

1

-

toString（）

把数组转换为字符串，并返回结果。

1

4

toLocaleString（）

把数组转换为本地数组，并返回结果。

1

4

unshift（）

向数组的开头添加一个或更多元素，并返回新的长度。

1

6

valueOf（）

返回数组对象的原始值

1

4

concat（）

语法：

array.concat（value,...）

其中value,...要添加到array中的值，可以是任意多个。

返回值：

一个新数组，是把指定的所有参数添加到array中构成的。

描述：

方法concat（）将创建并返回一个新数组，这个数组是将所有参数都添加到array中生成的。

它并不修改array。

如果要进行concat（）操作的参数是一个数组，那么添加的是数组中的元素，而不是数组。

例子：

   vara=[1,2,3];

   a.concat（4,5）;   //Returns[1,2,3,4,5]

   a.concat（[4,5]）;   //Returns[1,2,3,4,5]

   a.concat（[4,5],[6,7]）;   //Returns[1,2,3,4,5,6,7]

   a.concat（4,[5,[6,7]]）;   //Returns[1,2,3,4,5,[6,7]]

join（）

语法：

array.join（）

array.join（separator）

separator

在返回的字符串中用于分隔数组元素的字符或字符串，这是选用的。

如果省略了这个参数，用逗号作为分隔符。

返回值：

一个字符串，通过把array的每个元素转换成字符串，然后把这些字符串连接起来，在两个元素之间插入separator字符串而生成。

描述：

方法join（）把每个数组元素转换成一个字符串，然后把这些字符串连接起来，在两个元素之间插入separator字符串。

返回生成的字符串。

可以用String对象的split（）方法执行相反的操作，即把一个字符串分割成数组元素。

详情参见“String.split（）”。

例子：

  var a=newArray（1,2,3,"testing"）;

   vars=a.join（"+"）;   //sistheString"1+2+testing"

pop（）

语法：

arrayObject.pop（）

其中value,...要添加到array中的值，可以是任意多个。

返回值：

arrayObject的最后一个元素。

描述：

pop（）方法将删除arrayObject的最后一个元素，把数组长度减1，并且返回它删除的元素的值。

如果数组已经为空，则pop（）不改变数组，并返回undefined值。

例子：

vararr=newArray（["George","John","Thomas"]）

document.write（arr）//ReturnsGeor