js中for/for in/for of区别-性能测试及深层对比分析

前言：
做项目的时候，发现对于大量数据，不同的循环方法，其实时间和耗费性能差别蛮大的。如果数据就几十条其实用哪种也无所谓啦，比如如果数据少，不计性能，我直接用for of 多爽啊，可以直接拿到值，所以不同的场景还是要区别分析。

本文就是针对这几类循环，做个性能测试，希望能小小帮助到大家，在遇到一些问题时，可以快速做出性能判断。

开始测试：
首先为了测试，创建了一个长度为一千万的数组，然后给他们fill（0）。

//let arr=new Array(10000000)创造长度为一千万的数组
let arr=new Array(10000000).fill(0)

一、不同声明下for和while的性能
①用var声明，for和while差不多 都是24ms左右。（不确定循环次数用while）

//用for循环-----使用console自带计算时间的属性
console.time("for")
for(var i=0,i<arr.length,i++){}
console.timeEnd("for")

//输出for:24.49ms

//用while循环
console.time("while")
var i=0
for(i<arr.length){i++}
console.timeEnd("while")

//输出while:24.042ms

结论：在使用var时，for，while耗时都是24ms左右，性能差不多。

②用let声明，for性能更好，for声明9ms左右，var声明32ms左右。

//用for循环
console.time("for")
for(let i=0,i<arr.length,i++){}
console.timeEnd("for")

//输出for:9.38379ms

//用while循环
console.time("while")
let i=0
for(i<arr.length){i++}
console.timeEnd("while")

//输出while:32.566162ms

结论：在使用let声明时，for性能更好。

③forEach是134.74ms

//用forEach
console.time("forEach")
arr.forEach(function(item){}）
console.timeEnd("forEach")

//输出forEach:134.7458ms

小结：
1、用var声明，for和while差不多，都是24ms左右。（不确定循环次数用while）

2、用let声明，for性能更好，for声明9ms左右，var声明32ms左右。
原理：没有创造全局不释放的变量。因为let是块级作用域，for结束就可以释放掉。

二、for in
一般用来遍历对象，循环出来是key，也就是键名。

//用for in
console.time("for in")
for (let key in arr){}
console.timeEnd("for in")

//输出for in:3593.74ms

我们可以看出来，跟上面的循环方式，for9ms比起来，for in的性能最差的，接近 3600多ms，速度相差了400多倍。
因为他会迭代所有的私有和共有属性，原型链一级级查很耗性能。
存在问题很多：不能迭代symbol，迭代顺序数字优先，性能差，耗时长，会迭代所有可枚举属性，私有/共有。

三、for of 
一般用来遍历数组，循环出的是value，也就是元素值。

//用for of
console.time("for of")
for (const val of arr){console.log(val)}
console.timeEnd("for of")

//输出for of:327.006ms

性能测试300多ms。
for...of 不能循环普通的对象，需要通过和 Object.keys()搭配使用，有点多此一举。
底层：按照iterator迭代器规范遍历。
迭代器规范：必须有next方法，每次执行就拿到结构中某一项值。有done和value属性。
done：是否迭代完成，value：每一次获取的值。

以上为个人查资料听课学习总结的，这个是之前听课总结时关于迭代器的代码，自我感觉很清晰，放出来给大家参考下。

 最后的总结：
 

一、for/while
用var声明，for和while差不多，都是24ms左右。（不确定循环次数用while）
用let声明，for性能更好，for声明9ms左右，var声明32ms左右。
foreach是130ms左右。

二、for in
for in一般用来遍历对象，循环出来是key，也就是键名。
性能最差.3600ms左右，跟for最高相差400倍，数据量大的时候~避免踩坑，慎用~
因为他会迭代所有的私有和共有属性，原型链一级级查很耗性能。
问题：性能差，不能迭代symbol，迭代顺序数字优先。

三、for of 
一般用来遍历数组，循环出的是value，也就是元素值。不能循环普通对象。
性能：327ms左右。
底层：按照iterator迭代器规范遍历。
迭代器规范：必须有next方法，每次执行就拿到结构中某一项值。有done和value属性。
done：是否迭代完成，value：每一次获取的值。