手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

Javascript1.6数组新特性和jquery的几个工具方法

Submitted by gouki on 2011, March 2, 9:32 PM

前两天看的文章里刚刚说ECMA 262中的一些String特性，又正好看到一篇博客介绍一些其他操作的实现，比如foreach,这个对于PHP用户来说就太常用了，而以前在javascript中只能用for(i in arr)来实现，虽然都没有问题，但毕竟看起来怪怪的。

上次的文章在这里：Javascript中各种trim的实现，这次的文章引用自Javascript1.6数组新特性和jquery的几个工具方法。

原文如下，其中会插入自己的内容，会特别标记

JavaScript 1.6 引入了几个新的Array 方法，具体的介绍见：New in JavaScript 1.6 。这些方法已经被写进了ECMA262 V5。现代浏览器（IE9/Firefox/Safari/Chrome/Opera）都已经支持，但IE6/7/8不支持。jquery的工具方法中提供了类似的功能。【膘叔：上次在讲trim的时候自己也测试过，确实IE8不支持，低于IE8的就更不用想了】

1、Array.forEach()和jquery的$().each()。在数组中的每个项上运行一个函数。类似java5 增强的for循环。

JavaScript代码
  1. var ary = [2,4,6,8];  
  2.   
  3. // js1.6 Array.forEach方法  
  4. ary.forEach(function(i){alert(i);});  
  5.   
  6. // jquery的写法  
  7. $(ary).each(function(){alert(this);});  
  8. //还可以写成这样  
  9. $(ary).each(function(index,item){alert(item);});//index是元素的索引，item是该元素 
  10. //膘叔：这个相当于PHP中如下代码。。
  11. while (list($key, $val) = each($fruit)) {
        echo     "$key => $val\n";
    }

 

2、Array.filter()和jquery的$.grep()。在数组中的每个项上运行一个函数，并将函数返回真值的项作为数组返回。简单的说就是用一个条件过滤掉不符合的数组元素，剩下的符合条件的元素组合成新的数组返回。

JavaScript代码
  1. var ary = [2,4,6,8];  
  2.   
  3. // js1.6 Array.filter()方法  
  4. var otherAry1 = ary.filter(function(item){return item>4;});  
  5. alert(otherAry1);//输出6，8  
  6.   
  7. // jquery写法(注意和$.each的区别)  
  8. // 此处你们函数中第一个参数是数组元素自身，第二个参数是数组元素索引  
  9. // 而$().each方法刚好相反，作者应该统一下。  
  10. var otherAry2 = $.grep(ary,function(item,index){return item>4;});  
  11. alert(otherAry2);//输出6，8 
  12. //膘叔：PHP中有类似函数，比如array_filter，也是可以通过callback来处理

 

3、Array.map()和jquery的$.map()。在数组中的每个项上运行一个函数，并将全部结果作为数组返回。这个方法非常强大，尤其是作用于DOM数组时（在abcc项目上用过，对每个查询模块DOM生成查询字符串）。简单说就是把每个数组元素运算的结果作为新数组元素（还是很拗口）【膘叔：php中有array_map,array_walk等】

JavaScript代码
  1. var ary = [2,4,6,8];  
  2.   
  3. // js1.6 Array.map()方法  
  4. var newAry1 = ary.map(function(item){return item+1;});//每个元素加1  
  5. alert(newAry1);//输出3，5，7，9  
  6.   
  7. // jquery写法  
  8. var newAry2 = $.map(ary,function(item,index){return item+1;});  
  9. alert(newAry2);//输出3，5，7，9  

4、Array.every()方法。检查数组元素是否都符合某个条件，只要有一个不符合返回false，否则返回true

JavaScript代码
  1. var ary = [2,4,6,8,10];  
  2.   
  3. alert(ary.every(function(item){return item>1}));//true  
  4. alert(ary.every(function(item){return item>2}));//false  

 

5、Array.some()方法。检查数组中元素是否符合某个条件，只要有一个符合返回true，否则返回false

