JS 数组循环遍历方法到底哪种好?

JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景。今天,李老师就来给大家讲解,各种JavaScript遍历方法的比较。

各种数组遍历的方法

语句

这是标准for循环的写法也是最传统的语句,字符串也支持,定义一个变量i作为索引,以跟踪访问的位置,len是数组的长度,条件就是i不能超过len。

语句

方法对数组的每个元素执行一次提供的CALLBACK函数,forEach是一个数组方法,可以用来把一个函数套用在一个数组中的每个元素上,为每个数组元素执行callback函数只可用于数组。遍历一个数组让数组每个元素做一件事情,那些已删除(使用delete方法等情况)或者未初始化的项将被跳过(但不包括那些值为 undefined 的项)(例如在稀疏数组上);不像map() 或者reduce() ,它总是返回 undefined值,并且不可链式调用。典型用例是在一个链的最后执行副作用。

语句

一般会使用来遍历对象的属性的,不过属性需要才能被读取到。

循环只遍历可枚举属性。一般常用来遍历对象,包括非整数类型的名称和继承的那些原型链上面的属性也能被遍历。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性就不能遍历了.

语句 (ES 6)

语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。只要是一个iterable的对象,就可以通过来迭代.

和 的区别

语句以原始插入顺序迭代对象的可枚举属性。会把继承链的对象属性都会遍历一遍,所以会更花时间.

语句只遍历可迭代对象的数据。

Other 循环方法

方法 (不改变原数组)

方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。让数组通过某种计算产生一个新数组,映射成一个新的数组,

方法

让数组中的前项和后项做某种计算,并累计最终值

方法 (不改变原数组)

为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过,不会被包含在新数组中。筛选出过滤出数组中符合条件的项,组成新数组

方法

every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 true,every 就会返回 true。检测数组中的每一项是否符合条件,如果每一项都符合条件,就会返回true,否则返回false,有点像遍历数组且操作callback。只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。

方法

some 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true。否则,some 返回 false。callback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。检查数组中是否有某些项符号条件,如果有一项就返回true,否则返回false,有点像遍历数组或者操作

对比遍历速度

对比这里我们使用了jsPerf平台进行测试

JavaScritp loop 对比

我们创建了两个数组进行对比,为什么要这样区别呢?

因为不同类型的数组在javascript内存中保存的地址格式不一样,遍历的时候编辑器会根椐数组元素的类型长度计算。比如说如果数组里面全是Number类的,循环起来会比数组里面包含Number、String、Object混合型的会快。所以创建了两个数组,一个是全undefined数组,一个是混合型数组

测试后发现有点奇怪,直接检索空数组还是会比数据数组慢,这是为什么呢?

为了对比循环的一致性我们只选其中带数据的数组进行测试。

用dataarr来做遍历,对比一下,,,,,,循环的速度

可以看到循环的速度是最快的,是最老的循,也是优化得最好的,其次是这个是es6才新增的循环非常好用,最慢是

我们可以做一下速度排序

这很明显处理大量循环数据的时候还是要使用古老循环效率最好,但也不是不使用,其实很多时候都要根据实际应该场景的,更多使用在遍历对象属性上面,在遍历的过程中还会遍历继承链,所以这就是它效率比较慢的原因,比如速率不高,不过处理在Es6实现数组功能上面非常好用方便,轻松影射创建新数组,或者例如使用Iterator属性也是行的,所以每个循环都有合适使用的地方。

最后

最后不同浏览器内核会有些许差别,有兴趣的同学可以去测试一下,有任何问题欢迎在下面留言哦,小编都会回复大家的。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191119A030LS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励