es6遍历树结构并判断_ES5和ES6数组遍历方法详解

ES5和ES6数组遍历方法详解

在ES5中常用的10种数组遍历方法:

1、原始的for循环语句

2、Array.prototype.forEach数组对象内置方法

3、Array.prototype.map数组对象内置方法

4、Array.prototype.filter数组对象内置方法

5、Array.prototype.reduce数组对象内置方法

6、Array.prototype.some数组对象内置方法

7、Array.prototype.every数组对象内置方法

8、Array.prototype.indexOf数组对象内置方法

9、Array.prototype.lastIndexOf数组对象内置方法

10、for...in循环语句

ES6中新增加了一种：

1.for...of循环语句

ES5三种数组循环示例如下：

原始for循环语句

Example1

var a = [1,2,3];

for(var i=0;i

console.log(a[i]); //结果依次为1，2，3

}

代码解读：原始for循环的优点在于大家都比较熟悉，容易理解，劣势是写起来比较繁琐，需要定义额外更多的变量，所以一下是针对于原始for循环的改良的两种写法：

Example1：写法改良版

var a = [1,2,3];

for(var i=a.length;i--;){

console.log(a[i]); //结果依次为3，2，1

}

Example2：性能改良版

var a = [1,2,3];

for(var i = 0,len=a.length; i < len; i++) {

console.log(a[i]); //结果依次为1，2，3

}

注意:以上代码可以写成这样呢，如果懵逼了的话接着看原始for循环的解读,我们都知道for循环包含三个语句块——>for(语句1；语句2；语句3){被执行的代码}，其中，语句1一般为变量定义语句(不仅可以只定义一个变量哦)，在循环开始前执行，而且只执行一次；语句2定义循环的是否继续执行的条件，同样也是在循环开始前执行，语句1之后执行，每次重新开始循环都会再次执行；语句3则在循环结束之后执行，并且每次结束的时候都会再次执行，这里要注意的是如果被执行的代码中途return出来了那是不会再执行一次语句3的，所以以上代码解释如下：因为i--这个语句在每次循环开始前都会再次先用 i 是true和false来判断是否继续执行，这里同样要注意的是由于i--和--i的区别，这里由于是i--所以会先判断i的值再去做‘减减’的操作，所以这里最后如果打印 i 的值，会发现其实是-1。

数组内置方法Array.prototype.forEach

Example

var a = [1,2,3];

a.forEach(function(value,key,arr){

console.log(value) // 结果依次为1，2，3

console.log(key) // 结尾依次为0，1，2

console.log(arr) // 三次结果都为[1,2,3]，该参数貌似没什么用

})

代码解读：forEach方法最大的好处就是便于使用，而且不用定义额外的参数变量，但是从效率以及性能角度来说它是劣于原始for循环的，而且也不能强制return结束循环，原因如下：

**forEach循环**一看就是通过**回调函数**来提供参数的，而回调函数在JS中是**闭包**的一种，闭包的作用是用来生成**私有作用域**的，所以，每一个回调函数都是一个**独立的作用域**，都拥有自己独立的存储空间，互不影响，而且内部变量还不及时释放，这也就是为什么在能不用闭包的情况下就不要用闭包的原因，而在闭包中return的话，也只是在当前回调函数中返回了，可是forEach中的其他的回调函数(闭包)仍然存在，所以，导致return是没办法结束循环的。下面写一个forEach循环实现例子供大家参考理解：

Example

Array.prototype.forEachCopy = function(callback){<