zoukankan      html  css  js  c++  java
  • javascript权威指南,第七章 对象和数组

    在javascript中,对象和数组是两种基本数据类型。对象是已命名的值的一个集合,而数组是特殊的对象,它是数组的一组有序的集合。

    7.1 创建对象

    对象就是一个无序的属性集合。每个属性都有自己的名字和值。

    方法一:在javascript代码中加入一个对象直接量。对象直接量是用逗号分隔开的一堆堆的属性名和值的列表,包含在一个花括号中,每个属性名可以是一个javascript标示符或一个字符串,而每个属性值可以是一个常量或者任意的javascript表达式。

    例子

    1 var empty = {};//一个没有属性的对象
    2 var point = { x:0, y:0};
    3 var circle = { x:point.x, y:point.y+1, radius:2 };
    4 var homer = {
    5     "name": "Hmer Simpson",
    6     "age": 34,
    7    "married" : true,
    8    'email' : "homer@example.com"
    9 }

     方法二:new运算符可以创建具体的一类对象。在new的后面跟着调用一个构造函数,它用来初始化对象的属性。

    例子:

    var a = new Array();//创建一个空的数组
    var d = new Date();//创建一个对象用来表示当前时间和日期
    var r = new RegExp("javascript","i");//创建一个字符匹配的对象

    7.2对象属性

    通常用运算符“.”来存取对象的属性的值。对象的属性和变量的工作方式相似。

    来看例子

    var book = {};
    
    book.title = "Javascript :The Definitive Guide"
    
    book.chapter1 = new Object();
    book.chapter1.title = "Introduction to Javascript";
    book.chapter1.pages = 11;
    book.chapter2 = { title:"Lexical Structure",pages:6};
    
    alert("Outline:"+book.title + "\n\t"+
           "Chapter 1 " + book.cjapter1.title + "\n\t" +
           "Chapter 2 " + book.chapter2.title);

    7.2.1属性的枚举

    属性的枚举就是可以获得对象中所有属性的值,可以使用for /in循环获得。

    下面的代码展示了一个函数,可以用它来列出对象的所有属性名:

     function DispalyPropertyNames(obj) {
       var names ="";
       for(var name in obj) names +=name +"\n";
       alert(names);
    }

    注意:for/in能枚举出所有的用户定义的属性,但是却不能枚举出某些预定义的属性或方法。

    7.2.2 检查属性的存在性

    一般用in运算符检查属性是否存在,

    例如

    //if o has a property named "x".then set it
    if("x" in 0 ) x.o = 1;

    但是in运算符不经常用到,因为,查询一个不存在的值,会返回undefined,上面的代码通常是这样写的

    // if propery x exists and is not defined , set it
    if(x.0 !==undefined) 
    x.o = 1;

    7.2.3 删除属性

    可以使用delete运算符来删除一个对象的属性:

    delete book.chapter2.title

    注意,删除属性不仅仅是把属性设置为undefined,它实际上从对象此属性。在删除之后,for/in将不会枚举该属性,并且运算符in也不会检测到该属性。

    7.4通用的object属性的和方法

    javascript所有的类都继承自Object类,它下面有更加具体分类,比如使用Date()来创建对象,自己定义自己的属性和份内国法。但是,所有创建的对象也支持Object所定义的方法和属性。

    7.4.1 construction 属性

    在javascript中每个对象都有一个construction属性,用于初始化这个对象的构造函数,也可以用于确定一个对象的类型。

    例如

    var d = new Date();
    d.constructor == Date;//true

    这段代码表示使用Date()构造函数创建了一个对象d,属性d.construction引用Date。

    他还可以确定一个未知值的类型:

    if((typeof o == "object")&&(o.construction  == Date))
    
    coding

    当然也可以写成这样子

    if((typeof o == "object")&&(o instanceof Date))
    
    coding

    7.4.2 toString()方法

    没有参数,

    返回一个某种程度上代表着对象的值的一个字符串。

    用法:

    当javascript需要把一个对象转化为一个字符串,就会调用这个方法。

    例如当使用+运算符把一个字符串和一个对象连接起来,就会把这个对象转化为一个字符串。

    var s = { x:1,y:1}.toString();

    但是默认的toString()方法并不能提供多少信息。建议可以自定义toString()方法。

    7.4.3 toLocaleString()方法

    返回对象的一个本地化字符串表示。

    但是 Object所定义的默认的toLocaleString()方法并不会本地化自己。

    子类可以idingyi他们自己的toLocaleString()方法版本。

    7.4.4 valueOf()方法

    valueOf()方法和toString()方法很像,但是valueOf()方法是把对象转化为一个基本数据类型,转化为数字时,系统或自动调用此方法。

    7.4.5 hasOwnProperty() 方法

    如果对象用一个单独的字符串参数所指定的名字来自本地定义的一个非继承的属性,hasOwnProperty() 方法就返回true,否则返回false。

    例如

    var 0 {};
    o.hasOwnProperty("undef");//false,这个属性没有定义
    o.hasOwnProperty("toString")//false,toString是继承的属性
    Math.hasOwnProperty("cos")//true,Math对象由一个cos属性
     

    7.4.6 propertyIsEunmerable()方法

    如果对象用一个单独的字符串参数所指定的名字来自本地定义的一个非继承的属性,且这个字符串可以用for/in枚举到,propertyIsEunmerable()方法返回true,否则返回false。

    例如

    var 0 =  {x:1};
    o.propertyIsEunmerable("x");//true存在,可以枚举到
    o.propertyIsEunmerable("y");//false这个属性不存在
    o.propertyIsEunmerable(“valeOf”);//false这个属性是继承过来的

    7.4.7 isPrototypeOf()方法

    如果isPrototypeOf()方法所属的对象是参数的原型对象,返回true,否则返回false。

    var 0 = {}
    Object.prototype.isPrototypeOf(o);//true o.constructor == Object
    Object..isPrototypeOf(o);//false
    o..isPrototypeOf(Object.prototype);//false
    Function.prototype.isPrototypeOf(Object);//true Obeject.constructor == Function

    7.5 数组

    数组是一个有序的,值的集合。每个值叫做一个元素,每个元素在数组中都有一个数字化的位置,叫做下标。数组里面的元素可以是任意类型的数据类型。也可以包含其他数组。

    创建数组的方法

    方法一:直接赋值创建

    var empty = []//创建了一个空数组
    
    var primes = [2,3,5,7,11];//一个有五个数值的数组
    
    var misc = [1.1,true,"a",];//包含不同的数据类型

    数组中的值,不一定是常数,可以使任意的表达式

    var base = 1023;
    
    var table =[base,base+1,base+3,base+3]

    数组也可以包含对象或者其他的数组

    var b= [[1,{x:1,y:2}],[2,{x:3,y:4}]];

    方法二:使用Array()构造函数

    可以使用下面三种不同的方式调用这个构造函数

    无参数调用

    var a = new Array();

    可以显示地制定数组前n个元素的值

    var a = new Array{4,5,5,2,1,"test"};

    这种构造函数带有参数,给数组赋值时是从元素0开始的

    传递一个数字参数,用于指定数组的长度

    var a = new Array(10);

    7.6 数组元素的读和写

    可以用运算符[]来读取数组元素的值

    合法的javascript语句写法如下

    value = a[0];
    
    a[1] = 3.14;
    
    i = 2;
    
    a[i] = 3;
    
    a[i+1] = "hello";
    
    a[a[i]] = a[0];

    7.6.1 添加数组新元素

    在c,java语言中,数组在创建时,必须给定元素个数,但是在javascript中,数组可以有任一个数的元素,而且任何时刻可以改变元素个数。

    对一个数组添加新的元素,只需要对它赋一个值即可

    a[10] = 10;

    在javascript中数组是稀疏的,意思就是只有真正存储在数组中的元素才能够由javascript分配到内存

    例如

    a[0] =1;
    
    a[1000] = "this is element 1000";//javascript解释器只给数组下标为0 和1000的元素分配内存,而不给0 到1000之间的那999个元素分配内存

    7.6.2 删除数组元素

    var arr=['a','b','c'];

      若要删除其中的'b',有两种方法:

      1.delete方法:delete arr[1]

      这种方式数组长度不变,此时arr[1]变为undefined了,但是也有好处原来数组的索引也保持不变,此时要遍历数组元素可以才用

      

    for(index in arr)
    {
       document.write('arr['+index+']='+arr[index]);
    }

      

          这种遍历方式跳过其中undefined的元素

      * 该方式IE4.o以后都支持了

      2.数组对象splice方法:arr.splice(1,1);

      这种方式数组长度相应改变,但是原来的数组索引也相应改变

      splice参数中第一个1,是删除的起始索引(从0算起),在此是数组第二个元素

      第二个1,是删除元素的个数,在此只删除一个元素,即'b';

      此时遍历数组元素可以用普通遍历数组的方式,比如for,因为删除的元素在

      数组中并不保留

      * 该方法IE5.5以后才支持

      值得一提的是splice方法在删除数组元素的同时,还可以新增入数组元素

      比如arr.splice(1,1,'d','e'),d,e两个元素就被加入数组arr了

      结果数组变成arr:'a','d','e','c' 

      <big>外一篇:</big>

      JavaScript通过设置数组的length属性来截断数组是惟一一种缩短数组长度的方法.如果使用delete运算符来删除数组中元素,虽然那个元素变成未定义的,但是数组的length属性并不改变两种删除元素,数组长度也改变的方法.

      /*
      * 方法:Array.remove(dx)
      * 功能:删除数组元素.
      * 参数:dx删除元素的下标.
      * 返回:在原数组上修改数组
      */
      
     //经常用的是通过遍历,重构数组.
     

    复制代码
    Array.prototype.remove=function(dx)
     {
      if(isNaN(dx)||dx>this.length){return false;}
      for(var i=0,n=0;i<this.length;i++)
      {
        if(this[i]!=this[dx])
        {
          this[n++]=this[i]
        }
      }
      this.length-=1
     }
     a = ['1','2','3','4','5'];
     alert("elements: "+a+"nLength: "+a.length);
     a.remove(0); //删除下标为0的元素
     alert("elements: "+a+"nLength: "+a.length);
    复制代码

      
     

    复制代码
    /*
      * 方法:Array.baoremove(dx)
      * 功能:删除数组元素.
      * 参数:dx删除元素的下标.
      * 返回:在原数组上修改数组.
      
    */
      
     //我们也可以用splice来实现.
      
     Array.prototype.baoremove = function(dx)
     {
      if(isNaN(dx)||dx>this.length){return false;}
      this.splice(dx,1);
     }
     b = ['1','2','3','4','5'];
     alert("elements: "+b+"nLength: "+b.length);
     b.baoremove(1); //删除下标为1的元素
     alert("elements: "+b+"nLength: "+b.length);
    复制代码

         我们知道,在IE5或更低的版本中,JavaScript的Array(数组)对象并未提供现成的删除数组元素的方法。在IE5.5+的版本中,虽然有 splice方法,但是并不是删除某一项(或几项),而仅仅是将某一项(或几项)的值清除,也就是说该项仍然存在,数组的长度并没有改变。

      事实上,我们可以自己为数组增加一个删除方法(注意,这里指的是将数组的某一项真正的从数组成员中移除)。或许你会想到用循环来为数组重新赋值,这样做当然可以,但效率很低。

      下面我们介绍利用Array对象的两个方法slice、concat来自定义删除数组的方法。

      具体代码如下,请注意里面的注释。

    --------------------------------------------------------------

    复制代码
    Array.prototype.del=function(n) { //n表示第几项,从0开始算起。
    //
    prototype为对象原型,注意这里为对象增加自定义方法的方法。
     if(n<0) //如果n<0,则不进行任何操作。
      return this;
     else
      return this.slice(0,n).concat(this.slice(n+1,this.length));
      /*
       concat方法:返回一个新数组,这个新数组是由两个或更多数组组合而成的。
             这里就是返回this.slice(0,n)/this.slice(n+1,this.length)
             组成的新数组,这中间,刚好少了第n项。
       slice方法: 返回一个数组的一段,两个参数,分别指定开始和结束的位置。
      
    */
    }
    //我们来试一试这个自己增加的方法
    var test=new Array(0,1,2,3,4,5);
    test=test.del(3); //从0算起,这里也就是删除第4项。
    alert(test);
    复制代码

    7.6.3 数组的长度

    可以使用属性length来看数组的长度,数组的length属性是自动更新的。

    例子

    var a = new Array();//a.length == 0
    
    a = new Array(10);//a.length == 10
    
    a = new Array(1,2,3); a.length == 3

    数组下标必须小于232-1,那么,length最大长度就是232-1。

    7.6.4遍历数组

    使用for循环和length属性,遍历数组元素

    var fruits = ["mango","banana","cherry","pear"];
    
    for(var i=0;i<fruits.length;i++)
    
    alert(fruit[i]);

    7.6.5 截断或增长数组

    数组的length属性可以读也可以写,如果length设置一个比当前数组的值小,那么在长度之外的元素就会被截断,长度之外的元素就会丢失;

    如果length设置的值比当前值大,那么新的、未定义的元素就会被添加到数组末尾使得数组增长到新指定的长度。

    7.7 数组的方法

    7.7.1 join() 方法

    join() 方法可以把数组的所有元素都转化成字符串,再把他们连接起来。可以指定一个可选的字符串来分隔结果字符串中的元素。

    例如

    var a = [1,2,3]
    
    var s = a.join();// s =="1,2,3"

    指定一个分隔符,生成结果稍有不同

    s = a.join(“,”)// s == "1, 2, 3"逗号后面有一空格

    方法Array.join()恰好与方法String.split()相反,后者是通过一个字符串分隔成几个片段来创建数组。

    7.2.2 reverse()方法

    reverse()方法将颠倒数组元素的顺序并返回颠倒后的数组。

    例如

    var a = new Array(1,2,3);//a[0] = 1,a[1] = 2,a[2] = 3
    
    a.reverse();//now a[0] = 3,a[1] = 2,a[2] = 1
    
    var s= a.join();// s == "3,2,1"

    7.7.3 sort()方法

    Array.sort()是在原数组上对数组元素进行排序,返回排序后的数据徐。如果调用sort()时不传递参数,那么它将按照字母顺序对数组元素进行排序。

    例如

    var a = new Array("banana","cherry","apple");
    
    a.sort();
    
    var s = a.join(", ")// s == "apple, banana,  cherry"

    如果数组中含有未定义的元素,这些元素将被放在数组的末尾。

    7.4.4 concat()方法

    concat()方法能创建并返回一个数组,这个数组包含了调用concat()的原始数组的元素,气候跟随的是concat()方法的参数。如果其中有些参数是数组,那么它将会被展开,其元素将被添加到返回的数组中,但是注意,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]]

    7.4.5 slice()方法

    slice()方法用于返回一个子数组。

    两个参数指定要返回的片段的起止点。

    返回的数组包含由第一个参数指定的元素和从那个元素开始到第二个参数指定的元素为止的元素,但是并不包含第二个参数所指定的元素。

    如果只有一个参数,那么返回的数组将包含从起始位置开始到原数组结束处的所有元素,

    如果两个参数中有一个是负数,那么它所指定的是相对于数组中的最后一个元素而言的元素。例如,参数值为-1指定的是数组的最后一个元素。

    var a = [1,2,3,4,5];
    
    a.slice(0,3);//retuens [1,2,3]
    
    a.slice(3);//retuens [1,2,3]
    
    a.slice(1,-1)//retuens [1,2,3]
    
    a.slice(-3,-2)//retuens [1,2,3]

    7.4.6 splice()方法

    定义和用法

    splice() 方法用于插入、删除或替换数组的元素。

    语法

    arrayObject.splice(index,howmany,element1,.....,elementX)

    返回值

    如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

    说明

    splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

    提示和注释

    注释:请注意,splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。

    实例

    例子 1

    在本例中,我们将创建一个新数组,并向其添加一个元素:

    <script type="text/javascript">
    
    var arr = new Array(6)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"
    arr[3] = "James"
    arr[4] = "Adrew"
    arr[5] = "Martin"
    
    document.write(arr + "<br />")
    arr.splice(2,0,"William")
    document.write(arr + "<br />")
    
    </script>

    输出:

    George,John,Thomas,James,Adrew,Martin
    George,John,William,Thomas,James,Adrew,Martin

    例子 2

    在本例中我们将删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素

    <script type="text/javascript">
    
    var arr = new Array(6)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"
    arr[3] = "James"
    arr[4] = "Adrew"
    arr[5] = "Martin"
    
    document.write(arr + "<br />")
    arr.splice(2,1,"William")
    document.write(arr)
    
    </script>

    输出:

    George,John,Thomas,James,Adrew,Martin
    George,John,William,James,Adrew,Martin

    例子 3

    在本例中我们将删除从 index 2 ("Thomas") 开始的三个元素,并添加一个新元素 ("William") 来替代被删除的元素:

    <script type="text/javascript">
    
    var arr = new Array(6)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"
    arr[3] = "James"
    arr[4] = "Adrew"
    arr[5] = "Martin"
    
    document.write(arr + "<br />")
    arr.splice(2,3,"William")
    document.write(arr)
    
    </script>

    输出:

    George,John,Thomas,James,Adrew,Martin
    George,John,William,Martin

    7.7.7 push()方法和pop()方法

    push()方法和pop()方法使我们可以像使用栈那样来使用数组。

    push()方法可以将一个或者udoge新元素附件到数组的尾部,然后返回数组的新长度。

    pop()方法删除数组的最后一个元素,减少数组的长度,返回它删除的值。

    注意,这两个方法都是在元素上修改数组。联合使用push()和pop(),就可以用javascript数组实现一个先进后出的栈。

    例如

    var stack = [];// stack:[]
    stack.push(1,2);// stack:[1,2]   returns 2
    stack.pop();// stack:[1]   returns 2
    stack.push(3);// stack[1,3] returns 2
    stack.pop();// stack:[1] returns 3
    stack.push([4,5]);// stack:[1,[4,5]] returns 2
    stack.pop();//  stack:[1] returns [4,5]
    stack.pop();//stack:[]   returns 1
  • 相关阅读:
    正交实验
    边界值
    等价类划分概述
    测试用例编写
    java基础复习(四)
    easyui datagrid 搜索功能
    一段代码把网站变成灰白色
    PHP 获取二维数组中某个key的集合
    如何使用Mobile_Detect来判断访问网站的设备:安卓,平板,电脑
    easyui validatebox 验证类型
  • 原文地址:https://www.cnblogs.com/huanhuan8808/p/3077931.html
Copyright © 2011-2022 走看看