详谈js for循环和数组遍历方法

前言

早就想写一篇博客来谈谈js中的循环和一些循环的方法，这次有时间来说说。

正文

一. for类循环

1. for — 传统的方式

    for (let index = 0; index < arr.length; index++) {
        console.log(arr[index])
    }

• 范围： 可遍历数组，不可遍历对象

• 迭代中的增减： 在遍历的过程中，如果对数组进行shift,unshift,pop,push，增加的元素会被遍历，删除的元素不会被遍历，但已迭代过的元素被删除（即使用shift）会跳过一个或一些元素

• 跳出循环的方式：

  • 跳出整个循环：break
  • 跳出当次循环：continue

• 结果：
  

2. for in

    for (let key in person) {
        console.log(key)
        console.log(person[key])
        person.java = 99
    }
    
    for (let index in arr) {
        console.log(index) //这里输出的index 是string类型，
        console.log(arr[index])
    }

• 范围： 可遍历数组和对象

• 迭代中的增减： 增加的元素不会被遍历，删除的元素不会被遍历，但已迭代过的元素被删除（即使用shift）会跳过一个或一些元素

• 说明：

  • 虽说可以遍历数组，但是for in 是为了遍历对象而设计的，不推荐使用其遍历数组
  • 可以遍历对象或者数组，迭代量是数组的下标（string类型的索引值）或者对象的key（属性名）

• 跳出循环的方式：

  • 跳出整个循环：break
  • 跳出当次循环：continue

• 结果：
  

3. for of

   for (let item of arr) {
        console.log(item)
    }

• 范围： 可遍历数组，不能遍历对象

• 迭代中的增减： 增加的元素会被遍历，删除的元素不会被遍历，但已迭代过的元素被删除（即使用shift）会跳过一个或一些元素

• 说明：

  • 可以很方便的对数组进行遍历操作，但如果要用到索引值的话,就不要用这个。

• 跳出循环的方式：

  • 跳出整个循环：break
  • 跳出当次循环：continue

• 结果：
  

4. jQuery.each()

    $.each(person, (key, value) => {
        console.log(key, value)
    })

    $.each(arr, (index, value) => {
        console.log(index, value)
    })

• 范围： 可遍历数组和对象

• 迭代中的增减： 增加的元素不会被遍历，删除的元素不会被遍历，但已迭代过的元素被删除（即使用shift）会跳过一个或一些元素

• 说明：

  • 注意each方法的回调函数的参数顺序是键，值。

• 跳出循环的方式：

  • 跳出整个循环：return false
  • 跳出当次循环：return true或者return或者return 其他量

• 结果：
  

5. forEach

    arr.forEach((item, index, iterable) => {
        console.log(item, index, iterable)
    })

• 范围： 可遍历数组，不可遍历对象

• 迭代中的增减： 增加的元素不会被遍历，删除的元素不会被遍历，但已迭代过的元素被删除（即使用shift）会跳过一个或一些元素

• 说明：

  • 索引值是number类型，回调函数的三个参数都是可选的，按顺序是值，索引号，数组本身
  • 还可增加一个参数，回调函数中this会指向这个参数
  • 如果要跳出整个循环，不要使用它

• 跳出循环的方式：

  • 跳出整个循环：抛出异常
  • 跳出当次循环：任何的return都只会跳出当次循环

• 结果：
  

二. 数组遍历方法

1. filter()

    let count = 0
    let newArr = arr.filter(item => {
        count++
        return item < 3
    })
    console.log(newArr, count)

• 返回值类型： 数组
• 跳出循环时机： 遍历整个数组后
• 说明：
  • 返回满足条件的项组成的数组，如果没有满足条件的项，返回空数组
• 结果：
  

2. map()

    let count = 0
    let newArr = arr.map(item => {
        count++
        return item * 10
    })

    console.log(newArr, count)

• 返回值类型： 数组
• 跳出循环时机： 遍历整个数组后
• 说明：
  • 对数组的每一项进行处理，返回一个新的数组
• 结果：
  

3. some()

    let count = 0
    let flag = arr.some(item => {
        count++
        return item > 3
    })
    console.log(flag, count)

• 返回值类型： 布尔值
• 跳出循环时机： 只要有满足条件的项则立即结束循环
• 说明：
  • 返回值true/false，只要有满足条件的项则立即结束循环，返回true，否则返回false
• 结果：
  

4. every()

    let count = 0
    let flag = arr.every(item => {
        count++
        return item <= 5
    })
    console.log(flag, count)

• 返回值类型： 布尔值
• 跳出循环时机： 遍历整个数组后
• 说明：
  • 返回值true/false，只有当所有的项都满足条件时返回true，否则返回false，一定会循环完整个数组
• 结果：
  

4. find()

    let count = 0
    let item = arr.find(item => {
        count++
        return item === 3
    })
    console.log(item, count)

• 返回值类型： 数组中的项/undfined
• 跳出循环时机： 循环到第一个满足条件的项
• 说明：
  • 如果没有满足条件的项，返回undefined
• 结果：
  

5. findIndex()

与find()用法一直，只不过返回的是number类型的索引值，没有满足条件的项时，返回-1

补充

• 跳出for循环可以利用函数的return (2021/2/26)

function isSuperset(set, subset) {
    for (let elem of subset) {
        if (!set.has(elem)) {
            return false;
        }
    }
    return true;
}

结语

码字不易，如果对你有帮助的话，请点一个赞吧