JS几种数组遍历方法总结及对比
这次给大家带来JS几种数组遍历方法总结及对比，JS几种数组遍历方法总结及对比的注意事项有哪些，下面就是实战案例，一起来看一下。前言这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列，本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比起由在上一次分析了JS几种常用变量交换方式以及各自性能后，觉得这种方式挺好的，于是抽取了核心逻辑，封装成了模板，打算拓展成一个系列，本文则是系列中的第二篇，JS数组遍历方式的分析对比JS数组遍历的几种方式JS数组遍历，基本就是for,forin,foreach,forof,map等等一些方法，以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代码如下:for(j = 0; j < arr.length; j++) {}简要说明: 最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间第二种:优化版for循环代码如下:for(j = 0,len=arr.length; j < len; j++) {}简要说明: 使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。这种方法基本上是所有循环遍历方法中性能最高的一种第三种:弱化版for循环代码如下:for(j = 0; arr[j]!=null; j++) {}简要说明: 这种方法其实严格上也属于for循环，只不过是没有使用length判断，而使用变量本身判断实际上，这种方法的性能要远远小于普通for循环第四种:foreach循环代码如下:arr.forEach(function(e){});简要说明: 数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱第五种:foreach变种代码如下:Array.prototype.forEach.call(arr,function(el){});简要说明: 由于foreach是Array型自带的，对于一些非这种类型的，无法直接使用(如NodeList)，所以才有了这个变种，使用这个变种可以让类似的数组拥有foreach功能。实际性能要比普通foreach弱第六种:forin循环代码如下:for(j in arr) {}简要说明: 这个循环很多人爱用，但实际上，经分析测试，在众多的循环遍历方式中它的效率是最低的第七种:map遍历代码如下:arr.map(function(n){});简要说明: 这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach第八种:forof遍历(需要ES6支持)代码如下:for(let value of arr) {});简要说明: 这种方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循环各种遍历方式的性能对比上述列举了几种方式都有一一做过对比分析，基本上可以得出的结论是:普通for循环才是最优雅的(PS:以上所有的代码都只是进行空的循环，没有再循环内部执行代码，仅仅是分析各自循环的时间而已)性能对比截图分析结果1以下截图中的数据是，在chrome (支持es6)中运行了100次后得出的结论(每次运行10次,一共10个循环，得到的分析结果) 可以看出,forin循环最慢。优化后的普通for循环最快分析结果2以下截图数据是，在chrome (支持es6)中运行了1000次后得出的结论(每次运行100次,一共10个循环，得到的分析结果) 相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：Koa项目搭建步骤详解JS实现文本字体打印界面
JS 中如何判断数组
JS 中有四种方式判断数据类型，它们分别是： typeof 、 instanceof 、 constructor 、 Object.prototype.toString 。
在 ES5 中，新增了几种方式可以用来进行数组的判断，它们是 Object.prototype.isPrototypeOf 、 Array.isArray 和 Object.getPrototypeOf 。
很遗憾，对于任何引用类型的数据（包括 null ）， typeof 统一返回 Object 字符串，所以不能用它来判断 JS 中的数组。
于是可以通过 instanceof 检测数据的原型链中是否存在 Array 构造函数来判断数据是否是数组。
对象实例有一个 constructor 属性， constructor 指向对象实例的构造函数。于是，我们可以通过判断数据的 constructor 是否为 Array 构造函数即可。
要注意： constructor 是可以被修改的，所以这种判断方式不可靠。
toString 可以用于检测对象的类型，它返回一个字符串。为了每个对象都能通过 Object.prototype.toString 来判断，需要借助函数的 call 或者 apply 方法。
这个方法没什么好说的，直接调用即可，会返回一个布尔值。
根据 ES5 新增的这个方法，我们可以把数组的原型对象与需要判断对象的原型进行比较，如果两者是全等关系，那么可以认为它是数组。
借用 ES5 新增的 isPrototypeOf 方法，可以直接了当的通过 Array 调用来判断目标数据是否是数组类型。
ES5 新增的两种方法都与原型链有关，理解并掌握原型相关内容还是判断数组的关键。方便理解与记忆的话，可以把 isArray 和 isPrototypeOf 放在一起，他们返回的都是布尔值，并且用途也相似。
getPrototypeOf 方法则是用来找到被检测数据的原型，拿到原型后还要与 Array.prototype 进行比较。
怎样快速而优雅地遍历 JavaScript 数组
我们一般用循环来遍历数组，而循环一直是 JavaScript 性能问题的常见来源，有时循环用得不好会严重降低代码的运行速度。例如，遍历数组时，我们会很自然地写出下面这种代码：
// 未优化的代码1
var array = [0,1,2,3,4,5,6,7,8,9];
// for-in 循环
for (var val in array) {
fn(val);
}
还有这一种常见写法：
// 未优化的代码2
var array = [0,1,2,3,4,5,6,7,8,9];
// for 循环
for (var i=0; i < array.length; i++) {
fn(array[i]);
}
这两个方法看上去似乎不错，而且语义上也很容易理解。但是这两个方法都有性能问题：
“未优化的代码1”中，for-in 需要分析出 array 的每个属性，这个操作的性能开销很大，用在 key 已知的数组上是非常不划算的。所以尽量不要用 for-in，除非你不清楚要处理哪些属性，例如 JSON 对象这样的情况。
“未优化的代码2”中，循环每执行一次，都要检查一次 array.length 的值，读属性要比读局部变量慢，尤其是当 array 里存放的都是 DOM 元素（像 array = document.getElementByClassName("class");），因为每次读 array.length 都要扫描一遍页面上 class="class" 的元素，速度更是慢得抓狂。
假如你的任务是从页面上 100 个复选框中，找出选中的复选框的 value，并把它们放入一个数组的话，在 IE 上可能得花上半秒才能完成。结果就是，用户在列表里选择了自己要的项目，点击提交后起码要过半秒才会有反应，直观感觉就是很卡。
我们绝不能接受这样的结果，所以我们需要加快循环终止条件的计算速度。先把数组的长度先查出来，存进一个局部变量，那么循环的速度将会大大提高：
// 快速的代码
var array = [0,1,2,3,4,5,6,7,8,9];
// for 循环
var length = array.length;
for (var i=0; i < length; i++) {
fn(array[i]);
}
现在只需要读取一次 array.length 的值，遍历数组的过程大大加快了。
不过我们还可以让它更快。如果循环终止条件不需要进行比较运算，那么循环的速度还可以更快：
// 最快的代码
var array = [0,1,2,3,4,5,6,7,8,9];
// for 循环
for (var i = array.length; i--;) {
fn(array[i]);
}
把数组下标改成向 0 递减，循环终止条件只需要判断 i 是否为 0 就行了。因为循环增量和循环终止条件结合在一起，所以可以写成更简单的 while 循环：
// 最快且优雅的代码
var array = [0,1,2,3,4,5,6,7,8,9];
// while 循环
var i = array.length;
while (i--) {
fn(array[i]);
}