JavaScript代码
  1. var ary = [2,4,,6,8,10];  
  2.   
  3. alert(ary.some(function(item){return item>9;}));//true  
  4. alert(ary.some(function(item){return item>10;}));//false  

 

最后给出 IE6/7/8的解决方案，让这些浏览器完美支持JS1.6的Array新方法。

JavaScript代码
  1. -function(){  
  2.       
  3. function applyIf(o, c) {  
  4.     if(o) {  
  5.         for(var p in c) {  
  6.             if(o[p]===undefined) {  
  7.                 o[p] = c[p];  
  8.             }  
  9.         }  
  10.     }  
  11.     return o;  
  12. }  
  13. applyIf(Array.prototype, {  
  14.     indexOf : function(obj, idx) {  
  15.         var from = idx == null ? 0 : (idx < 0 ? Math.max(0, arr.length + idx) : idx);  
  16.         for(var i = from, l = this.length; i < l; i++) {  
  17.             if(i in this && this[i] === obj) {  
  18.                 return i;  
  19.             }  
  20.         }  
  21.         return -1;  
  22.     },  
  23.     lastIndexOf : function(obj, idx) {  
  24.         var len = this.length, from = idx == null ? len - 1 : idx;  
  25.         if(from < 0) {  
  26.             from = Math.max(0, len + from);  
  27.         }  
  28.         for(var i = from; i >= 0; i--) {  
  29.             if (i in this && this[i] === obj) {  
  30.                 return i;  
  31.             }  
  32.         }  
  33.         return -1;  
  34.     },  
  35.     every : function(fn, thisObj) {  
  36.         var l = this.length;  
  37.         for(var i = 0; i < l; i++) {  
  38.             if(i in this && !fn.call(thisObj, this[i], i, this)) {  
  39.                 return false;  
  40.             }  
  41.         }  
  42.         return true;  
  43.     },  
  44.     some : function(fn, thisObj) {  
  45.         var l = this.length;  
  46.         for(var i = 0; i < l; i++) {  
  47.             if(i in this && fn.call(thisObj, this[i], i, this)) {  
  48.                 return true;  
  49.             }  
  50.         }  
  51.         return false;  
  52.     },  
  53.     filter : function(fn, thisObj) {  
  54.         var l = this.length, res = [], resLength = 0;  
  55.         for(var i = 0; i < l; i++) {  
  56.             if(i in this) {  
  57.                 var val = this[i];  
  58.                 if(fn.call(thisObj, val, i, this)) {  
  59.                     res[resLength++] = val;  
  60.                 }  
  61.             }  
  62.         }  
  63.         return res;  
  64.     },  
  65.     map : function(fn, thisObj) {  
  66.         var l = this.length, res = [];  
  67.         for(var i = 0; i < l; i++) {  
  68.             if(i in this) {  
  69.                 res[i] = fn.call(thisObj, this[i], i, this);  
  70.             }  
  71.         }  
  72.         return res;  
  73.     },  
  74.     forEach : function(fn, thisObj) {  
  75.         var l = this.length;  
  76.         for(var i = 0; i < l; i++) {  
  77.             if(i in this) {  
  78.                 fn.call(thisObj, this[i], i, this);  
  79.             }  
  80.         }  
  81.     }  
  82. });   
  83. }();  

------EOF----

 

最后这一段有事没事可以参考一下哦，毕竟这些都是可以拿来做参考的，比如象最后一个foreach，可以好好学学这些代码哦。

最后，var evens = [i for each (i in numbers) if (i % 2 == 0)];，看到这个，有没有感觉很象python的写法？？？这个是javascript 1.7中的写法了，看看这里的介绍：https://developer.mozilla.org/en/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects

Tags: jquery

Javascript | 评论:0 | 阅读:18935

Javascript中各种trim的实现

Submitted by gouki on 2011, February 27, 9:15 PM

说到trim，其实这真的让无数前端郁闷。比如在处理input框里内容的时候，都会需要处理input内容的左右空格。但让人郁闷的是，String里居然没有原生方法，而每个人的实现方法都会不一样，效率也各有不同。

但是，新版的ECMA-262里已经表示有此方法了：

