遍历器总结

遍历器：取出数据容器中的每一个元素的工具

1、for 是最重要的遍历器 兼容性好

例如遍历一个数组：

<script>
    var arr=[1,2,3,4]
    for(var i=0;i<arr.length;i++){
        console.log(arr[i])
    }
</script>

2、for in 特点：for in 循环主要用于遍历普通对象， i 代表对象的 key 值， obj[i] 代表对应的 value, 当用它来遍历数组时候， 多数情况下也能达到同样的效果， 但是你不要这么做， 这是有风险的， 因为 i 输出为字符串形式， 而不是数组需要的数字下标， 这意味着在某些情况下， 会发生字符串运算， 导致数据错误， 比如： '52' +1 = '521' 而不是我们需要的 53。另外for in 循环的时候， 不仅遍历自身的属性， 还会找到 prototype 上去， 所以最好在循环体内加一个判断， 就用 obj[i].hasOwnProperty(i)， 这样就避免遍历出太多不需要的属性。

是es5的技术

写一个例子：

<script>
    	    var arr=[10,203,44]
			for (var i in arr) {
				console.log(i,arr[i]) //0 10  1 203  2 44							
			}
			var obj={name:"karen",age:23}
			for(var key in obj){
				console.log(key,obj[key])// name "karen"  age  23
				
			}
</script>

3、while循环

4、do...while()循环

while循环和do...while()循环再前面讲过，不作过多说明。

5、forEach()函数

forEach循环， 循环数组中每一个元素并采取操作， 没有返回值， 可以不用知道数组长度, 他有三个参数， 只有第一个是必需的， 代表当前下标下的 value，第二个是代表当前下标，第三个是数组本身。另外请注意， forEach 循环在所有元素调用完毕之前是不能停止的， 它没有break 语句， 如果你必须要停止， 可以尝试try-catch 语句， 就是在要强制退出的时候， 抛出一个 error 给catch 捕捉到， 然后在catch 里面return， 这样就能中止循环了， 如果你经常用这个方法， 最好自定义一个这样的 forEach 函数在你的库里。

简单的使用：

<script>
            var arr=[10,203,34]
			arr.forEach(function(el,index,arr){
				console.log(el,index,arr)
                //10 0 [10,203,34]
                //203 1 [10,203,34]
                //34 2 [10,203,34]
			})
            
</script>

自己封装一个foreach函数

<script>
    Array.prototype.myforEach = function(callback) {
				for (var i = 0; i < this.length; i++) {
					callback(this[i],i,this)
				}
			}
			var re = arr.myforEach(function(el) {
				console.log(el)
			})
</script>

6、map()函数 与forEach()函数相似，但是它有返回值

该方法返回一个新数组， 数组中的元素为原始数组元素调用函数处理后的值。注意： map 和 forEach 方法都是只能用来遍历数组， 不能用来遍历普通对象。

<script>
    	    var arr=[10,20,9]
			var re=arr.map(function(el){
				console.log(el)
				return el*el
			})
			console.log(re,arr)//[100,400,81] [10,20,9]

</script>

7、filter()

filter 方法是 Array 对象内置方法， 它会返回通过过滤的元素， 不改变原来的数组。

<script>
			var arr=[10,80,34,50]
			var re=arr.filter(function(el,index,arr){
				if(el>18){
					return true
				}else{
					return false
				}
			})
			console.log(re) //[80,34,50]
            
</script>

8、 some()

some() 方法用于检测数组中的元素是否满足指定条件（ 函数提供）, 返回 boolean 值， 不改变原数组。

<script>
            var  arr=[10,200,500,400]
			var re=arr.some(function(el){
				console.log(el) //10 200 后不再执行
				return el>100
			})
			console.log(re) //true
</script>

9、every（）

every() 方法与some()方法相似，every() 方法是用于检测数组所有元素是否都符合指定条件（ 通过函数提供）， 返回 boolean 值， 不改变原数组。 

10、reduce()

reduce() 方法接收一个函数作为累加器， 数组中的每个值（ 从左到右） 开始缩减， 最终计算为一个值。函数有两个参数，作为相加的两个参数，我们还可以指定累加从何处开始，引入代码具体说明：

<script>
            var arr=[10,20,4,5]
			var re=arr.reduce(function(n1,n2){ 
				console.log(n1,n2)
				return n1+n2
			},100)//这里的100是我们指定的开始参数，如果这里的参数为空，n1就是数组中的10，n2就是数组中的20，但是此时指定了初始值，n1为100，n2为10
			console.log(re) //139
            /*
            执行步骤：
        1、n1=100,n2=10，两者相加，作为返回值返回给下一次的相加;
        2、此时的n1=110,为上一步两者相加的值，n2=20 两者相加，作为返回值返回给下一次的相加;
        3、循环上述步骤，直至遍历完整个数组
            */
</script>

再写一个贴近实际的例子计算总价：

<script>
    	var arr = [{
					title: "肉香肉丝",
					price: 18,
					count: 2
				},
				{
					title: "米饭",
					price: 1,
					count: 5
				},
				{
					title: "水煮肉片",
					price: 28,
					count: 1
				},
				{
					title: "鸡公煲",
					price: 20,
					count: 1
				}
			]
			
			var re=arr.reduce(function(n1,n2){
				return n1+n2.price*n2.count
			},0)
			console.log(re) //89
</script>

 11、reduceRight() 

与reduce是一个原理，不过reduceRight() 的累加是从数组的右边开始。

12、for of es6的技术

相对于for in ,它不能再遍历对象， for of 遍历数组的时候,for of 会自动循环请求数组的迭代器,并自动使用这个迭代器遍历数组的值，而对象并不能使用for of来遍历。”

它允许你遍历 Arrays（ 数组）, Strings（ 字符串）, Maps（ 映射）, Sets（ 集合） 等可迭代(Iterable data) 的数据结构, 注意它的兼容性。