接触JavaScript这么多年,第一次本文作者:唐霜,转载请注明出处。【本文受版权保护】总结一下它的遍历语法。以前我大部分时间都本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】在老版本的JavaScript下写代码,【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。所以大部分时间都是用for…转载请注明出处:www.tangshuang.net【版权所有,侵权必究】in,随着ES6的发布,有必要对各个遍历本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。语法进行梳理,指出它的优缺点。
转载请注明出处:www.tangshuang.net【本文受版权保护】【版权所有,侵权必究】for/while循环语句【作者:唐霜】
本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net这就不多说了,所有语言都会涉及的循环。不【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】过单纯的for/while能力有限,而且本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】性能上也堪忧。而且你必须借助特定的结构才转载请注明出处:www.tangshuang.net【版权所有,侵权必究】能遍历数据结构。这里就不详解了,简单举例转载请注明出处:www.tangshuang.net原创内容,盗版必究。:
【本文受版权保护】【本文受版权保护】【原创不易,请尊重版权】转载请注明出处:www.tangshuang.netvar arr = [1,2,3];
for(var i = 0,len = arr.length;i < len;i ++) {
var value = arr[i];
}
for…in语句【原创内容,转载请注明出处】
【本文受版权保护】转载请注明出处:www.tangshuang.net原创内容,盗版必究。【本文首发于唐霜的博客】【本文首发于唐霜的博客】这也是JavaScript比较早特有的一【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。个语句。它的作用是遍历对象【原创内容,转载请注明出处】的键名。【版权所有】唐霜 www.tangshuang.net
本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net用法【作者:唐霜】
本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【版权所有,侵权必究】【版权所有,侵权必究】var obj = {
a : '1',
b : '2',
c : '3'
};
for(var key in obj) {
var value = obj[key];
}
优点原创内容,盗版必究。
【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】【本文受版权保护】它可以支持所有对象类型的数据,包括数组,【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。甚至是函数等。而且语法简单,在其他语言中【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net都很少看到。
【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。缺点【转载请注明来源】
【版权所有,侵权必究】未经授权,禁止复制转载。未经授权,禁止复制转载。【原创内容,转载请注明出处】不仅遍历普通键,连原型链上的键都去遍历了【转载请注明来源】原创内容,盗版必究。。
【转载请注明来源】【作者:唐霜】【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。建议【转载请注明来源】
本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。在遍历常用对象时使用,这里的常用对象,就【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】是我们上面举例的键值对(不是Map)。
本文作者:唐霜,转载请注明出处。【未经授权禁止转载】未经授权,禁止复制转载。原创内容,盗版必究。forEach方法【本文受版权保护】
本文版权归作者所有,未经授权不得转载。【本文受版权保护】【关注微信公众号:wwwtangshuangnet】在php中都有foreach语法,但是J原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。avaScript中并没有,而且php中原创内容,盗版必究。【未经授权禁止转载】的foreach遍历对象也OK。但在Ja原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.netvaScript中,forEach仅是数【转载请注明来源】【原创不易,请尊重版权】组提供的内置方法。
【作者:唐霜】本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。用法【原创不易,请尊重版权】
【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net[1,2,3].forEach(function(value,index){
console.log(index + ':' + value);});
有点【作者:唐霜】
【未经授权禁止转载】【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】可以同时获取index和value,不必转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】再像以前遍历数组那样,还要再在for的{【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net}去获取值。
【转载请注明来源】【作者:唐霜】本文版权归作者所有,未经授权不得转载。【转载请注明来源】缺点【作者:唐霜】
著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】【转载请注明来源】本文作者:唐霜,转载请注明出处。仅支持数组。而且一旦调用,会完全遍历一次本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。,break, continue, re【原创不易,请尊重版权】【本文首发于唐霜的博客】turn都无效。
著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。建议著作权归作者所有,禁止商业用途转载。
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】【作者:唐霜】【本文受版权保护】仅在遍历数组的时候使用。转载请注明出处:www.tangshuang.net
原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】for…of语句【版权所有】唐霜 www.tangshuang.net
【原创内容,转载请注明出处】【作者:唐霜】【本文受版权保护】未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】这是ES6新增的语法,它基于ES6新增的【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】Iterator和Symbol开发的,也【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。就是说我们用ES5代码只能模拟,但无法从【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】原理上实现它。
【关注微信公众号:wwwtangshuangnet】【本文受版权保护】原创内容,盗版必究。用法未经授权,禁止复制转载。
本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。【本文受版权保护】var list = new Map().set('a',1).set('b',2).set('c',3);for (var [key,value] of list) {
console.log(key + ' => ' + value);}
优点本文版权归作者所有,未经授权不得转载。
【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net在遍历中直接取值。感觉上和forR【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net30;in形成互补,一个在遍历中取键名,【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。另一个取值。另一个优点是,它可以遍历任何【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。部署了Iterator接口的数据结构,甚【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。至是非JavaScript的数据类型,即本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】自己定义的数据结构。
未经授权,禁止复制转载。【版权所有,侵权必究】【本文受版权保护】著作权归作者所有,禁止商业用途转载。缺点原创内容,盗版必究。
本文作者:唐霜,转载请注明出处。【作者:唐霜】著作权归作者所有,禁止商业用途转载。除了Map结构外,不能取到键名。不能用来原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】遍历普通对象。
【本文首发于唐霜的博客】未经授权,禁止复制转载。【作者:唐霜】建议【本文首发于唐霜的博客】
【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】【本文首发于唐霜的博客】在遍历时想要值的时候,可以使用,但不能用原创内容,盗版必究。【转载请注明来源】在普通对象上面。Map类型推荐使用。
未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。递归(尾调用)本文版权归作者所有,未经授权不得转载。
【作者:唐霜】未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。ES6中对函数尾调用进行了优化,而如果尾著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。调用结构还是一个递归函数,那么更加节省性本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】能,简直升天。
【本文首发于唐霜的博客】【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】用法本文作者:唐霜,转载请注明出处。
原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。function forEach(object,factory,_keyIndex = 0,_keys = object.keys()) { var key = _keys[_keyIndex]; var value = object[key]; if(typeof factory === 'function') factory(key,value); _keyIndex ++; return forEach(object,factory,_keyIndex,_keys);}var obj = {
a : 1,
b : 2,
c : 3};forEach(obj,function(key,value){
console.log(key + ' => ' + value);});
优点【原创不易,请尊重版权】
【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】【本文首发于唐霜的博客】可以不涉及循环,递归的性能高于循环,特别未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。是尾调递归。
【转载请注明来源】未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。缺点原创内容,盗版必究。
【作者:唐霜】【版权所有,侵权必究】【版权所有,侵权必究】代码结构复杂,千变万化,没有统一的规律可本文作者:唐霜,转载请注明出处。【作者:唐霜】以掌握。
【作者:唐霜】未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】建议【本文受版权保护】
【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。当处理比较复杂的数据,可能用循环会消耗掉【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.net性能,而又比较在意性能的时候使用。
【作者:唐霜】本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】map、filter方法原创内容,盗版必究。
【版权所有,侵权必究】转载请注明出处:www.tangshuang.net【本文受版权保护】本文版权归作者所有,未经授权不得转载。map方法也可以遍历数组,但是它的主要用【作者:唐霜】【原创内容,转载请注明出处】途是在遍历过程中进行修改,而filter原创内容,盗版必究。【原创内容,转载请注明出处】遍历过程一样,但是只是通过回调函数的返回本文作者:唐霜,转载请注明出处。原创内容,盗版必究。值来确定是不是要保留当前遍历到的这个值。原创内容,盗版必究。本文作者:唐霜,转载请注明出处。也就是说,这两个方法都可能会修改被遍历的【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】数组本身。
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】【版权所有,侵权必究】【版权所有,侵权必究】第三方each、map方法:理想方法转载请注明出处:www.tangshuang.net
未经授权,禁止复制转载。【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。【转载请注明来源】包括jQuery和underscore都未经授权,禁止复制转载。【版权所有,侵权必究】提供了each。这是我们理想是使用方法,【版权所有,侵权必究】未经授权,禁止复制转载。它结合了上面的forEach, for&本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】#8230;of,是我们最希望得到的方法【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net。
【原创内容,转载请注明出处】【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。用法【本文首发于唐霜的博客】
本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。$.each(object,(key,value) => {
console.log(key + ' => ' + value);});[1,2,3].each((index,value) => {
console.log(index + ':' + value);});
有点【本文受版权保护】
【作者:唐霜】本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】对我们最常用的array和object两【本文受版权保护】本文版权归作者所有,未经授权不得转载。种类型进行遍历都可以,同时可以得到键名和未经授权,禁止复制转载。【版权所有,侵权必究】值。
【原创内容,转载请注明出处】未经授权,禁止复制转载。原创内容,盗版必究。转载请注明出处:www.tangshuang.net【作者:唐霜】缺点【作者:唐霜】
【未经授权禁止转载】本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】性能上不确定,毕竟不是语言的原生,内部肯【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。定经过加工处理。而且目前不知道是否对Ma【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】p等结构支持。
【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】【本文受版权保护】建议原创内容,盗版必究。
【作者:唐霜】原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net在复杂度比较高的情况下,希望代码简洁明确【作者:唐霜】【原创内容,转载请注明出处】,同时也基于这些第三方库的情况下使用。其原创内容,盗版必究。【原创不易,请尊重版权】实性能上也不用太过担心,毕竟现在的电脑都未经授权,禁止复制转载。【作者:唐霜】很牛逼。
原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。


[…] JavaScript中遍历我已经在《javascript的几种常见遍历数据结构的语法》中讲过了,但是数组有几个自带的遍历方法map、forEach、reduce、filter他们的区别是什么呢?本文简单的总结一下,让你装逼无误。 […]
[…] 为了方便,还是先说一下for…of吧,它是ES6新的遍历方式(《javascript的几种常见遍历数据结构的语法》),目前来看,浏览器不支持,连babel也不支持,要安装babel的扩展才支持。 […]
[…] 这篇文章最早发布在我的博客 http://www.tangshuang.net/286…可以加我微信号和我交流:wwwtangshuangnet […]