ECMA-262(V5)
  1. 15.5.4.20   String.prototype.trim ( )   
  2.   
  3. The following steps are taken:   
  4.   
  5. 1.   Call CheckObjectCoercible passing the this value as its argument.   
  6. 2.   Let S be the result of calling ToString, giving it the this value as its argument.   
  7. 3.   Let T be a String value that is a copy of S with both leading and trailing white space removed. The definition   
  8.      of white space is the union of  WhiteSpace and LineTerminator .   
  9. 4.   Return T.   
  10.   
  11. NOTE           The trim function is intentionally generic; it does not require that its this value be a String object. Therefore, it   
  12. can be transferred to other kinds of objects for use as a method.   

 

本文摘自http://www.cnblogs.com/snandy/archive/2011/02/26/1965866.html，只是经过我自己的整理了啦。

第一种：这种是大多数人都会写的，也是流传最多的代码了吧？

JavaScript代码
  1. String.prototype.trim = function() {  
  2.     //return this.replace(/[(^\s+)(\s+$)]/g,"");//會把字符串中間的空白符也去掉  
  3.     //return this.replace(/^\s+|\s+$/g,""); //  
  4.     return this.replace(/^\s+/g,"").replace(/\s+$/g,"");  
  5. }  

第二种：来自motools：

JavaScript代码
  1. function trim(str){  
  2.     return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '');  
  3. }  

第三种：这是jQuery的，jquery的方法类似于第一种：

JavaScript代码
  1. function trim(str){  
  2.     return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');  
  3. }  

 

第四种是来自所摘博客中最写的：Steven Levithan 在进行性能测试后提出了在JS中执行速度最快的裁剪字符串方式，在处理长字符串时性能较好：

JavaScript代码
  1. function trim(str){  
  2.     str = str.replace(/^(\s|\u00A0)+/,'');  
  3.     for(var i=str.length-1; i>=0; i--){  
  4.         if(/\S/.test(str.charAt(i))){  
  5.             str = str.substring(0, i+1);  
  6.             break;  
  7.         }  
  8.     }  
  9.     return str;  
  10. }  

 

博客中还写了这么一点，那就是Molliza Gecko 1.9.1引擎中还给String添加了trimLeft ，trimRight 方法。

这让我想起了PHP的代码，比如ltrim,rtrim,trim之类的

Tags: js, trim

Javascript | 评论:0 | 阅读:24003

附上昨天晚上进制转换的代码

Submitted by gouki on 2011, February 16, 9:32 AM

写的烂，不要见怪。。

JavaScript代码
  1.  <script>  
  2. function QRank(scores){  
  3.     this._scores=this._rank = 0;  
  4.     this._max = 10000;  
  5.     this.setScore(scores);  
  6. }  
  7. QRank.prototype.setScore = function(scores){  
  8.     this._scores = parseInt(scores);  
  9. }  
  10. QRank.prototype.getScore = function(){  
  11.     return this._scores;  
  12. }  
  13. QRank.prototype.setRank = function(){  
  14.     //this._rank = Math.floor(Math.sqrt(this._scores+4));  
  15.     var score = this.getScore();  
  16.     var j=0;  
  17.     for(var i=0;i<this._max;i++){  
  18.         if(this.getScore() < j){  
  19.             this._rank = (i-1);  
  20.             break;  
  21.         }  
  22.         j+=(5+i*2);  
  23.     }     
  24. }  
  25. QRank.prototype.getRank = function(){  
  26.     return this._rank;  
  27. }  
  28. QRank.prototype.getStar = function(){  
  29.     var rank;  
  30.     if((rank = this.getRank()) == 0){  
  31.         this.setRank();  
  32.         rank = this.getRank();  
  33.     }  
  34.     var rank4 = rank.toString(4).split("").reverse(); //convert  
  35.     var icon = '';  
  36.     var iconarr = ['☆','★','○','●','$'];  //对应，星星，月亮，太阳，皇冠，美元对应未知。
  37.     for (var i in rank4){  
  38.         icon = iconarr[i].repeat(rank4[i]) + icon;  
  39.     }  
  40.     document.write(icon);  
  41. }  
  42. String.prototype.repeat = function(num){  
  43.     str = [];  
  44.     for (var i=0;i <num ; i++){  
  45.         str.push(this.toString().split(""));  
  46.     }  
  47.     return str.join("");  
  48. }  
  49. var q = new QRank(1000);  
  50. q.getStar();  
  51. alert(q.getRank());  
  52.  </script>  

