• 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不一样

    实例

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>无标题文档</title>
     6 </head>
     7 <script type="text/javascript">
     8     var arr=new Array(3);
     9     arr[1001]=10;
    10     document.write(arr.length+"</br>");//返回值:1002
    11     var arr1=new Array("狗娃","狗剩","铁蛋");
    12     document.write(arr1.length+"</br>");//返回值:3
    13     var arr2=["张三","李四","王五","赵六"];
    14     document.write(arr2.length);//返回值:4
    15 </script>
    16 <body>
    17 </body>
    18 </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,将其作为空字符串处理。

    实例

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>无标题文档</title>
     6 </head>
     7 <script type="text/javascript">
     8     //正序排序
     9     var arr=[5,1,2,10,3];
    10     arr.sort(sortNumber);//不要sortNumber,的结果:1,10,2,3,5,  原因:他是一位一位的比较(字符串)。
    11     for(var index in arr){
    12         document.write(arr[index]+",");//返回值:1,2,3,5,10,
    13     }
    14     function sortNumber(num1,num2){//作用:保证该数组以整数的形式,按大小排序
    15         return num1-num2;
    16     }
    17 
    18     //倒序排序
    19     document.write("</br>");
    20     arr.reverse();
    21     for(var index in arr){
    22         document.write(arr[index]+",");//返回值:10,5,3,2,1,
    23     }
    24 
    25     //添加、加载进去
    26     document.write("</br>");
    27     arr.push(100);
    28     for(var index in arr){
    29         document.write(arr[index]+",");//返回值:10,5,3,2,1,100,
    30     }
    31 
    32     //删除最后一个元素
    33     document.write("</br>");
    34     document.write(arr.length);//返回值:6
    35     document.write("</br>");
    36     document.write("删除最后一个元素并返回该元素:"+arr.pop());//返回值:100
    37     //删除第一个元素
    38     document.write("</br>");
    39     document.write("删除第一个元素并返回该元素:"+arr.shift());//返回值:10
    40 
    41     //经过上面多步操作之后,该数组中留下来的元素
    42     document.write("</br>");
    43     for(var index in arr){
    44         document.write(arr[index]+",");//返回值:5,3,2,1,
    45     }
    46 
    47     //将指定的元素插入到数组的首位(下标为0的位置)
    48     document.write("</br>");
    49     arr.unshift(99);
    50     for(var index in arr){
    51         document.write(arr[index]+",");//返回值:99,5,3,2,1,
    52     }
    53     
    54     //移除从下标为0开始,并往后数两个(即:删除了两个元素99和5);并且向删除指定元素的位置插入85,70,80这三个元素。
    55     document.write("</br>");
    56     arr.splice(0,2,85,70,80);
    57     for(var index in arr){
    58         document.write(arr[index]+",");//返回值:85,70,80,3,2,1,
    59     }
    60 
    61     //返回指定下标区间内的元素
    62     document.write("</br>");
    63     var subArr=arr.slice(1,4);
    64     document.write("返回指定下标区间内的元素:"+subArr+"</br>");//返回值:70,80,3
    65 
    66     //用指定的分隔符分隔开的元素
    67     document.write("用指定的分隔符分隔开的元素:"+subArr.join("_")+"</br>");//返回值:70_80_3
    68 </script>
    69 <body>
    70 </body>
    71 </html>

    实例结果图

    1.2、例子

     JavaScript文件(ArrayTool.js

     1 // JavaScript Document
     2 /*
     3 需求:自定义一个js文件,在js文件中定义一个数组工具对象,
     4 该工具对象要找到一个最大值的方法,与找到元素对应下标的索引方法
     5 */
     6 var tool=new ArrayTool();
     7 function ArrayTool(){
     8     //找最大值
     9     this.getMax=function(arr){
    10         var max=arr[0];
    11         for(var i=0;i<arr.length;i++){
    12             if(arr[i]>max){
    13                 max=arr[i];
    14             }
    15                 
    16         }
    17             return max;
    18     }
    19     
    20     //找到对应元素的下标
    21     this.searchEls=function(arr,target){
    22         for(var i=0;i<arr.length;i++){
    23             if(arr[i]==target){
    24                 return i;
    25             }
    26         }
    27         return -1;
    28     }
    29 }

    HTML文件

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     2 "http://www.w3.org/TR/html4/loose.dtd">
     3 <html>
     4 <head>
     5 <script src="ArrayTool.js"></script>
     6 <script type="text/javascript">
     7     var arr=[12,7,99,80,90];
     8     var max=tool.getMax(arr);
     9     document.write(max+"</br>");
    10     var index=tool.searchEls(arr,90);
    11     document.write(index+"</br>")
    12 </script>
    13 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    14 <title>无标题文档</title>
    15 </head>
    16 
    17 <body>
    18 </body>
    19 </html>

    结果图

    2、prototype原型属性

    2.1、prototype要注意的细节

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

    2.2、例子

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>无标题文档</title>
     6 </head>
     7 <script type="text/javascript">
     8     //Array里面的原型模型的getMax方法=function()。
     9     Array.prototype.getMax=function(){//找最大值
    10         var max=this[0];
    11         for(var index=1;index<this.length;index++){
    12             if(this[index]>max){
    13                 max=this[index];
    14             }
    15         }
    16         return max;
    17     }
    18     
    19     //找指定数值的下标
    20     Array.prototype.searchEls=function(target){
    21         for(var index=0;index<this.length;index++){
    22             if(this[index]==target){
    23                 return index;
    24             }
    25         }
    26         return -1;
    27     }
    28     
    29     var index=new Array(12,18,21,99,88);
    30     var max=index.getMax();    
    31     document.write("最大值:"+max+"</br>");//返回值:99
    32     
    33     var index1=index.searchEls(18);
    34     document.write("下标值:"+index1+"</br>");//返回值:1
    35     
    36     var arr=[13,22,80,70,60,90];
    37     var max1=arr.getMax();
    38     document.write("最大值:"+max1+"</br>");//返回值:90
    39 </script>
    40 <body>
    41 </body>
    42 </html>

    结果图

    原创作者:DSHORE

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

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

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

  • 相关阅读:
    27:单词翻转
    c++自制锁机程序--两行代码
    19:字符串移位包含问题
    18:验证子串
    23:二维数组回形遍历
    Java获取程序或项目路径的常用方法
    java 、Android 提交参数转码问题
    java 上传图片 打水印
    使用getGenericSuperclass()和getActualTypeArguments()将DAO做成泛型
    zoj 1010 Area【线段相交问题】
  • 原文地址:https://www.cnblogs.com/dshore123/p/9469009.html
Copyright © 2020-2023  润新知