javascript基礎知識大集錦(2)

本期主題:正則表達式 call(),apply(),callee,caller,cookie方法,setInterval(),clearInterval(),setTimeout() ,clearTimeout()


詳細看附件例子,還是寫的比較簡單的。


1.關於cookie的函數:
Js代碼 
/** 
 * cookie操作工具. 
 * 使用方法:保存值:CookieTool('name','1',{expires: 7})  //表示保存一個cookie值為1,鍵值為name,失效時間7天以後 
 *         取值:CookieTool('name')                    //返回1 
 * @param {} name 
 * @param {} value 
 * @param {} options 
 * @return {} 
 */  
CookieTool = function (name, value, options) { 
          if  ( typeof  value !=  'undefined' ) { 
                    options = options || {}; 
                    if  (value ===  null ) { 
                              value = '' ;  
                              options.expires = -1; 
                    } 
                    var  expires =  '' ; 
                    if  (options.expires && ( typeof  options.expires ==  'number'  || options.expires.toUTCString)) { 
                              var  date; 
                              if  ( typeof  options.expires ==  'number' ) { 
                                        date = new  Date(); 
                                        date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); 
                              } else  { 
                                        date = options.expires; 
                              } 
                              expires = '; expires='  + date.toUTCString(); 
                    } 
                    var  path = options.path ?  '; path='  + (options.path) :  '' ; 
                    var  domain = options.domain ?  '; domain='  + (options.domain) :  '' ; 
                    var  secure = options.secure ?  '; secure'  :  '' ; 
                    document.cookie = [name, '=' , encodeURIComponent(value), expires, path, domain, secure].join( '' ); 
          } else  { 
                    var  cookieValue =  null ; 
                    if  (document.cookie && document.cookie !=  '' ) { 
                              var  cookies = document.cookie.split( ';' ); 
                              for  ( var  i = 0; i < cookies.length; i++) { 
                                        var  cookie = trim(cookies[i]); 
                                        if  (cookie.substring(0, name.length + 1) == (name +  '=' )) { 
                                                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
                                                  break ; 
                                        } 
                              } 
                    } 
                    return  cookieValue; 
          } 
}; 


2.關於一個可以查看js對象的js函數,很酷的方法:
Js代碼 
/** 
 * 用來查看一個對象的屬性 
 */  
