js数组常用遍历方法总结

js遍历数组方法总结

方便我的同事葬爱家族龙少上班查阅特写此文章

1. forEach 无返回值, 会改变原数组, break和return不会终止遍历

  // item 数组元素 index 索引 arr 当前遍历的数组
  let arr = ["2112","127","203","99","564"]
  arr.forEach(item,index,arr) {
  	   arr[index] = arr[index] + 1
  }
  console.log(arr)  
  // 输出：["2113","128","204","100","565"]

2. filter 过滤数组, return true将元素返回给新数组, 不会改变原数组

  let arr = ["2112","127","203","99","564"]
  let newArr = arr.filter( item => item > 500)
  console.log(newArr)  
  // 输出：["2112","564"]

3. find查找元素,return true终止迭代并返回当前元素, 不会改变原数组

  let arr = ["2112","127","203","99","564"]
  let num = arr.find( item => item < 200)
  console.log(num)	
  // 输出：127

4. findIndex查找索引, return true终止迭代并返回当前元素下标，不会改变原数组

  let arr = ["2112","127","203","99","564"]
  let index = arr.findIndex( item => item < 200)
  console.log(index) 
  // 输出：1

5. some 只要有一个满足条件则返回布尔值true, 并终止迭代

  let arr = ["2112","127","203","99","564"]
  let bool = arr.some( item => item > 2000)
  console.log(bool) 
  // 输出：true

6. every 只要有一个不满足条件则返回布尔值false, 并终止迭代

  let arr = ["2112","127","203","99","564"]
  let bool = arr.every( item => item < 500 )
  console.log(bool)
  // 输出：false

7. reduce 对数组中的内容汇总, 不会改变原数组

  let arr = [
     {
        name: "穿过的袜子",
     	price: 145.98,
     	num: 10
     },
      {
        name: "玛莎拉蒂",
     	price: 27.50,
     	num: 5
     },
      {
        name: "蜜雪冰城柠檬水",
     	price: 99.00,
     	num: 3
     },
   ]
  // 第一次循环adder默认为reduce方法的第二个参数0
  // 第二次循环adder为第一次循环return的返回值 1459.8
  // 第三次循环adder为第二次循环return的返回值 1597.3
  // 第三次循环结束最终返回总价为：1894.3
  // return 不返回值, 下一次循环的adder则为undefined
  let total = arr.reduce((adder, item, index, arr) => {
	 return adder + item.price * item.num
  },0)
  console.log(total) // 1894.3

8. map 对数组中个每个元素都进行修改统一操作

  let newArr = arr.map( (item, index)=> {
      return {
        name: "哈哈" + index,
        price: 100
      }
    })
 console.log(newArr);
 [{name: "哈哈0", price: 100}, {name: "哈哈1", price: 100}, {name: "哈哈2", price: 100}]

9. for of 循环 v为元素 arr为遍历数组

 for(let v of newArr) {
	break 		   // 可以结束循环
 	console.log(v) // 数组元素 {name: "哈哈0", price: 100}
 } 

总结：有返回值的数组方法，一般情况下都不会影响原数组