java基础64 JavaScript中的Arrays数组对象和prototype原型属性（网页知识）

1、Arrays数组对象的创建方式

方式一:

     var 变量名=new Array(); //创建一个长度为0的数组.

方式二:

     var 变量名=new Array(长度); //创建一个指定长度的数组对象

方式三:

     var 变量名=new Array("元素1","元素2".......);//注意：这里是“小括号”，而不是“花括号”。和java不一样

方式四:

     var 变量名=["元素1","元素2","元素3"........];//注意：这里是“中括号”，而不是“花括号”。和java不一样

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <script type="text/javascript">

     var arr=new Array(3);

     arr[1001]=10;

     document.write(arr.length+"</br>");//返回值：1002

     var arr1=new Array("狗娃","狗剩","铁蛋");

     document.write(arr1.length+"</br>");//返回值：3

     var arr2=["张三","李四","王五","赵六"];

     document.write(arr2.length);//返回值：4

 </script>

 <body>

 </body>

 </html>

1.1、Arrays数组的常用方法

sort()：对当前数组进行排序，并返回已经进行了排序的此Array对象。不会创建新对象，是在指定数组中直接进行排序。
   reverse()：对当前数组进行反转排序，返回一个元素顺序被反转的 Array 对象。不会创建新对象，是在指定数组中直接进行排序。
   push( [item1 [item2 [. . . [itemN ]]]] )：将以新元素出现的顺序添加这些元素。如果参数之一为数组，那么该数组将作为单个元素添加到数组中。

   pop()：移除数组中的最后一个元素并返回该元素。如果该数组为空，那么将返回 undefined。
   shift()：移除数组中的第一个元素并返回该元素。如果该数组为空，那么将返回 undefined。
   unshift([item1[, item2 [, . . . [, itemN]]]])：将指定的元素插入数组开始位置并返回该数组。

splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])：移除从start位置开始指定的deleteCount个元素，并插入新元素，从而修改concat([item1[, item2[, . . . [, itemN]]]])。
           返回一个新数组，这个新数组是由两个或更多数组组合而成的。原数组不变。
           要加的项目（item1 … itemN）会按照从左到右的顺序添加到数组。
           如果某一项为数组，那么添加其内容到 array1 的末尾。
           如果该项目不是数组，就将其作为单个的数组元素添加到数组的末尾。
   slice(start, [end])：返回一个包含了指定的部分元素的数组。将返回索引大于等于start且小于end的一段。原数组不变。
   join(separator)：把所有元素由指定的分隔符分隔开来组成一个字符串，返回这个字符串值。如果数组中有元素没有定义或者为 null，将其作为空字符串处理。

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <script type="text/javascript">

     //正序排序

     var arr=[5,1,2,10,3];

     arr.sort(sortNumber);//不要sortNumber，的结果：1,10,2,3,5,  原因：他是一位一位的比较(字符串)。

     for(var index in arr){

         document.write(arr[index]+",");//返回值：1,2,3,5,10,

     }

     function sortNumber(num1,num2){//作用：保证该数组以整数的形式，按大小排序

         return num1-num2;

     }

     //倒序排序

     document.write("</br>");

     arr.reverse();

     for(var index in arr){

         document.write(arr[index]+",");//返回值：10,5,3,2,1,

     }

     //添加、加载进去

     document.write("</br>");

     arr.push(100);

     for(var index in arr){

         document.write(arr[index]+",");//返回值：10,5,3,2,1,100,

     }

     //删除最后一个元素

     document.write("</br>");

     document.write(arr.length);//返回值：6

     document.write("</br>");

     document.write("删除最后一个元素并返回该元素："+arr.pop());//返回值：100

     //删除第一个元素

     document.write("</br>");

     document.write("删除第一个元素并返回该元素："+arr.shift());//返回值：10

     //经过上面多步操作之后，该数组中留下来的元素

     document.write("</br>");

     for(var index in arr){

         document.write(arr[index]+",");//返回值：5,3,2,1,

     }

     //将指定的元素插入到数组的首位(下标为0的位置)

     document.write("</br>");

     arr.unshift(99);

     for(var index in arr){

         document.write(arr[index]+",");//返回值：99,5,3,2,1,

     }

     //移除从下标为0开始，并往后数两个(即：删除了两个元素99和5)；并且向删除指定元素的位置插入85,70,80这三个元素。

     document.write("</br>");

     arr.splice(0,2,85,70,80);

     for(var index in arr){

         document.write(arr[index]+",");//返回值：85,70,80,3,2,1,

     }

     //返回指定下标区间内的元素

     document.write("</br>");

     var subArr=arr.slice(1,4);

     document.write("返回指定下标区间内的元素："+subArr+"</br>");//返回值：70,80,3

     //用指定的分隔符分隔开的元素

     document.write("用指定的分隔符分隔开的元素："+subArr.join("_")+"</br>");//返回值：70_80_3

 </script>

 <body>

 </body>

 </html>

实例结果图

1.2、例子

JavaScript文件（ArrayTool.js）

 // JavaScript Document

 /*

 需求:自定义一个js文件,在js文件中定义一个数组工具对象,

 该工具对象要找到一个最大值的方法,与找到元素对应下标的索引方法

 */

 var tool=new ArrayTool();

 function ArrayTool(){

     //找最大值

     this.getMax=function(arr){

         var max=arr[0];

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

             if(arr[i]>max){

                 max=arr[i];

             }

         }

             return max;

     }

     //找到对应元素的下标

     this.searchEls=function(arr,target){

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

             if(arr[i]==target){

                 return i;

             }

         }

         return -1;

     }

 }

HTML文件

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

 "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <script src="ArrayTool.js"></script>

 <script type="text/javascript">

     var arr=[12,7,99,80,90];

     var max=tool.getMax(arr);

     document.write(max+"</br>");

     var index=tool.searchEls(arr,90);

     document.write(index+"</br>")

 </script>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 <title>无标题文档</title>

 </head>

 <body>

 </body>

 </html>

结果图

2、prototype原型属性

2.1、prototype要注意的细节

1.prototype是函数(function)必备的一个属性(即:保留属性)，只要有function，就一定有prototype属性
    2.prototype的值是一个对象
    3.可以任意修改函数的prototype属性值
    4.一个对象会自动拥有prototype的所有成员属性和方法

2.2、例子

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <script type="text/javascript">

     //Array里面的原型模型的getMax方法=function()。

     Array.prototype.getMax=function(){//找最大值

         var max=this[0];

         for(var index=1;index<this.length;index++){

             if(this[index]>max){

                 max=this[index];

             }

         }

         return max;

     }

     //找指定数值的下标

     Array.prototype.searchEls=function(target){

         for(var index=0;index<this.length;index++){

             if(this[index]==target){

                 return index;

             }

         }

         return -1;

     }

     var index=new Array(12,18,21,99,88);

     var max=index.getMax();

     document.write("最大值："+max+"</br>");//返回值：99

     var index1=index.searchEls(18);

     document.write("下标值："+index1+"</br>");//返回值：1

     var arr=[13,22,80,70,60,90];

     var max1=arr.getMax();

     document.write("最大值："+max1+"</br>");//返回值：90

 </script>

 <body>

 </body>

 </html>

结果图

原创作者：DSHORE

作者主页：http://www.cnblogs.com/dshore123/

原文出自：https://www.cnblogs.com/dshore123/p/9469009.html

欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的推荐，或评论，谢谢！）