Tags: qq, rank

Javascript | 评论:0 | 阅读:15733

进制转换

Submitted by gouki on 2011, February 15, 9:27 PM

今天偶尔看到了毛毛虫的关于QQ等级的算法的PHp实现，借着雾叔所建议的转行做前端的想法，于是写了一个JS的class，用来做JS的实现。当然也遇到一些问题

1、原来根据小时计算的算法，目前由于是根据天数来的，所以算法变了，但其实也很方即，所需天数+=5+（等级X2），然后从等级0开始循环，即可求出所需天数，反之根据天数也可以求出等级数

2、画图，由于QQ等级是4进制的，即逢四进一，三个星星+一个星星=一个月亮，如此类推。所以，刚开始的时候有点麻烦，因为我不知道JS的进制转换函数是什么 ，查了一下才知道，原来是那样的方便。PHP任意转换的函数是base_convert，而JS对于10进制的转换居然直接toString就可以了，例如把10转成4进制，即：10.toString(4)，返回22，即2个月亮2个星星。方便 吧，简单吧。。。

最后加一个，任意进制转为10进制，parseInt(123,3)，这里第二个参数就是第一个参数的进制单位，当然要对应，比如你输入了123，结果第二个参数是2，不出错才怪。。会返回NaN的

OK，代码在单位里，也是第一次尝试用JS实现对象，写的不好请谅解，明天上代码。。。

Tags: base_convert, tostring, parseint

Javascript | 评论:0 | 阅读:15828

jQuery SubClass 带来的新的变化

Submitted by gouki on 2011, January 27, 8:49 PM

jquery在1.5的时候多了一个subclass，代码大约如下：

JavaScript代码
  1. subclass: function(){  
  2.     function jQuerySubclass( selector, context ) {  
  3.         return new jQuerySubclass.fn.init( selector, context );  
  4.     }  
  5.     jQuerySubclass.superclass = this;  
  6.     jQuerySubclass.fn = jQuerySubclass.prototype = this();  
  7.     jQuerySubclass.fn.constructor = jQuerySubclass;  
  8.     jQuerySubclass.subclass = this.subclass;  
  9.     jQuerySubclass.fn.init = function init( selector, context ) {  
  10.         if (context && context instanceof jQuery && !(context instanceof jQuerySubclass)){  
  11.             context = jQuerySubclass(context);  
  12.         }  
  13.         return jQuery.fn.init.call( this, selector, context, rootjQuerySubclass );  
  14.     };  
  15.     jQuerySubclass.fn.init.prototype = jQuerySubclass.fn;  
  16.     var rootjQuerySubclass = jQuerySubclass(document);  
  17.     return jQuerySubclass;  
  18. },  
很多看到这个代码的人都认为这个功能是用来优化插件的，因为现在jQuery的插件越来越多，有类似功能，类似名称的插件也越来越多了，所以，同名插件带来的困扰也就更多了。

未来怎么办，jQuery鼓励用户开发插件，但插件总不能老是给用户带来麻烦吧？所以这个subclass就成了新的插件机制所必备的方法，利用subclass来创建一个新的实例（即所谓的继承，当然也能覆写父类[jQuery]的方法 ）。

只是这样的频繁继承，肯定会造成效率降低吧。怎么样既能继承，又不降低效率，这恐怕就是未来jQuery团队要考虑的事情了？但是否靠什么behavior这种行为的方式来加载呢？现在都在讲究这种行为触发性的插件。jQuery是不是未来也会采用这种方式呢。

Tags: jquery, plugin, subclass

Javascript | 评论:0 | 阅读:17870

Records:305«‹18192021222324252627›»