js中的Array对象属性和方法整理

最新推荐文章于 2021-10-09 16:10:44 发布

frontend_frank

最新推荐文章于 2021-10-09 16:10:44 发布

阅读量228

点赞数

本文链接：https://blog.csdn.net/frontend_frank/article/details/102459925

版权

Array数组的3个属性，length 属性、prototype 属性、constructor 属性使用

1.1 length

说明：Length属性表示数组的长度，即其中元素的个数。因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。和其他大多数语言不同的是，JavaScript数组的length属性是可变的，这一点需要特别注意。当length属性被设置得更大时，整个数组的状态事实上不会发生变化，仅仅是length属性变大；当length属性被设置得比原来小时，则原先数组中索引大于或等于length的元素的值全部被丢失。

下面是演示改变length属性的例子：

var arr=[12,23,5,3,25,98,76,54,56,76]; //定义了一个包含10个数字的数组

console.log(arr.length); //显示数组的长度10

arr.length=12; //增大数组的长度

console.log(arr.length); //显示数组的长度已经变为12

console.log(arr[8]); //显示第9个元素的值，为56

arr.length=5; //将数组的长度减少到5，索引等于或超过5的元素被丢弃

console.log(arr[8]); //显示第9个元素已经变为"undefined"

arr.length=10; //将数组长度恢复为10

console.log(arr[8]); //虽然长度被恢复为10，但第9个元素却无法收回，显示"undefined"

由上面的代码我们可以清楚的看到length属性的性质。但length对象不仅可以显式的设置，它也有可能被隐式修改。JavaScript中可以使用一个未声明过的变量，同样，也可以使用一个未定义的数组元素（指索引超过或等于length的元素），这时，length属性的值将被设置为所使用元素索引的值加1。

例如下面的代码：

var arr=[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。无论如何，对于习惯于强类型编程的开发人员来说，这是一个很令人惊讶的特性。事实上，使用new Array()形式创建的数组，其初始长度就是为0，正是对其中未定义元素的操作，才使数组的长度发生变化。

由上面的介绍可以看到，length属性是如此的神奇，利用它可以方便的增加或者减少数组的容量。因此对length属性的深入了解，有助于在开发过程中灵活运用。

1.2 prototype

说明：prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法，而且特殊的地方便在于：它是一个给类的对象添加方法的方法！这一点可能听起来会有点乱，别急，下面我便通过实例对这一特殊的方法作已下讲解：

　　首先，我们要先了解一下类的概念，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;

return this .length;

}

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

实现方法：

Array.prototype.pushPro = function (arguments) {

var currentLength = this .length;

for ( var i = 0; i < arguments.length; i++) {

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

}

return this .length;

}

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

让我们来实现他！

实现方法：

Array.prototype.remove= function (index)

{

if (isNaN(index)|| index > this .length){ return false ;}

for ( var i=0,n=0;i< this .length;i++)

{

if ( this [i]!= this [index])

{

this [n++]= this [i]

}

this .length-=1

}

(3) String.length

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

实现方法：

String.prototype.cnLength = function (){

var arr= this .match(/[^\x00-\xff]/ig);

return this .length+(arr== null ?0:arr.length);

}

试验：

console.log("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 );

var str = this .substr(0,num);

if (!mode) return str;

var n = str.Tlength() - str.length;

num = num - parseInt(n/2);

return this .substr(0,num);

}

试验：

console.log("EaseWe空间Spaces".left(8)) -> 显示 EaseWe空间

console.log("EaseWe空间Spaces".left(8,true)) -> 显示 EaseWe空

2) Date.DayDiff()

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

实现方法：

Date.prototype.DayDiff = function (cDate,mode){

try {

cDate.getYear();

} catch (e){

return (0);

}

var base =60*60*24*1000;

var result = 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));

}

试验：

console.log((new Date()).DayDiff((new Date(2002,0,1)))) -> 显示 329

console.log((new Date()).DayDiff((new Date(2002,0,1)),"m")) -> 显示 10

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

(3) Number.fact()

作用：某一数字的阶乘　　　　

实现方法：

Number.prototype.fact= function (){

var num = Math.floor( this );

if (num<0) return NaN;

if (num==0 || num==1)

return 1;

else

return (num*(num-1).fact());

}

试验：

console.log((4).fact()) -> 显示 24

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

1.3 Constructor

说明：表示创建对象的函数。始终指向创建当前对象的构造函数。

比如下面例子：

// 等价于 var foo = new Array(1, 56, 34, 12);

var arr = [1, 56, 34, 12];

console.log(arr.constructor === Array); // true

// 等价于 var foo = new Function();

var Foo = function () { };

console.log(Foo.constructor === Function); // true

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

var obj = new Foo();

console.log(obj.constructor === Foo); // true

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