function  debugObjectInfo(obj){ 
        traceObject(obj); 
         
        function  traceObject(obj){  
                var  str =  '' ; 
                if (obj.tagName&&obj.name&&obj.id) 
                str="<table border='1' width='100%'><tr><td colspan='2' bgcolor='#ffff99'>traceObject   tag: &lt;" +obj.tagName+ "&gt;   name = \"" +obj.name+ "\"   id = \"" +obj.id+ "\" </td></tr>" ;  
                else { 
                        str="<table border='1' width='100%'>" ;  
                } 
                var  key=[];  
                for ( var  i  in  obj){  
                        key.push(i);  
                }  
                key.sort();  
                for ( var  i=0;i<key.length;i++){  
                        var  v=  new  String(obj[key[i]]).replace(/</g, "&lt;" ).replace(/>/g, "&gt;" );  
                        str+="<tr><td valign='top'>" +key[i]+ "</td><td>" +v+ "</td></tr>" ;  
                }  
                str=str+"</table>" ;  
                writeMsg(str);  
        }  
        function  trace(v){  
                var  str= "<table border='1' width='100%'><tr><td bgcolor='#ffff99'>" ;  
                str+=String(v).replace(/</g,"&lt;" ).replace(/>/g, "&gt;" );  
                str+="</td></tr></table>" ;  
                writeMsg(str);  
        }  
        function  writeMsg(s){  
                traceWin=window.open("" , "traceWindow" , "height=600, width=800,scrollbars=yes" );  
                traceWin.document.write(s);  
        }  


3.正則表達式:

g 代表全局匹配
m 代表可以進行多行匹配
i 代表不區分大小寫匹配
^ 匹配輸入字符串的開始位置
$ 匹配輸入字符串的結束位置
* 匹配前面的子表達式零次或多次. 等價於{0,}
+ 匹配前面的子表達式一次或多次. 等價於{1,}
? 匹配前面的子表達式零次或一次. 等價於[0,1} , 當該字符跟在任何一個其他限制符(*, +, ?, {n}, {n,}, {n,m}) 後面時,匹配模式是非貪婪的。非貪婪模式盡可能少的匹配所搜索的字符串,而默認的貪婪模式則盡可能多的匹配所搜索的字符串。例如,對於字符串 "oooo",'o+?' 將匹配單個 "o",而 'o+' 將匹配所有 'o'。

\d 匹配一個數字字符. 等價於 [0-9]
\D 匹配一個非數字符. 等價於 [^0-9]
\w  ,等價於 "[A-Za-z0-9_]"
\W 匹配任何非單詞字符,等價於 "[^A-Za-z0-9]"
\s 匹配任何空白字符, 包括空格 制表符 換頁符 等等. 等價於[\f\n\r\t\v]
\S 匹配任何非空白字符. 等價於 [^\f\r\n\t\v]
\b 匹配一個單詞邊界,也就是指單詞和空格間的位置。
\B 匹配非單詞邊界。

正則表達式常用js方法:
Js代碼 
/** 
 * 在源字符串中查找滿足要求的子串.  
 * @return {} 
 */  
function  MatchDemo() { 
    var  r, re;  // 聲明變量。     
    var  s =  "The rain in Spain falls mainly in the plain" ; 
    re = new  RegExp( "ain" ,  "g" );  // 創建正則表達式對象。     
    r = s.match(re); // 在字符串 s 中查找匹配。     
    return  (r); 

 
/** 
 * 返回在源字符串中的滿足正則表達式的全部的字串和位置信息.  
 */  
function  RegExpTest() { 
    var  ver = Number(ScriptEngineMajorVersion() +  "."  
            + ScriptEngineMinorVersion()) 
    var  ans =  '' ; 
    if  (ver >= 5.5) {  // 測試 JScript 的版本。     
        var  src =  "The rain in Spain falls mainly in the plain." ; 
        var  re = /\w+/g;  // 創建正則表達式模式。     
        var  arr; 
        while  ((arr = re.exec(src)) !=  null ) 
            ans += arr.index + "-"  + arr.lastIndex + arr +  "\t" ; 
    } else  { 
        ans = "請使用 JScript 的更新版本" ; 
    } 
    return  ans; 

 
/** 
 * 對源字符串進行正則表達式檢查,看是不是符合正則表達式.   
 */  
function  TestDemo() { 
    var  s1; 
    var  source =  "abcdefg" ; 
    var  regex = /\w+/g;  // 創建正則表達式模式。    
    if  (regex.test(source)) 
        s1 = " contains " ; 
    else  
        s1 = " does not contain " ; 
    return  ( "'"  + source +  "'"  + s1 +  "'"  + regex.source +  "'" ); 

 
/** 
 * 在源字符串中查找正則表達式的字串.  
 * @return {} 
 */  
function  SearchDemo() { 
    var  r, re; 
    var  s =  "The rain in Spain falls mainly in the plain." ; 
    re = /falls/i; 
    r = s.search(re); 
    return  (r); 


4.很值得學習並要使用好的方法,call():
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
參數
thisObj
可選項。將被用作當前對象的對象。
arg1, arg2, , argN
可選項。將被傳遞方法參數序列。
說明
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。

簡單的例子:
Js代碼 
function  add(a,b) 

    alert(a+b); 

function  sub(a,b) 

    alert(a-b); 

 
add.call(sub,3,1);  
//這個例子中的意思就是用 add 來替換 sub,add.call(sub,3,1) == add(3,1) ,所以運行結果為:alert(4);  


稍微復雜的例子:
Js代碼 
function  Class1() 

    this .name =  "class1" ; 
 
    this .showNam =  function () 
    { 
        alert(this .name); 
    } 

 
function  Class2() 

    this .name =  "class2" ; 

 
var  c1 =  new  Class1(); 
var  c2 =  new  Class2(); 
 
c1.showNam.call(c2); 
//call 的意思是把 c1 的方法放到c2上執行,原來c2是沒有showNam() 方法,現在是把c1 的showNam()方法放到 c2 上來執行,所以this.name 應該是 class2,執行的結果就是 :alert("class2");  


多重繼承的例子:
Js代碼 
function  Class10() 

    this .showSub =  function (a,b) 
    { 
        alert(a-b); 
    } 

 
function  Class11() 

    this .showAdd =  function (a,b) 
    { 
        alert(a+b); 
    } 

 
 
function  Class2() 

    Class10.call(this ); 
    Class11.call(this ); 


5.apply函數:
Function.apply(obj,args)方法能接收兩個參數
    obj:這個對象將代替Function類裡this對象
    args:這個是數組,它將作為參數傳給Function(args–>arguments)
實現類似call的繼承的效果:
Js代碼 
function  Person(name,age){    //定義一個類,人類    
    this .name=name;      //名字    
    this .age=age;        //年齡   
    this .sayhello= function (){alert( "hello" )}; 
}  
function  Print(){             //顯示類的屬性   
    this .funcName= "Print" ;  
    this .show= function (){       
        var  msg=[]; 
        for ( var  key  in   this ){  
            if ( typeof ( this [key])!= "function" ){ 
                msg.push([key,":" , this [key]].join( "" )); 
            } 
        }  
        alert(msg.join(" " )); 
    }; 
}  
function  Student(name,age,grade,school){     //學生類   
    Person.apply(this ,arguments); 
    Print.apply(this ,arguments); 
    this .grade=grade;                 //年級   
    this .school=school;                  //學校   
}  
var  p1= new  Person( "jake" ,10); 
p1.sayhello(); 
var  s1= new  Student( "tom" ,13,6, "清華小學" ); 
s1.show(); 
s1.sayhello(); 
alert(s1.funcName); 


使用apply進行數組參數的函數的優化,很酷的方法:
Js代碼 
Math.max後面可以接任意個參數,最後返回所有參數中的最大值。 
 
比如  
alert(Math.max(5,8))   //8  
alert(Math.max(5,7,9,3,1,6))   //9  
 
但是在很多情況下,我們需要找出數組中最大的元素。 
var  arr=[5,7,9,1] 
alert(Math.max(arr))    // 這樣卻是不行的。一定要這樣寫  
 
function  getMax(arr){ 
    var  arrLen=arr.length; 
    for ( var  i=0,ret=arr[0];i<arrLen;i++){ 
        ret=Math.max(ret,arr[i]);        
    } 
    return  ret; 

 
用 apply呢,看代碼: 
function  getMax2(arr){ 
    return  Math.max.apply( null ,arr); 


下面是另外一個例子,用來合並兩個數組:
Js代碼 
再比如數組的push方法。 
var  arr1=[1,3,4]; 
var  arr2=[3,4,5]; 
如果我們要把 arr2展開,然後一個一個追加到arr1中去,最後讓arr1=[1,3,4,3,4,5] 
arr1.push(arr2)顯然是不行的。 因為這樣做會得到[1,3,4,[3,4,5]] 
 
我們隻能用一個循環去一個一個的push(當然也可以用arr1.concat(arr2),但是concat方法並不改變arr1本身) 
var  arrLen=arr2.length 
for ( var  i=0;i<arrLen;i++){ 
    arr1.push(arr2[i]); 

使用apply的話:
Js代碼 
Array.prototype.push.apply(arr1,arr2) 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *