Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

各种 forEach 的细节差异

  很多框架都实现了 forEach 或类似 forEach 的功能,但实际上大家的实现都有着细微的差异。如果不了解这些差异,在跨项目的开发中使用不同的框架时,这些 forEach 规则不熟悉就很容易出错。这里我拿 jQuery.each、angular.forEach 和原生的 [].forEach 做个对比。
  jQuery 这个 $.each 是比较有历史的东西了,它是在规范之前诞生的,所以不要吐槽的的名字和回调参数列表。但确实 $.each 的回调参数列表是和原生 [].forEach 相反的。angular.forEach 则是一个模仿原生实现的产物,至少回调参数的格式与原生的 forEach 保持一致了。这个坑算是比较大的,基本上应该是用过 $.each 和 [].forEach 的人都踩过的。
  除了回调参数的不同外,它们对空项的处理方式也不同。jQuery.each 和 angular 1.2 的 forEach 实际上都是在遍历数组。它们的实现就是普通的 for 循环,根据 length 属性遍历,无论某个项是否真的存在。而原生的 [].forEach 和 angular 1.3 的 forEach 则是以类似 for-in 的形式来遍历数组元素的,它不会遍历到空项。
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$.each([1, ,2], function(i, e) { console.log(e); });
// 1
// undefined
// 2
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script>
angular.forEach([1, ,2], function(e) { console.log(e); });
// 1
// undefined
// 2
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.forEach([1, ,2], function(e) { console.log(e); });
// 1
// 2
</script>
<script>
[1, ,2].forEach(function(e) { console.log(e); });
// 1
// 2
</script>
  以上这些都只是举例,实际不仅仅是这些框架存在差异。我说 jQuery 和 Angular 只是因为自己比较熟悉而已,还有很多框架也封装了类似的方法。大家可以去试试这些细节方面在各框架上的实现差异,也许会有意外的收获。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^