• JavaScript读书笔记(6)-Array RegExp


    1、Array类型

    ECMAScript数组的每一项可以保存任何类型的数据,数组的大小也可以动态调整;

    (1) 创建数组

    第一种方式:Array构造函数

      var colors=new Array();

      var colors1=new Array(20);

      var colors2=new Array("rad","blue","green");

      var colors3=Array(3);

      var colors4=Array("Greg");

    第二种方式:数组字面量

      var colors=["red","blue","green"];

      var names=[];

    在使用数组字面量表示法时,不会调用Array构造函数;

    (2)读取和设置数组

    在读取和设置数组值时,要使用方括号并提供相应值的基于0的数字索引;

    在设置某个值的索引超过了数组现有项数,数组就会自动增加到该索引值加1的长度;

    数组的length属性不是只读的,通过这个属性,可以从数组的末尾移除项或向数组中添加新项;

      var colors=["red","blue","green"];

      colors[99]="black";

      alert(colors.length);  //100

      alert(colors[3]);  //undefined

    (3)检测数组

    第一种:instanceof操作符

      if(value instanceof Array){ //对数组的某些操作}

    instanceof假定单一的全局执行环境,若网页中有多个框架,存在两个以上不同的全局执行环境,存在两个以上不同版本的Array构造函数;

    第二种:Array.isArray()方法(ECMAScript5新增)

    确定某个值到底是不是数组,不管它是在哪个全局执行环境中创建的;

    (4)转换方法

    toString()方法返回数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串;

    valueOf()返回的还是数组;

    toLocaleString()方法也返回一个数组值的以逗号分隔的字符串,但调用的是每一项的toLocaleString方法;

    使用join方法可以使用不同的分隔符来构建字符串,只接受一个参数,即用作分隔的字符串;

    如果数组中的某一项值时null或者undefined,那么该值在以上方法中以空字符串表示;

    (5)栈方法(后进先出)

    ECMAScript为数组提供了push和pop方法,实现类似栈的行为;

    Push可以接受任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度;

    Pop方法从数组末尾移除最后一项,减少数组的length值,然会返回移除的项;

    (6)队列方法(先进先出)Push和shift方法

    shift方法移除数组中的第一个项并返回该项,同时数组长度减1;

    unshift方法能在数组前端添加人一个项并返回新数组的长度,

    (7)重排序方法

    Reverse方法反转数组项的顺序;

    Sort方法按照升序排列数组项,sort方法会调用每个数组项的tostring转型方法,然后比较得到的字符串,以确定如何排序,即使数组中每一项都是数值,sort方法比较的也是字符串;

      var values=[0,1,5,10,15];

      values.sort();

      alert(values);   //0,1,10,15,5

    Sort方法可以接受一个比较函数作为参数,以便我们制定那个值位于那个值的前面

      function compare(value1,value2)

      {

         if(value1<value2){return -1;}

         else if(value1>value2){return 1;}

         else{return 0;}

      }       

          Values.sort(compare);  //0,1,5,10,15

     对于数值型,compare函数更简单

       function compare(value1,value2)

      {

             Return value1-value2;

      }

    (8)操作方法

    Concat方法:基于当前数组中的所有项穿件一个新数组,它会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组,在没有参数的情况下,只是返回当前数组的副本;如果参数一或多个数组,会将数组中的每一项都添加到结果数组中;如果传递的值不是数组,这些值就会被简单地添加到结果数组的末尾;

    Slice方法,基于当前数组中的一或多个项创建一个新数组,一个参数时,返回从该参数指定位置开始到当前数组末尾的所有项,如果有两个参数,该方法返回起始和结束位置之间的项(但不包括结束位置的项),slice方法不会影响原始数组;

    如果slice方法的参数有一个负数,则用数组长度加上该数来确定相应的位置,在 一个包含5项的数组上调用slice(-2,-1)与调用slice(3,4)得到的结果相同;

    Splice方法:主要 是向数组中部插入项

    删除:可以删除任意数量的项,只需要两个参数:要删除的第一项的位置和要删除的项数,如splice(0,2)会删除数组中的前两项;

    插入:可以向指定位置插入任意数量的项,只需要提供3个参数:起始位置、0(要删除的项数)和要插入的项,如果要插入多个项,可以传入第四、第五、以至任意多个项;

    替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数,起始位置、要删除的项数和要插入的任意数量的项,插入的项不必与删除的项数相等;

    Splice方法始终都会返回一个数组,该数组汇总包含从原始数组中删除的项(如果没有删除任何项,则返回一个空数组);

    (9)位置方法

    Indexof和lastIndexOf方法,都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引;

    Indexof方法从数组的开头(位置0)开始向后查找,lasrIndexOf从数组的末尾开始向前查找;

    (10)迭代方法

    ECMAScript5为数组定义了5个迭代方法,每个方法都接受两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象-影响this的值,传入这些方法中的函数会接收三个参数:数组项的值,该项在数组中的位置和数组对象本身;

    Every:对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true;

    Filter:对数组中每一项运行给定的函数,返回该函数会返回true的项组成的数组;

    forEach:对数组中每一项运行给定的函数,没有 返回值;

    map:对数组中每一项运行给定的函数,返回每次函数调用的结果组成的数组;

    some:对数组中每一项运行给定的函数,如果该函数对任一项返回true,则返回true;

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

      var filterResult=numbers.filters.filter(function(item,index,array){

         return (item>2)

      })

      Alert(filterResult);  //[3,4,5,4,3]

    (11) 缩小方法

    ECMAScript5新增了两个缩小数组的方法:reduce和reduceRight,都会迭代数组的所有项,然后构建一个最终返回的值;reduce从数组的第一项开始,逐个遍历到最后,而reduceRight从数组的最后一项开始,向前遍历到第一项;

    这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为缩小基础的初始值,函数接收4个参数:前一个值、当前值、项的索引和数组对象;这个函数放回的任何值都会作为第一个参数自动传给下一项,第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项。第二个参数是数组的第二项;

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

      var sum=values.reduce(function(prev,cur,index,array){

         return prev+cur;

      });

      Alert(sum);  //15

    2、RegExp类型

    (1)字面量形式定义正则表达式

    创建正则表达式:var expression=/pattern/flags;

    Pattern可以是任何简单活复杂的正则表达式,可以包含字符类、限定符、分组、向前查找以及反向引用;flags用以表明正则表达式的行为主要有:

    g:全局模式,模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止;

    i:不区分大小写模式;

    m:多行模式;

    var pattern=/.at/gi;  //匹配所有以”at”结尾的3个字符的组合,不区分大小写;

    元字符都必须转义,元字符包括:

    (  [  {     ^  |  )  ?  *  +  .  }  ]

    Var pattern2=/[bc]at/i;   //匹配第一个”[bc]at”,不区分大小写

    (2)RegExp构造函数形式

    构造函数接收两个参数:一个是要匹配的字符串模式,另一个是可选的标志字符串;

    Var pattern2=new RegExp(“[bc]at”,”i”);

    字符串模式在某些情况下存在双重转义,字面量模式:/[bc]at/等价的字符串是:”\[bc\]at

    在ECMAScript3中,正则表达式字面量式中会共享同一个RegExp实例,而使用构造函数创建的每一个新RegExp实例都是一个新实例;

    ECMAScript5明确规定,使用正则表达式字面量必须像直接调用ECMAScript3构造函数一样,每次都创建新的RegExp实例;

    (3)RegExp实例属性

    global:布尔值,表示是否设置了g标志

    ignoreCase:布尔值,是否设置了i标志

    lastIndex:整数,开始搜索下一个匹配项的字符位置,从0算起

    multiline:布尔值,是否设置m标志

    source:正则表达式字符串表示,按照字面量形式而非传入构造函数总的字符串模式返回;

    (4)RegExp实例方法

    第一个方法:exec()

    exec方法接受一个参数,即要应用模式的字符串,返回包含第一个匹配项信息的数组,在没有匹配项的情况下返回null;返回数组是Array实例,但是包含两个额外属性:index和input,index表示匹配项在字符串中的位置,input表示应用正则表达式的字符串,在数组中,第一项是与整个模式匹配的字符串,其他项是与模式中的捕获组匹配的字符串(若模式中没有捕获组,则该数组只包含一项);

    在exec方法中,即使设置了全局标志(g),每次也只返回一个匹配项,在不设置全局标志的情况下,在同一个字符串上多次调用exec将始终返回第一个匹配项的信息;而在设置全局标志的情况下,每次调用都会字符串中继续查找新匹配项;

    第二个方法:test()

    test方法只接受一个参数,在模式与该参数匹配的情况下,返回true,否则返回false;

    (5)RegExp构造函数属性(这些属性在其他语言中被看做静态属性)

    长属性名:input、lastMtach、lastPerson、leftContext、multiline、rightContext

    短属性名:$_  $&  $+  $`  $*  $’

    input返回原始字符串

    leftContext返回匹配单词之前的字符串

    rightContext返回匹配单词之后的字符串

    lastMtach返回最近一次与整个正则表达式匹配的字符串

    lastPerson返回最近一次匹配的捕获组

  • 相关阅读:
    html5 canvas头像裁剪上传
    仿qq空间相册的图片批量上传
    仿美图秀秀的自由拼图
    actionscript3头像裁剪上传
    让ie6 7 8 9支持html5 websocket
    美化图片滤镜
    仿优酷频道首页的图片切换效果
    html5版canvas自由拼图
    php简易灌水
    php图片防盗链的小测试
  • 原文地址:https://www.cnblogs.com/xyl-share-happy/p/4573310.html
Copyright © 2020-2023  润新知