当前位置： 代码迷 >> JavaScript >> javascript基础知识大汇总(2)
  详细解决方案

javascript基础知识大汇总(2)

热度：297   发布时间：2012-09-02 21:00:34.0
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)?
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.