JavaScript 常用遍历方法

本文主要是介绍JavaScript 常用遍历方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1 let list = [1, 2, 3, 4, 5, 6, 7, 8, , 10, 11]

1、for 循环

  for (let i = 0; i < list.length; i++) {
    if (list[i] === 5) {
      console.log(list[i]); // 5
      break
    }
    console.log(list[i]); // 1 2 3 4
  }

  for (let i = 0; i < list.length; i++) {
    if (list[i] === 5) {
      console.log(list[i]); // 5
      continue
    }
    console.log(list[i]); // 1 2 3 4 6 7 8 undefined 10 11
  }

2、for of 循环

1 for (const i of list) {
2     if (i === 5) {
3       console.log(i); // 5
4       break
5     }
6     console.log(i); // 1 2 3 4
7   }

3、forEach

1   list.forEach((item, index, arr) => {
2     console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, empty, 10, 11]
3     if (item === 5) {
4       console.log(item, '111'); // 5
5       return
6     }
7     console.log(item, '222'); // 1 2 3 4 6 7 8 10 11
8   })

/** 
   * 1、for、for of、forEach 三者都是由左到右遍历数组
   * 2、forEach 无法跳出循环；for 和 for ..of 可以使用 break 或者 continue 跳过或中断
   * 3、for ...of 直接访问的是实际元素。for 遍历数组索引，forEach 回调函数参数更丰富，元素、索引、原数组都可以获取
   * 4、for ...of 与 for 如果数组中存在空元素，同样会执行。
  */

let list_1 = [
    {name: 'aa', flag: false},
    {name: 'bb', flag: true},
    {name: 'cc', flag: false}
  ]

4、some

1   let flag_1 = list_1.some(item => item.flag)
2   console.log(flag_1); // true

5、every

1   let flag_2 = list_1.every(item => item.flag)
2   console.log(flag_2); // false

1 /**
2    * 1、some、every 二者都是用来做数组条件判断的，都是返回一个布尔值
3    * 2、二者都可以被中断
4    * 3、some 若某一元素满足条件，返回 true，循环中断；所有元素不满足条件，返回 false。
5    * 4、every 与 some 相反，若某一元素不满足条件，返回 false，循环中断；所有元素满足条件，返回 true。
6   */

  let list_2 = [
    {name: 'aa', text: 'box', id: 1},
    {name: 'bb', text: 'content', id: 2},
    {name: 'cc', text: 'box', id: 3}
  ]

6、filter

1   let arr1 = list_2.filter(item => {
2     return item.text === 'box'
3   })
4   console.log(arr1); // [{name: 'aa', text: 'box', id: 1}, {name: 'cc', text: 'box', id: 3}]

7、map

1   let arr2= list_2.map(item => {
2     return item.id < 2
3   })
4   console.log(arr2); // [true, false, false]

1 /**
2    * 1、filter、map 二者都是生成一个新数组，都不会改变原数组（不包括遍历对象数组是，在回调函数中操作元素对象）
3    * 2、二者都会跳过空元素
4    * 3、map 会将回调函数的返回值组成一个新数组，数组长度与原数组一致。
5    * 4、filter 会将符合回调函数条件的元素组成一个新数组，数组长度与原数组不同。
6    * 5、map 生成的新数组元素是可自定义。
7    * 6、filter 生成的新数组元素不可自定义，与对应原数组元素一致。
8   */

1   let list_3 = [
2     {name: 'aa', id: 1},
3     {name: 'bb', id: 2},
4     {name: 'cc', id: 3}
5   ]

8、find

1   let arr3 = list_3.find(item => item.id === 3)
2   console.log(arr3); // {name: "cc", id: 3}

9、findIndex

1  let index = list_3.findIndex(item => item.id === 2)
2  console.log(index); // 1

1 /**
2    * 1、find、findIndex 二者都是用来查找数组元素
3    * 2、find 方法返回数组中满足 callback 函数的第一个元素的值。如果不存在返回 undefined。
4    * 3、findIndex 它返回数组中找到的元素的索引，而不是其值，如果不存在返回 -1。
5   */

1 let list_4 = ['1', 2, 3, 4, 5, 3, 4, 5, 'a', 'a', 'a']

10、reduce

1  let arr = list_4.reduce((t, v) => {
  if (!t.includes(v)) {
3     return [...t, v]
4   } else {
5     return t
6   }
7  }, [])
8  console.log(arr, 'arr'); // ["1", 2, 3, 4, 5, "a"]

11、reduceRight

  let list_5 = [1, 5, 3, 4, 2, 6]

  let reverse = list_5.reduceRight((t, v) => {
    t.push(v)
    return t
  }, [])
  console.log(reverse); // [6, 2, 4, 3, 5, 1]

12、for in 遍历对象

 1   Object.prototype.fun = () => {}
 2   let obj = {1: 'a', 2: 'b', 3: 'c'}
 3 
 4   for (const i in obj) {
 5     console.log(i, ':', obj[i]); // 1 : a， 2 : b，3 : c，fun : () => {}
 6   }
 7 
 8   for (const i in obj) {
 9     if (Object.hasOwnProperty.call(obj, i)) {
10       console.log(i, '=', obj[i]); // 1 = a，2 = b，3 = c
11     }
12   }

这篇关于JavaScript 常用遍历方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！