JS几种数组遍历方式以及性能分析对比(转 未经测试,先mark)

前言

这一篇与上一篇 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个循环,得到的分析结果)

分析工具示例Demo

时间: 2024-08-02 02:40:29

JS几种数组遍历方式以及性能分析对比(转 未经测试,先mark)的相关文章

JS几种数组遍历方式以及性能分析对比

前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一

ArrayList和LinkedList的几种循环遍历方式及性能对比分析

主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性能测试对比,根据ArrayList和LinkedList的源码实现分析性能结果,总结结论.通过本文你可以了解(1)List的五种遍历方式及各自性能 (2)foreach及Iterator的实现 (3)加深对ArrayList和LinkedList实现的了解.阅读本文前希望你已经了解ArrayList顺序存储和LinkedList链式的结构,本文不对此进行介绍. 相关:HashMap循环遍历方式及其性能对

ArrayList和LinkedList的几种循环遍历方式及性能对比分析(转)

主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性能测试对比,根据ArrayList和LinkedList的源码实现分析性能结果,总结结论. 通过本文你可以了解(1)List的五种遍历方式及各自性能 (2)foreach及Iterator的实现 (3)加深对ArrayList和LinkedList实现的了解. 阅读本文前希望你已经了解ArrayList顺序存储和LinkedList链式的结构,本文不对此进行介绍. 相关:HashMap循环遍历方式及其性

【转】ArrayList和LinkedList的几种循环遍历方式及性能对比分析

原文网址:http://www.trinea.cn/android/arraylist-linkedlist-loop-performance/ 主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性能测试对比,根据ArrayList和LinkedList的源码实现分析性能结果,总结结论.通过本文你可以了解(1)List的五种遍历方式及各自性能 (2)foreach及Iterator的实现 (3)加深对ArrayList和LinkedList实现的了解.阅

js几种数组遍历方法.

第一种:普通的for循环 for(var i = 0; i < arr.length; i++) { } 这是最简单的一种遍历方法,也是使用的最多的一种,但是还能优化. 第二种:优化版for循环 for(var i = 0,len=arr.length; i < len; i++) { } 这种看上去和第一种差不多,主要是避免重复获取数组长度,当数组很大时才能看到明显效果. 第三种:foreach循环 arr.forEach(function(e){ }); 数组自带的foreach循环,使用

HashMap循环遍历方式及其性能对比

主要介绍HashMap的四种循环遍历方式,各种方式的性能测试对比,根据HashMap的源码实现分析性能结果,总结结论.   1. Map的四种遍历方式 下面只是简单介绍各种遍历示例(以HashMap为例),各自优劣会在本文后面进行分析给出结论. (1) for each map.entrySet() Java 1 2 3 4 5 Map<String, String> map = new HashMap<String, String>(); for (Entry<String

通过两种深度优先遍历方式重建二叉树或者得到其余一种遍历方式

重建二叉树的方法有很多种,但是并不是通过任意两种深度优先遍历方式都可以重建二叉树,它也是有限制的. 通过前序+中序.后序+中序.层序+中序这三种方式是可以重建二叉树的,但是通过前序+后序.前序+层序.后序+层序这三种方式是不能重建二叉树的.本文重点讲解通过前序+中序的方式重建二叉树的基本思想以及具体的代码实现. 基本思想 中序遍历的第一个节点是root节点,在前序遍历中找到root, root的前半段就是root的左子树的前序遍历(长度M), root的后半段就是root的右子树的前序遍历(长度

Collection、Map、数组 遍历方式

一.for each底层实现 对于Collection,for each是隐式调用Iterator实现的,效率比显示调用Iterator略低,对于Array,for each是通过对下标引用实现的,效率比for循环要略低.for each返回的是Collection一个对象,因此不能用for each进行赋值操作. 二.Collection实现了Iterator接口,所以List.Queue.Set均可使用for each方式遍历. 三.HashMap三种遍历方式: ①map.entrySet(

Java Map各遍历方式的性能比较

1. 阐述 对于Java中Map的遍历方式,很多文章都推荐使用entrySet,认为其比keySet的效率高很多.理由是:entrySet方法一次拿到所有key和value的集合:而keySet拿到的只是key的集合,针对每个key,都要去Map中额外查找一次value,从而降低了总体效率.那么实际情况如何呢? 为了解遍历性能的真实差距,包括在遍历key+value.遍历key.遍历value等不同场景下的差异,我试着进行了一些对比测试. 2. 对比测试 一开始只进行了简单的测试,但结果却表明k