console.log(obj.constructor.constructor === Function); // true

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

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

如下例所示：

 
   function  
   Person(name) { 
  
   this 
   .name = name; 
  
   }; 
  
   Person.prototype.getName =  
   function 
   () { 
  
   return  
   this 
   .name; 
  
   }; 
  
   var  
   p =  
   new  
   Person( 
   "ZhangSan" 
   ); 
  
   console.log(p.constructor === Person);   
   // true 
  
   console.log(Person.prototype.constructor === Person);  
   // true 
  
   // 将上两行代码合并就得到如下结果 
  
   console.log(p.constructor.prototype.constructor === Person);  
   // true

当时当我们重新定义函数的prototype时（注意：和上例的区别，这里不是修改而是覆盖），constructor属性的行为就有点奇怪了，

如下示例：

function Person(name) {

this .name = name;

};

Person.prototype = {

getName: function () {

return this .name;

}

};

var p = new Person( "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即可，

如下示例：

function Person(name) {

this .name = name;

};

Person.prototype = new Object({

getName: function () {

return this .name;

}

});

Person.prototype.constructor = Person;

var p = new Person( "ZhangSan" );

console.log(p.constructor === Person); // true

console.log(Person.prototype.constructor === Person); // true

console.log(p.constructor.prototype.constructor === Person); // true

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

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

var i;

console.log( typeof (i));

console.log(i.constructor);

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

你可以看到第2行返回了字符串’undefined’，而第三行则发生了错误，原因是i变量还没有类型定义，自然也没有constructor的存在。从这一点上看，typeof可以检查到变量是否有定义，而construct只能检查已定义变量的类型。

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

var i = 2;

console.log( typeof (i));

console.log(i.constructor);

console.log( typeof (i.constructor));

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

我们再用typeof检查一下constructor到底是个什么样类型的属性，第4行返回结果’function’，也就是说，实际上constructor是一个函数，更确切地说是一个构造函数。这时你就可以知道，为什么constructor可以检查出各种类型了。

有经验的程序员看到这里应该知道要怎么利用constructor来检查变量类型了。方法有多种，这里提供一种比较容易理解的方法。

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

如下例子：

function user() {};

var i = new user();

console.log((i.constructor+”).match(/user/) == null );

这仅仅是个简单的例子。如果返回true则变量i不是user类型，返回false则变量是user类型。

当然，这样检测是不够精确的，比如其实他是一个myuser类型的时候，同样会被认为是user类。所以你需要书写更精确的正则表达式去进行匹配。

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

/function user/

替换上面代码段中的/user/。当然，如果你的构造函数原型是user(a)，那么应该这样书写你的正则表达式：

/function usera/

提醒：

Object / Array / Function / String / Number / Boolean

在你的正则表达式中，一定要将这些单词的首字母大写！！而如果该类型是自定义类型，则根据你定义的时候标识符的写法确定。

Array对象方法

方法描述

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

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

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

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

reverse() 颠倒数组中元素的顺序。

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

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

sort() 对数组的元素进行排序

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

toSource() 返回该对象的源代码。

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

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

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

valueOf()返回数组对象的原始值

1.4 concat()

语法： array.concat(value, ...)

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

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

描述：方法concat()将创建并返回一个新数组，这个数组是将所有参数都添加到array中生成的。它并不修改array。如果要进行concat()操作的参数是一个数组，那么添加的是数组中的元素，而不是数组。

例子：

var a = [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]]

1.5 join ()

语法： array.join()

array.join(separator)

separator

在返回的字符串中用于分隔数组元素的字符或字符串，这是选用的。如果省略了这个参数，用逗号作为分隔符。

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

描述：方法join()把每个数组元素转换成一个字符串，然后把这些字符串连接起来，在两个元素之间插入separator字符串。返回生成的字符串。

可以用String对象的split()方法执行相反的操作，即把一个字符串分割成数组元素。详情参见“String.split()”。

例子：

var a = new Array(1, 2, 3, "testing" );

var s = a.join( "+" ); // s is the String "1+2+testing"

1.6 pop()

语法： arrayObject.pop()

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

返回值： arrayObject 的最后一个元素。

描述： pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

例子：

var arr = new Array([ "George" , "John" , "Thomas" ])

document.write(arr) // Returns George,John,Thomas

document.write(arr.pop()) // Returns Thomas

document.write(arr) // Returns George,John

1.7 push()

语法： array.push(value, ...)

value, ... 要添加到array尾部的值，可以是一个或多个。

返回值：把指定的值添加到数组后的新长度。

描述：方法push()将马它的参数顺次添加到array的尾部。它直接修改array，而不是创建一个新的数组。方法push()和方法pop()用数组提供先进后出栈的功能。参阅"Array.pop()"中的示例。

例子：

var a = [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]]

1.8 reverse()

语法： array.reverse()

