各种遍历的方法

js常见各种遍历的方法及解释

---

常见的遍历方式： for，for in ，for each，for or …

​ 还有：map，every ，some，reduce，filter

• map: 只能遍历数组，不能中断，返回值是修改后的数组。

• every：对数组中的每一运行给定的函数，如果该函数对每一项都返回true,则该函数返回true

• some：对数组中的每一运行给定的函数，如果该函数有一项返回true,就返回true，所有项返回false才返回false

• reduce() 方法对数组中的每个元素执行一个由你提供的reducer函数（升序执行），将其结果汇总为单个返回值

• filter：对数组中的每一运行给定的函数，会返回满足该函数的项组成的数组

1. for 循环 （ES1）

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

   • for 循环方式通用，迭代过程可以访问元素和当前元素下标索引，但是语法上略显冗长。

2. 优化版 for循环

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

   • 使用临时变量，将长度缓存起来，避免重复获取数组长度，尤其是当数组长度较大时优化效果才会更加明显。

   • 这种方法基本上是所有循环遍历方法中性能最高的一种

3. for in （ES1）

   var arr = [1,2,3,4,5]
   for(var i in arr){
     console.log(i,arr[i])
   }  //这里的i是对象属性，也就是数组的下标
   

   • 迭代的是属性key，不是值

   • 由于属性 key 是字符串，迭代出的元素索引是 string,不是 number.

   • 迭代的是数组实例上所有可枚举的属性key,而不是数组内元素。

   • 一般常用来遍历对象，包括非整数类型的名称和继承的那些原型链上面的属性也能被遍历。

4. for Each （ES5）

   const arr = ['a', 'b', 'c'];
   arr.prop = 'property value';
   
   arr.forEach((elem, index) => {
     console.log(elem, index);
   });
   

   • 这个方法很方便,它让我们可以访问数组元素和数组元素下标，而不需要做太多的事情。

   • 对数组中的每一元素运行给定的函数,没有返回值，常用来遍历元素

   • 无法中断循环。

5. for of (ES6)

let arr=["前端","南玖","ssss"];
    for (let item of arr){
        console.log(item)
    }

• 可以迭代所有数组元素

• 可以使用 break 和 continue 跳出循环

• 不能遍历对象

• let person={name:"南玖",age:18,city:"上海"}
  for (let item of person){
    console.log(item)
  }
  for(let item of Object.keys(person)){
      console.log(person[item])
  }
  

• Object.keys 方法 返回一个由一个给定对象的自身可枚举属性组成的数组

6. 建议用法

   • 用for循环遍历数组

   • 用for...in遍历对象

   • 用for...of遍历类数组对象（ES6）

   • 用Object.keys()获取对象属性名的集合

   为什么要用不同遍历

    var arr=[]
   				for(let i=0;i<100000;i++){
   					arr.push(i)
   				}
   				// console.log(arr);
   				
   			function clecTime(fn,fnName){
   			        const start = new Date().getTime()
   			        if(fn){
   						fn()
   						const end = new Date().getTime()
   						console.log(`${fnName}执行耗时:${end-start}ms`)
   					}
   			}j
   			// for方法
   			function forfn(){
   			  let a = []
   			  for(var i=0;i<arr.length;i++){
   			    console.log(i)
   			    a.push(arr[i])
   			  }
   			}
   			clecTime(forfn, 'for')
   			
   			// 改良 for
   			// function forlenfn(){
   			//   let a = [] 
   			//   for(var i=0,len=arr.length;i<len;i++){
   			//     a.push(arr[i])
   			//   }
   			// }
   			// clecTime(forlenfn, 'for len') 
   			
   			  
   			// // forEachfn 方法
   			function forEachfn(){
   			  let a = []
   			  arr.forEach(item=>{
   			    a.push[item]
   			  })
   			}
   			clecTime(forEachfn, 'forEach')  
   			
   			// for in 方法
   			function forinfn(){
   			  let a = []
   			  for(var i in arr){
   			    a.push(arr[i])
   			  }
   			}
   			clecTime(forinfn, 'forin')
   			
   			// for of 方法
   			function foroffn(){
   			  let a = []
   			  for(var i of arr){
   			    a.push(i)
   			  }
   			}
   			clecTime(foroffn, 'forof')