Javascript 数组循环遍历之forEach(转载自oscar999)
2017-07-31 15:37
806 查看
Javascript 数组循环遍历之forEach(转载自oscar999)
<div class="article_manage clearfix"> <div class="article_r"> <span class="link_postdate">2013-03-14 10:37</span> <span class="link_view" title="阅读次数">368697人阅读</span> <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(4)</span> <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('Javascript+%e6%95%b0%e7%bb%84%e5%be%aa%e7%8e%af%e9%81%8d%e5%8e%86%e4%b9%8bforEach','8671546');return false;" title="收藏" target="_blank">收藏</a></span> <span class="link_report"> <a href="#report" onclick="javascript:report(8671546,2);return false;" title="举报">举报</a></span> </div> </div> <style type="text/css"> .embody{ padding:10px 10px 10px; margin:0 -20px; border-bottom:solid 1px #ededed; } .embody_b{ margin:0 ; padding:10px 0; } .embody .embody_t,.embody .embody_c{ display: inline-block; margin-right:10px; } .embody_t{ font-size: 12px; color:#999; } .embody_c{ font-size: 12px; } .embody_c img,.embody_c em{ display: inline-block; vertical-align: middle; } .embody_c img{ width:30px; height:30px; } .embody_c em{ margin: 0 20px 0 10px; color:#333; font-style: normal; } </style> <script type="text/javascript"> $(function () { try { var lib = eval("("+$("#lib").attr("value")+")"); var html = ""; if (lib.err == 0) { $.each(lib.data, function (i) { var obj = lib.data[i]; //html += '<img src="' + obj.logo + '"/>' + obj.name + " "; html += ' <a href="' + obj.url + '" target="_blank">'; html += ' <img src="' + obj.logo + '">'; html += ' <em><b>' + obj.name + '</b></em>'; html += ' </a>'; }); if (html != "") { setTimeout(function () { $("#lib").html(html); $("#embody").show(); }, 100); } } } catch (err) { } }); </script> <div class="category clearfix"> <div class="category_l"> <img src="http://static.blog.csdn.net/images/category_icon.jpg"> <span>分类:</span> </div> <div class="category_r"> <label onclick="GetCategoryArticles('336217','oscar999','top','8671546');"> <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">Web-编程语言<em>(160)</em></span> <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;"> <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;"> <div class="subItem"> <div class="subItem_t"><a href="http://blog.csdn.net/oscar999/article/category/336217" target="_blank">作者同类文章</a><i class="J_close">X</i></div> <ul class="subItem_l" id="top_336217"> </ul> </div> </label> </div> </div> <div class="bog_copyright"> <p class="copyright_p">版权声明:本文为博主原创文章,未经博主允许不得转载。</p> </div>
目录(?)[+]
1 js 数组循环遍历
2 forEach 函数
3 让IE兼容forEach方法
4 如何跳出循环
1. js 数组循环遍历。
数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了。除此之外,也可以使用较简便的forEach 方式
2. forEach 函数。
Firefox 和Chrome 的Array 类型都有forEach的函数。使用如下:[html] view plain copy print?<!–Add by oscar999–>
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME=“Author” CONTENT=“oscar999”>
</HEAD>
<BODY>
<script>
var arryAll = [];
arryAll.push(1);
arryAll.push(2);
arryAll.push(3);
arryAll.push(4);
arryAll.forEach(function(e){
alert(e);
})
</script>
</BODY>
</HTML>
<!--Add by oscar999--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Author" CONTENT="oscar999"> </HEAD> <BODY> <script> var arryAll = []; arryAll.push(1); arryAll.push(2); arryAll.push(3); arryAll.push(4); arryAll.forEach(function(e){ alert(e); }) </script> </BODY> </HTML>
但是以上,代码在IE中却无法正常工作。
因为IE的Array 没有这个方法
[javascript] view plain copy print?alert(Array.prototype.forEach);
alert(Array.prototype.forEach);执行以上这句得到的是 “undefined”, 也就是说在IE 中 Array 没有forEach的方法。
3. 让IE兼容forEach方法
既然IE的Array 没哟forEach方法, 我们就给它手动添加这个原型方法。[javascript] view plain copy print?//Array.forEach implementation for IE support..
//https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError(“ this is null or not defined”);
}
var O = Object(this);
var len = O.length >>> 0; // Hack to convert O.length to a UInt32
if ({}.toString.call(callback) != “[object Function]”) {
throw new TypeError(callback + “ is not a function”);
}
if (thisArg) {
T = thisArg;
}
k = 0;
while (k < len) {
var kValue;
if (k in O) {
kValue = O[k];
callback.call(T, kValue, k, O);
}
k++;
}
};
}
//Array.forEach implementation for IE support.. //https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach if (!Array.prototype.forEach) { Array.prototype.forEach = function(callback, thisArg) { var T, k; if (this == null) { throw new TypeError(" this is null or not defined"); } var O = Object(this); var len = O.length >>> 0; // Hack to convert O.length to a UInt32 if ({}.toString.call(callback) != "[object Function]") { throw new TypeError(callback + " is not a function"); } if (thisArg) { T = thisArg; } k = 0; while (k < len) { var kValue; if (k in O) { kValue = O[k]; callback.call(T, kValue, k, O); } k++; } }; }详细介绍可以参照:
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach
4. 如何跳出循环?
Js 此种状况的forEach 不能使用continue, break; 可以使用如下两种方式:1. if 语句控制
2. return . (return true, false)
return –> 类似continue
以下例子是取出数组中2的倍数和3的倍数的数;
[html] view plain copy print?<!–Add by oscar999–>
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME=“Author” CONTENT=“oscar999”>
</HEAD>
<BODY>
<script>
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError(“ this is null or not defined”);
}
var O = Object(this);
var len = O.length >>> 0; // Hack to convert O.length to a UInt32
if ({}.toString.call(callback) != ”[object Function]”) {
throw new TypeError(callback + ” is not a function”);
}
if (thisArg) {
T = thisArg;
}
k = 0;
while (k < len) {
var kValue;
if (k in O) {
kValue = O[k];
callback.call(T, kValue, k, O);
}
k++;
}
};
}
var arryAll = [];
arryAll.push(1);
arryAll.push(2);
arryAll.push(3);
arryAll.push(4);
arryAll.push(5);
var arrySpecial = [];
arryAll.forEach(function(e){
if(e%2==0)
{
arrySpecial.push(e);
}else if(e%3==0)
{
arrySpecial.push(e);
}
})
</script>
</BODY><
a5a2
/span>
</HTML>
<!--Add by oscar999--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Author" CONTENT="oscar999"> </HEAD> <BODY> <script> if (!Array.prototype.forEach) { Array.prototype.forEach = function(callback, thisArg) { var T, k; if (this == null) { throw new TypeError(" this is null or not defined"); } var O = Object(this); var len = O.length >>> 0; // Hack to convert O.length to a UInt32 if ({}.toString.call(callback) != "[object Function]") { throw new TypeError(callback + " is not a function"); } if (thisArg) { T = thisArg; } k = 0; while (k < len) { var kValue; if (k in O) { kValue = O[k]; callback.call(T, kValue, k, O); } k++; } }; } var arryAll = []; arryAll.push(1); arryAll.push(2); arryAll.push(3); arryAll.push(4); arryAll.push(5); var arrySpecial = []; arryAll.forEach(function(e){ if(e%2==0) { arrySpecial.push(e); }else if(e%3==0) { arrySpecial.push(e); } }) </script> </BODY> </HTML>
使用return 达到以上效果
[javascript] view plain copy print?arryAll.forEach(function(e){ if(e%2==0) { arrySpecial.push(e); return; } if(e%3==0) { arrySpecial.push(e); return; } })
arryAll.forEach(function(e){ if(e%2==0) { arrySpecial.push(e); return; } if(e%3==0) { arrySpecial.push(e); return; } })
至于如何写类似break 的效果,目前尚未找到比较好的办法。
有搜索一下,有的说return false 可以达成, 试了一下, 效果和return 和return ture 是一样的。
相关文章推荐
- Javascript 数组循环遍历之forEach
- Javascript 数组循环遍历之forEach
- Javascript 数组循环遍历之forEach
- Javascript 数组循环遍历之forEach
- JavaScript数组循环遍历之forEach
- javascript数组循环遍历之foreach
- Javascript 数组循环遍历之forEach
- Javascript 数组循环遍历之forEach
- Javascript 数组循环遍历之forEach
- Javascript 数组循环遍历之forEach
- 手写js代码(一)javascript数组循环遍历之forEach
- Javascript 数组循环遍历之forEach
- Javascript 数组循环遍历之forEach
- Javascript 数组循环遍历之forEach
- Javascript 数组循环遍历之forEach
- Javascript 数组循环遍历之forEach
- Javascript 数组循环遍历之forEach
- Javascript数组循环遍历之forEach详解
- Javascript 数组循环遍历之forEach
- javascript数组循环遍历forEach