zoukankan      html  css  js  c++  java
  • 【JS】JavaScript 内置对象:Array 数组对象

    JavaScript 是一种基于对象的语言。对象是一种特殊的数据类型,由变量和函数共同构成。

    其中变量称为对象的属性,函数称为对象的方法。

    在 JavaScript 中,对象分为:

    1. 内置对象
    2. 自定义对象

    内置对象是指系统预先定义好的,直接使用的对象。常见的内置对象有:

    • Array 数组对象
    • String 字符串对象
    • Data 日期对象
    • Math 数学对象
    • RegExp 正则表达式对象

     

    Array 数组对象

    constructor,返回对象的构造函数

    length,数组的长度

    prototype,为对象添加属性和方法

     

    concat () ,连接数组。

    join () ,将数组元素放入字符串,并用指定分隔符隔开。

    push (),向数组末尾添加元素,并返回新的长度。

     

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

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

     

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

    slice () ,从已有的数组中返回选定的元素。

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

     

    splice (),在数组中添或/删除 元素,然后返回被删除的元素。

    unshift () ,向数组的开头添加元素,并返回新的长度。

     

     

    数组(Array)是一个有序的数据集合。

    与 Java 语言不同的是:在 JavaScript 中,定义数组时不需要指定数组的数据类型,而且可以将不同类型的数据存到一个数组中。

    1. 数组对象的创建

    格式如下:

    var array1=new Array();
    var array2=new Array(size);
    var array3=new Array(element0,element1,...);
    var array4=[
    element0,element1,...];
    • 在使用无参构造函数创建数组时,返回一个空数组,数组长度为 0.
    • 使用 Array(size) 创建数组时,返回一个长度为 size 的数组,且数组中的元素均为 undefined。
    • 使用 Array(element0,element1,...) 创建数组时,数组的长度等于参数个数,使用参数来初始化数组。
    • [element0,element1,...] 还可以使用简写形式来创建数组。

    代码示例:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>test</title>
    </head>
    <body>
      <input id="btn1" type="button" value="btn1"/>
      <input id="btn2" type="button" value="btn2"/>
      <input id="btn3" type="button" value="btn3"/>
      <script type="text/javascript">
        var array1=new Array();
        document.getElementById("btn1").onclick=function(){
            alert(array1.length);
        }
        
        var array2=new Array(3);
        array2[0]=0;
        array2[1]=1;
        array2[2]=2;
        document.getElementById("btn2").onclick=function(){
            var str="array2[3] : ";
            for(var i in array2){
                str+=i+" ";
            }
            alert(str);
        }
        
        var array3=new Array("1",2,true);
        document.getElementById("btn3").onclick=function(){
            var str="array3[3] : ";
            for(var i=0;i<array3.length;i++){
                str+=typeof(array3[i])+" ";
            }
            alert(str);
        }
      </script>
    </body>
    </html>

    效果演示:

     

     

    2. 数组对象的属性

    constructor:返回对象的函数原型,也就是我们常说的构造函数。

    <script type="text/javascript">
      var arr=new Array(6); 
      document.getElementById("btn1").onclick=function(){
          alert(arr.constructor);
      }
      
      function person(name,age){
          this.name=name;
          this.age=age;
      }
      var p=new person("老七",20);
      document.getElementById("btn2").onclick=function(){
          alert(p.constructor);
      }
    </script>

    ② length:数组的长度。

    ③ prototype:为对象添加属性和方法。

    <script type="text/javascript">
      function person(name,age){
          this.name=name;
          this.age=age;
      }
      var p=new person("老七",20);
      person.prototype.sex=null;
      p.sex="";
      document.getElementById("btn2").onclick=function(){
          alert(p.name+" "+p.age+" "+p.sex);
      }
    </script>

    3.数组对象的常用方法

    <script type="text/javascript">
      var array1=new Array(3);
      array1[0]=0;
      array1[1]=1;
      array1[2]=2;
    
      var array2=new Array(6);
      array2[0]="10";
      array2[1]="5";
      array2[2]="40";
      array2[3]="25";
      array2[4]="1000";
      array2[5]="1";
      ...
    </script>

    concat ( param1 , param2 , ... ) ,连接两个或多个数组。

    var concatArray=array1.concat([1,0]); //concatArray=[0.1,2,0,1] , array1=[0,1,2]
    • concat() 方法至少需要提供一个 param 参数。
    • 参数 param 可以是具体的值,也可以是数组对象。
    • 多个参数之间使用逗号, 隔开。
    • concat() 方法返回的是合并后的新数组,原数组保持不变。

    join ( “separator” ) ,把数组中的所有元素放入一个字符串,并用指定的分隔符隔开。

    var str=array1.join("-"); //str="0-1-2"
    • 参数 separator 可选,作为数组元素之间的之间的分隔符,默认为逗号, 。

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

    var newLength=array1.push(1,0); //newLength=5,array1=[0,1,2,1,0] 
    • newElement 参数至少有一个。
    • 根据参数的顺序将参数依次追加到数组的尾部,无需创建新的数组。

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

    var array1End=array1.pop(); //array1End=2,array1=[0,1]

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

    var array1Top=array1.shift(); //array1Top=0,array1=[1,2]

    reverse (),在原有数组的基础上,颠倒数组中元素的顺序,不会创建新的数组。

    array1.reverse(); //array1=[2,1,0]

    slice ( start , [end] ) ,从已有的数组中返回选定的元素。

    var sliceElements=array1.slice(1,3);  //sliceElements=[1,2],array1=[0,1,2]
    • 参数 start 是必需的,表示元素选取的开始位置。
    • 参数 end 可选,表示元素选取的结束位置(不包括 end)。
    • 当参数 end 省略时,将选取从 start 开始到数组末尾的所有元素。
    • 当参数 end 省略时,start 允许取负数,-1 表示字符串的最后一个字符,-2 表示倒数第二个字符,其他以此类推。

    sort ( [sortby] ) ,对数组中的元素进行排序。

    array2.sort(); //array2=["1","10","1000","25","40","5"]
    
    function sortStrNumber(a,b){
        return a-b;
    }
    array2.sort(sortStrNumber); //array2=["1","5","10","25","40","1000"] 
    • 如果调用该方法时没有使用参数,将按照字符编码的顺序进行排序。
    • 如果想按照其他标准进行排序,就需要提供比较函数。比较函数应该具有两个参数 a 和 b,其返回值如下:

    若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

    若 a 等于 b,则返回 0。

    若 a 大于 b,则返回一个大于 0 的值。

    splice ( index , howmany , [item1,item2...] ),在数组中添或/删除 一些元素,然后返回被删除的元素。

    var delElements=array2.splice(2,3,["0","0"]); //delElements=["40","25","1000"],array2=["10","5","0","0","1"]
    • 参数 index 必需,规定添加或删除元素的位置,index 为负数时,从数组末尾向前计数,例如 -1 表示字符串的最后一个字符,-2 表示倒数第二个字符,其他以此类推。
    • 参数 howmany 必需,表示要删除元素的数量,0 代表不删除数据。
    • item1,item2...可选,表示向数组中添加或替换的新元素。
    • 该方法在原数组基础上实现,不会生成新副本。

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

    var newLength=array1.unshift(100,99); //newLength=5,array1=[100,99,0,1,2] 
    • 第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。
    • 该方法不创建新的数组,而是直接修改原有的数组。

    二维数组

    在 JavaScript 中,没有二维或多维数组,不能通过 new Array() 的方式来创建二维数组。

    但是,因为变量是弱数据类型,数组中存放的数据可以是数值型、字符型、布尔型、对象和数组等类型。

    所以,可以通过在一维数组中存放另一个数组来模拟实现二维数组。

    代码示例:

    <script type="text/javascript">
      var title=new Array("电影类型","电影名称","票价");
      var movies=new Array();
      movies[0]=["喜剧","《西红柿首富》","1¥"];
      movies[1]=["科幻","《猩球崛起》","2¥"];
      movies[2]=["剧情","《肖申克的救赎》","3¥"];
      
      document.write("<table border='1'>");
      document.write("<tr>");
      for(var i=0;i<title.length;i++){
          document.write("<th>"+title[i]+"</th>");
      }
      document.write("</tr>");
      
      for(var i=0;i<movies.length;i++){
          document.write("<tr>");
          for(var j=0;j<movies[i].length;j++){
              document.write("<td>"+movies[i][j]+"</td>");
          }
          document.write("</tr>");
      }
      document.write("</table>");
    </script>

    效果演示:

     

  • 相关阅读:
    页面布局之简单两列布局——全屏,左边固定,右边自适
    Linq To Sql学习经验
    C#、.NET Framework、CLR的关系
    LINQ查询知识总结:案例分
    泛型的理解
    win7系统如何安装使用IIS(网站服务器)
    DataGridView实现各种效果
    对路径的访问被拒绝,解决之后又报-未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序。
    sublime text 设置SCSS的查看语法
    VS建解决方案
  • 原文地址:https://www.cnblogs.com/bjxqmy/p/12956620.html
Copyright © 2011-2022 走看看