`

javascript基础知识大集锦(2)

 
阅读更多

本期主题:正则表达式 call(),apply(),callee,caller,cookie方法,setInterval(),clearInterval(),setTimeout() ,clearTimeout()


详细看附件例子,还是写的比较简单的。


1.关于cookie的函数:

Js代码  收藏代码
  1. /**  
  2.  * cookie操作工具.  
  3.  * 使用方法:保存值:CookieTool('name','1',{expires: 7})  //表示保存一个cookie值为1,键值为name,失效时间7天以后  
  4.  *         取值:CookieTool('name')                    //返回1  
  5.  * @param {} name  
  6.  * @param {} value  
  7.  * @param {} options  
  8.  * @return {}  
  9.  */   
  10. CookieTool = function (name, value, options) {  
  11.           if  ( typeof  value !=  'undefined' ) {  
  12.                     options = options || {};  
  13.                     if  (value ===  null ) {  
  14.                               value = '' ;   
  15.                               options.expires = -1;  
  16.                     }  
  17.                     var  expires =  '' ;  
  18.                     if  (options.expires && ( typeof  options.expires ==  'number'  || options.expires.toUTCString)) {  
  19.                               var  date;  
  20.                               if  ( typeof  options.expires ==  'number' ) {  
  21.                                         date = new  Date();  
  22.                                         date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));  
  23.                               } else  {  
  24.                                         date = options.expires;  
  25.                               }  
  26.                               expires = '; expires='  + date.toUTCString();  
  27.                     }  
  28.                     var  path = options.path ?  '; path='  + (options.path) :  '' ;  
  29.                     var  domain = options.domain ?  '; domain='  + (options.domain) :  '' ;  
  30.                     var  secure = options.secure ?  '; secure'  :  '' ;  
  31.                     document.cookie = [name, '=' , encodeURIComponent(value), expires, path, domain, secure].join( '' );  
  32.           } else  {  
  33.                     var  cookieValue =  null ;  
  34.                     if  (document.cookie && document.cookie !=  '' ) {  
  35.                               var  cookies = document.cookie.split( ';' );  
  36.                               for  ( var  i = 0; i < cookies.length; i++) {  
  37.                                         var  cookie = trim(cookies[i]);  
  38.                                         if  (cookie.substring(0, name.length + 1) == (name +  '=' )) {  
  39.                                                   cookieValue = decodeURIComponent(cookie.substring(name.length + 1));  
  40.                                                   break ;  
  41.                                         }  
  42.                               }  
  43.                     }  
  44.                     return  cookieValue;  
  45.           }  
  46. };  



2.关于一个可以查看js对象的js函数,很酷的方法:

Js代码  收藏代码
  1. /**  
  2.  * 用来查看一个对象的属性  
  3.  */   
  4. function  debugObjectInfo(obj){  
  5.         traceObject(obj);  
  6.           
  7.         function  traceObject(obj){   
  8.                 var  str =  '' ;  
  9.                 if (obj.tagName&&obj.name&&obj.id)  
  10.                 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>" ;   
  11.                 else {  
  12.                         str="<table border='1' width='100%'>" ;   
  13.                 }  
  14.                 var  key=[];   
  15.                 for ( var  i  in  obj){   
  16.                         key.push(i);   
  17.                 }   
  18.                 key.sort();   
  19.                 for ( var  i=0;i<key.length;i++){   
  20.                         var  v=  new  String(obj[key[i]]).replace(/</g, "&lt;" ).replace(/>/g, "&gt;" );   
  21.                         str+="<tr><td valign='top'>" +key[i]+ "</td><td>" +v+ "</td></tr>" ;   
  22.                 }   
  23.                 str=str+"</table>" ;   
  24.                 writeMsg(str);   
  25.         }   
  26.         function  trace(v){   
  27.                 var  str= "<table border='1' width='100%'><tr><td bgcolor='#ffff99'>" ;   
  28.                 str+=String(v).replace(/</g,"&lt;" ).replace(/>/g, "&gt;" );   
  29.                 str+="</td></tr></table>" ;   
  30.                 writeMsg(str);   
  31.         }   
  32.         function  writeMsg(s){   
  33.                 traceWin=window.open("" , "traceWindow" , "height=600, width=800,scrollbars=yes" );   
  34.                 traceWin.document.write(s);   
  35.         }   
  36. }  



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代码  收藏代码
  1. /**  
  2.  * 在源字符串中查找满足要求的子串.   
  3.  * @return {}  
  4.  */   
  5. function  MatchDemo() {  
  6.     var  r, re;  // 声明变量。      
  7.     var  s =  "The rain in Spain falls mainly in the plain" ;  
  8.     re = new  RegExp( "ain" "g" );  // 创建正则表达式对象。      
  9.     r = s.match(re); // 在字符串 s 中查找匹配。      
  10.     return  (r);  
  11. }  
  12.   
  13. /**  
  14.  * 返回在源字符串中的满足正则表达式的全部的字串和位置信息.   
  15.  */   
  16. function  RegExpTest() {  
  17.     var  ver = Number(ScriptEngineMajorVersion() +  "."   
  18.             + ScriptEngineMinorVersion())  
  19.     var  ans =  '' ;  
  20.     if  (ver >= 5.5) {  // 测试 JScript 的版本。      
  21.         var  src =  "The rain in Spain falls mainly in the plain." ;  
  22.         var  re = /\w+/g;  // 创建正则表达式模式。      
  23.         var  arr;  
  24.         while  ((arr = re.exec(src)) !=  null )  
  25.             ans += arr.index + "-"  + arr.lastIndex + arr +  "\t" ;  
  26.     } else  {  
  27.         ans = "请使用 JScript 的更新版本" ;  
  28.     }  
  29.     return  ans;  
  30. }  
  31.   
  32. /**  
  33.  * 对源字符串进行正则表达式检查,看是不是符合正则表达式.    
  34.  */   
  35. function  TestDemo() {  
  36.     var  s1;  
  37.     var  source =  "abcdefg" ;  
  38.     var  regex = /\w+/g;  // 创建正则表达式模式。     
  39.     if  (regex.test(source))  
  40.         s1 = " contains " ;  
  41.     else   
  42.         s1 = " does not contain " ;  
  43.     return  ( "'"  + source +  "'"  + s1 +  "'"  + regex.source +  "'" );  
  44. }  
  45.   
  46. /**  
  47.  * 在源字符串中查找正则表达式的字串.   
  48.  * @return {}  
  49.  */   
  50. function  SearchDemo() {  
  51.     var  r, re;  
  52.     var  s =  "The rain in Spain falls mainly in the plain." ;  
  53.     re = /falls/i;  
  54.     r = s.search(re);  
  55.     return  (r);  
  56. }  



4.很值得学习并要使用好的方法,call():
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

简单的例子:

Js代码  收藏代码
  1. function  add(a,b)  
  2. {  
  3.     alert(a+b);  
  4. }  
  5. function  sub(a,b)  
  6. {  
  7.     alert(a-b);  
  8. }  
  9.   
  10. add.call(sub,3,1);   
  11. //这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);   



稍微复杂的例子:

Js代码  收藏代码
  1. function  Class1()  
  2. {  
  3.     this .name =  "class1" ;  
  4.   
  5.     this .showNam =  function ()  
  6.     {  
  7.         alert(this .name);  
  8.     }  
  9. }  
  10.   
  11. function  Class2()  
  12. {  
  13.     this .name =  "class2" ;  
  14. }  
  15.   
  16. var  c1 =  new  Class1();  
  17. var  c2 =  new  Class2();  
  18.   
  19. c1.showNam.call(c2);  
  20. //call 的意思是把 c1 的方法放到c2上执行,原来c2是没有showNam() 方法,现在是把c1 的showNam()方法放到 c2 上来执行,所以this.name 应该是 class2,执行的结果就是 :alert("class2");   



多重继承的例子:

Js代码  收藏代码
  1. function  Class10()  
  2. {  
  3.     this .showSub =  function (a,b)  
  4.     {  
  5.         alert(a-b);  
  6.     }  
  7. }  
  8.   
  9. function  Class11()  
  10. {  
  11.     this .showAdd =  function (a,b)  
  12.     {  
  13.         alert(a+b);  
  14.     }  
  15. }  
  16.   
  17.   
  18. function  Class2()  
  19. {  
  20.     Class10.call(this );  
  21.     Class11.call(this );  
  22. }  



5.apply函数:
Function.apply(obj,args)方法能接收两个参数
    obj:这个对象将代替Function类里this对象
    args:这个是数组,它将作为参数传给Function(args-->arguments)
实现类似call的继承的效果:

Js代码  收藏代码
  1. function  Person(name,age){    //定义一个类,人类     
  2.     this .name=name;      //名字     
  3.     this .age=age;        //年龄    
  4.     this .sayhello= function (){alert( "hello" )};  
  5. }   
  6. function  Print(){             //显示类的属性    
  7.     this .funcName= "Print" ;   
  8.     this .show= function (){        
  9.         var  msg=[];  
  10.         for ( var  key  in   this ){   
  11.             if ( typeof ( this [key])!= "function" ){  
  12.                 msg.push([key,":" , this [key]].join( "" ));  
  13.             }  
  14.         }   
  15.         alert(msg.join(" " ));  
  16.     };  
  17. }   
  18. function  Student(name,age,grade,school){     //学生类    
  19.     Person.apply(this ,arguments);  
  20.     Print.apply(this ,arguments);  
  21.     this .grade=grade;                 //年级    
  22.     this .school=school;                  //学校    
  23. }   
  24. var  p1= new  Person( "jake" ,10);  
  25. p1.sayhello();  
  26. var  s1= new  Student( "tom" ,13,6, "清华小学" );  
  27. s1.show();  
  28. s1.sayhello();  
  29. alert(s1.funcName);  



使用apply进行数组参数的函数的优化,很酷的方法:

Js代码  收藏代码
  1. Math.max后面可以接任意个参数,最后返回所有参数中的最大值。  
  2.   
  3. 比如   
  4. alert(Math.max(5,8))   //8   
  5. alert(Math.max(5,7,9,3,1,6))   //9   
  6.   
  7. 但是在很多情况下,我们需要找出数组中最大的元素。  
  8. var  arr=[5,7,9,1]  
  9. alert(Math.max(arr))    // 这样却是不行的。一定要这样写   
  10.   
  11. function  getMax(arr){  
  12.     var  arrLen=arr.length;  
  13.     for ( var  i=0,ret=arr[0];i<arrLen;i++){  
  14.         ret=Math.max(ret,arr[i]);         
  15.     }  
  16.     return  ret;  
  17. }  
  18.   
  19. 用 apply呢,看代码:  
  20. function  getMax2(arr){  
  21.     return  Math.max.apply( null ,arr);  
  22. }  



下面是另外一个例子,用来合并两个数组:

Js代码  收藏代码
  1. 再比如数组的push方法。  
  2. var  arr1=[1,3,4];  
  3. var  arr2=[3,4,5];  
  4. 如果我们要把 arr2展开,然后一个一个追加到arr1中去,最后让arr1=[1,3,4,3,4,5]  
  5. arr1.push(arr2)显然是不行的。 因为这样做会得到[1,3,4,[3,4,5]]  
  6.   
  7. 我们只能用一个循环去一个一个的push(当然也可以用arr1.concat(arr2),但是concat方法并不改变arr1本身)  
  8. var  arrLen=arr2.length  
  9. for ( var  i=0;i<arrLen;i++){  
  10.     arr1.push(arr2[i]);  
  11. }  


使用apply的话:

Js代码  收藏代码
  1. Array.prototype.push.apply(arr1,arr2) 
分享到:
评论

相关推荐

    javascript基础知识大集锦

    javascript基础知识大集锦javascript基础知识大集锦javascript基础知识大集锦javascript基础知识大集锦

    javascript基础知识大集锦(一) 推荐收藏

    主要知识点:js数组,数字函数,字符串函数,表单验证,hashMap,堆栈,日期函数,call函数 等。

    javascript基础知识大集锦(二) 推荐收藏

    正则表达式 call(),apply(),callee,caller,cookie方法,setInterval(),clearInterval(),setTimeout() ,clearTimeout()

    javascript试题集锦

    让基础学生 巩固 提炼 js技术 ,达到自己的新境界,同时可以训练自己js的知识体系

    前端面试常见问题集锦册

    这些问题可以涉及到前端开发的基础知识、实际项目经验、算法与数据结构、框架的使用等方面。 集锦册: 这意味着这是一本集结了前端面试中常见问题的书籍或资源。集锦册的概念是将一系列相关的问题或知识点集中整理...

    javascrip上百技术总集

    -(4) JavaScript面向对象的支持--(5) JavaScript面向对象的支持--(6) JavaScript精简学习1:基础知识 JavaScript精简学习2:浏览器输出 JavaScript精简学习3:图像 JavaScript精简学习4:表单 ...

    Python入门教程丨1300多行代码,让你轻松掌握基础知识点.pdf

    Python⼊门教程⼁1300多⾏代码,让你轻松掌握基础知识点 欢迎点击右上⾓关注⼩编,除了分享技术⽂章之外还有很多福利,私信学习资料可以领取包括不限于Python实战演练、PDF电⼦⽂档、⾯ 试集锦、学习资料等。...

    全栈开发速学速查手册集锦

    知识体系:《Awesome Lists | CS 资料集锦》、《Awesome CheatSheets | 速学速查手册》、《Awesome Interviews | 求职面试必备》、《Awesome RoadMaps | 程序员进阶指南》、《Awesome MindMaps | 知识脉络思维脑图》...

    色色整理的PHP面试题集锦

    PHP 基础知识部分 1. 求$a的值 复制代码 代码如下: $a = “hello”; $b = &$a; unset($b); $b = “world”; echo $a; 2.... $x = &$a;... javascript 基础知识部分 1. 谈谈js实现继承的几种方式,并写出demo 2

    asp.net知识库

    技术基础 New Folder ...知识集锦:三分钟全面了解 Blog 和 RSS C#+ASP.NET开发基于Web的RSS阅读器 ASP.NET RSS Toolkit(RSS工具) Serialize Your Deck with Positron [XML Serialization, XSD, C#]...

    CodeBlog:Code代码博客

    Vue知识集锦 Vue-cli2.9 + webpack4.0升级 服务器发布Vue项目指南 加快Vue项目的开发速度 Electron客户端相关:laptop: Electron入门 Electron-builder打包详解 Electron单例检测 Webpack部分相关:ticket: 不得不了解...

    java面试题以及技巧

    │ │ j2sdk-1_4_2-doc.zip │ │ Java Programming Language (SL-275).txt │ │ langspec-3.0.zip │ │ SCJP Certification Training.htm │ │ SCJP 考纲.doc │ │ SL275_OH_GB.pdf │ │ Sun Certified ...

    java面试题目与技巧1

    │ │ j2sdk-1_4_2-doc.zip │ │ Java Programming Language (SL-275).txt │ │ langspec-3.0.zip │ │ SCJP Certification Training.htm │ │ SCJP 考纲.doc │ │ SL275_OH_GB.pdf │ │ Sun Certified ...

    java面试题及技巧4

    │ │ j2sdk-1_4_2-doc.zip │ │ Java Programming Language (SL-275).txt │ │ langspec-3.0.zip │ │ SCJP Certification Training.htm │ │ SCJP 考纲.doc │ │ SL275_OH_GB.pdf │ │ Sun Certified ...

    java面试题及技巧3

    │ │ j2sdk-1_4_2-doc.zip │ │ Java Programming Language (SL-275).txt │ │ langspec-3.0.zip │ │ SCJP Certification Training.htm │ │ SCJP 考纲.doc │ │ SL275_OH_GB.pdf │ │ Sun Certified ...

    java面试题以及技巧6

    │ │ j2sdk-1_4_2-doc.zip │ │ Java Programming Language (SL-275).txt │ │ langspec-3.0.zip │ │ SCJP Certification Training.htm │ │ SCJP 考纲.doc │ │ SL275_OH_GB.pdf │ │ Sun Certified ...

Global site tag (gtag.js) - Google Analytics