摘要：接触这么多年，第一次总结一下它的遍历语法。而且你必须借助特定的结构才能遍历数据结构。它的作用是遍历对象的键名。建议仅在遍历数组的时候使用。另一个优点是，它可以遍历任何部署了接口的数据结构，甚至是非的数据类型，即自己定义的数据结构。
接触JavaScript这么多年，第一次总结一下它的遍历语法。以前我大部分时间都在老版本的JavaScript下写代码，所以大部分时间都是用for...in，随着ES6的发布，有必要对各个遍历语法进行梳理，指出它的优缺点。
for/while循环语句这就不多说了，所有语言都会涉及的循环。不过单纯的for/while能力有限，而且性能上也堪忧。而且你必须借助特定的结构才能遍历数据结构。这里就不详解了，简单举例：
var arr = [1,2,3];
for(var i = 0,len = arr.length;i < len;i ++) {
var value = arr[i];
}
for...in语句
这也是JavaScript比较早特有的一个语句。它的作用是遍历对象的键名。
用法
var obj = {
a : "1",
b : "2",
c : "3"
};
for(var key in obj) {
var value = obj[key];
}
优点
它可以支持所有对象类型的数据，包括数组，甚至是函数等。而且语法简单，在其他语言中都很少看到。
缺点
不仅遍历普通键，连原型链上的键都去遍历了。
建议
在遍历常用对象时使用，这里的常用对象，就是我们上面举例的键值对（不是Map）。
forEach方法在php中都有foreach语法，但是JavaScript中并没有，而且php中的foreach遍历对象也OK。但在JavaScript中，forEach仅是数组提供的内置方法。
用法
[1,2,3].forEach(function(value,index){
console.log(index + ":" + value);
});
有点
可以同时获取index和value，不必再像以前遍历数组那样，还要再在for的{}去获取值。
缺点
仅支持数组。而且一旦调用，会完全遍历一次，break, continue, return都无效。
建议
仅在遍历数组的时候使用。
for...of语句这是ES6新增的语法，它基于ES6新增的Iterator和Symbol开发的，也就是说我们用ES5代码只能模拟，但无法从原理上实现它。
用法
var list = new Map().set("a",1).set("b",2).set("c",3);
for (var [key,value] of list) {
console.log(key + " => " + value);
}
优点
在遍历中直接取值。感觉上和for...in形成互补，一个在遍历中取键名，另一个取值。另一个优点是，它可以遍历任何部署了Iterator接口的数据结构，甚至是非JavaScript的数据类型，即自己定义的数据结构。
缺点
除了Map结构外，不能取到键名。不能用来遍历普通对象。
建议
在遍历时想要值的时候，可以使用，但不能用在普通对象上面。Map类型推荐使用。
递归（尾调用）ES6中对函数尾调用进行了优化，而如果尾调用结构还是一个递归函数，那么更加节省性能，简直升天。
用法
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);
});
优点
可以不涉及循环，递归的性能高于循环，特别是尾调递归。
缺点
代码结构复杂，千变万化，没有统一的规律可以掌握。
建议
当处理比较复杂的数据，可能用循环会消耗掉性能，而又比较在意性能的时候使用。
map、filter方法map方法也可以遍历数组，但是它的主要用途是在遍历过程中进行修改，而filter遍历过程一样，但是只是通过回调函数的返回值来确定是不是要保留当前遍历到的这个值。也就是说，这两个方法都可能会修改被遍历的数组本身。
第三方each、map方法：理想方法包括jQuery和underscore都提供了each。这是我们理想是使用方法，它结合了上面的forEach, for...of，是我们最希望得到的方法。
用法
$.each(object,(key,value) => {
console.log(key + " => " + value);
});
[1,2,3].each((index,value) => {
console.log(index + ":" + value);
});
优点
对我们最常用的array和object两种类型进行遍历都可以，同时可以得到键名和值。
缺点
性能上不确定，毕竟不是语言的原生，内部肯定经过加工处理。而且目前不知道是否对Map等结构支持。
建议
在复杂度比较高的情况下，希望代码简洁明确，同时也基于这些第三方库的情况下使用。其实性能上也不用太过担心，毕竟现在的电脑都很牛逼。
这篇文章最早发布在我的博客 http://www.tangshuang.net/286...
可以加我微信号和我交流：wwwtangshuangnet
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91089.html
摘要：年月欧洲计算机制造商协会发表了标准，它是的一个扩延，它也被称为年月首版年月日截止发布日期，的官方名称是，国际意在更频繁地发布包含小规模增量更新的新版本，下一版本将于年发布，命名为。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的...
摘要：中可以实现遍历的数据类型主要是对象，其中包括普通对象与数组。遍历器是一种接口，为各种不同的数据结构提供统一的访问机制。实例五遍历器对象实例五是的遍历过程，通过手动调用其对象的方法实现信息获取。为每个数组元素执行函数。 前言 将依据自身痛点学习，计划对原生JavaScript写一个系统，本文为第一篇，感兴趣的同学可以关注个人公众号：ZeroToOneMe，或者github博客，将持续...
摘要：执行栈清空后，检查微任务队列，将可执行的微任务全部执行。对象的错误具有冒泡性质，会一直向后传递，直到被捕获为止。返回的遍历器对象，可以依次遍历函数内部的每一个状态。表示函数里有异步操作，表示紧跟在后面的表达式需要等待结果。 javascript 是单线程执行的，由js文件自上而下依次执行。即为同步执行，若是有网络请求或者定时器等业务时，不能让浏览器傻傻等待到结束后再继续执行后面的js吧...
摘要：由于这些是驱动的工具，因此它们由引擎提供支持。两个主要引擎是的和的引擎。然后，四个即时进程启动，分析并执行解析器生成的字节码。简单来说，这个引擎获取源代码，将其分解为字符串，获取这些字符串并将它们转换为编译器可以理解的字节码，然后执行它。 渲染引擎和JavaScript引擎 先从一张图片来理解下这两个引擎 showImg(https://segmentfault.com/img/bVb...
摘要：由于这些是驱动的工具，因此它们由引擎提供支持。两个主要引擎是的和的引擎。然后，四个即时进程启动，分析并执行解析器生成的字节码。简单来说，这个引擎获取源代码，将其分解为字符串，获取这些字符串并将它们转换为编译器可以理解的字节码，然后执行它。 渲染引擎和JavaScript引擎 先从一张图片来理解下这两个引擎 showImg(https://segmentfault.com/img/bVb...
阅读 3696·2021-11-17 09:33
阅读 2661·2021-09-22 15:12
阅读 3324·2021-08-12 13:24
阅读 2400·2019-08-30 11:14
阅读 1708·2019-08-29 14:09
阅读 1312·2019-08-26 14:01
阅读 3042·2019-08-26 13:49
阅读 1748·2019-08-26 12:16