该方法会改变原来的数组，而不会创建新的数组。

返回值：

描述：Array对象的方法reverse()将颠倒数组中元素的顺序。它在原数组上实现这一操作作为替代：重排指定的array的元素，但并不创建新数组。如果对array有多个引用，那么通过所有引用都可以看到数组元素的新顺序。

例子：

a = new Array(1, 2, 3); // a[0] == 1, a[2] == 3;

a.reverse(); // Now a[0] ==3, a[2] == 1;

1.9 shift()

语法： array.shift()

返回值：数组原来的第一个元素。

描述：方法shift()将把array的第一个元素移出数组，返回那个元素的值，并且将余下的所有元素前移一们，以填补数组头部的空缺。如果数组是空的，shift()将不进行任何操作，返回undefiend值。注意，该方法不创建新的数组，而是直接修改原有的array。

方法sihft()和方法Array.pop()相似，只不过它在数组头部操作，而不是在尾部操作。该方法常常和unshift()一起使用。

例子：

var a = [1, [2, 3], 4];

a.shift(); // Return 1; a = [[2,3], 4];

a.shift(); // Return [2,3]; a = [4];

1.10 slice()

语法： array.slice(start, end)

start

数组片段开始处的数组下标。如果是负数，它声明从数组尾部开始算起的位置。也就是说-1指最后一个元素，-2指倒数第二个元素，以此类推。

end

数组片段结束处的后一个元素的数组下标。如果没有指定这个参数，切分的数组包含从start开始到数组结束的所有元素。如果这个参数是负数，它声明的是从数组尾部开始算起的元素。

返回值：一个新数组，包含从start到end（不包括该元素）指定的array元素。

描述：方法slice()将返回array的一部分，或者说是一个子数组。返回的数组包含从start开始到end之间的所有元素，但是不包括end所指的元素。如果没有指定end，返回的数组包含从start开始到原数组结尾的所有元素。

注意，该方法并不修改数组。如果想删除数组中的一段元素，应该使用方法Array.splice()。

例子：

var a = [1, 2, 3, 4, 5];

a.slice(0, 3); // Return [1,2,3]

a.slice(3); // Return [4,5]

a.slice(1, -1); // Return [2,3,4]

a.slice(-3, -2); // Return [3]; buggy in IE 4: return [1,2,3]

1.11 sort()

语法： array.sort()

array.sort(orderfunc)

orderfunc

用来指定按什么顺序进行排序的函数，可选。

返回值：对数组的引用。注意，数组在原数组上进行排序，不制作副本。

描述：方法sort()将在原数组上对数组元素进行排序，即排序时不创建新的数组副本。如果调用方法sort()时没使用参数，将按字母顺序（更精确地说，是按照字符编码的顺序）对数组中的元素进行排序。要实现这一点，首先应把数组的元素都转成字符串（如果有必要的话），以便进行比较。

如果想按照特别的顺序进行排序，就必须提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b，其返回值如下：

● 如果根据你的评判标准，a小于b，在排序后的数

例子：下面的代码展示了如何编写按数字顺序，而不是按字母顺序对数组进行排序的比较函数：

//An ordering function for a numerical sort

function numberorder(a, b) {

return a - b;

}

var a = new Array(33, 4, 1111, 222);

a.sort(); //Alphabetical sort: 1111, 222, 33, 4

a.sort(numberorder); //Numerical sort: 4, 33, 222, 1111

1.12 splice(start, deleteCount, value, ...)

语法： array.splice(start, deleteCount, value, ...)

start

开始插入和（或）删除的数组元素下标。

deleteCount

从start开始，包括start所指的元素在内要删除的元素个数。这个参数是先用的，如果没有指定它，splice()将删除从start开始到原数组结尾的所有元素。

value, ...要插入数组的零个或多个值，从start所指的下标处开始插入。

返回值：如果从array中删除了元素，则返回的是含有被删除的元素的数组。

描述：方法splice()将删除从start开始（包括start所指的元素在内）的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。位于插入或删除的元素之后的数组元素都会被移动，以保持它们与数组其它元素的连续性。注意，虽然splice()方法与slice()方法名称很相似，但作用不同，方法splice()直接修改数组。

例子：

var a = [1, 2, 3, 4, 5, 6, 7, 8];

a.splice(4); // Returns [5,6,7,8] ; a is [1,2,3,4]

a.splice(1, 2); // Returns [2,3] ; a is [1,4]

a.splice(1, 1); // Returns [4] ; a is [1]

a.splice(1, 0, 2, 3); // Returns [] ; a is [1,2,3]

1.13 toSource()

语法： object.toSource()

注释：该方法在 Internet Explorer 中无效。

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

描述： toSource() 方法表示对象的源代码。该原始值由 Array 对象派生的所有对象继承。toSource() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

例子：