原生js中的forEach方法实现跳出循环

小咪咪 2021-07-25 14:37 638阅读 0赞

最近在做公司的app时，遇到了一个问题，很基础的问题。

有个列表，我需要遍历找到符合的第一个属性值，然后对这个属性进行操作。

下面用最简单的方式进行演示：数组和对象的处理

var arr = ["one", "two", "one", "four", "five"];
    arr.forEach((e, index) => { 
      if (e == "one") { 
        console.log(0, index);
        return false;
      }
    });

上面的arr数组中，第一个参数和第三个参数都是“one”，都符合`e=='one'`的判断条件，而我只希望返回第一个。

看下上面forEach的执行结果：  
![在这里插入图片描述][20210417151956330.png]  
`forEach`循环中，并没有因为 `return false`跳出循环，而是继续执行了，并且控制台也没有报错。

## forEach跳出循环的解决方法一 ##

可以用for循环来处理：for循环来处理数组，for in来处理对象

#### 数组的for循环处理 ####

var arr = ["one", "two", "one", "four", "five"];
    for (var i = 0; i < arr.length; i++) { 
      if (arr[i] == "one") { 
        console.log(111, i);
        break;
      }
    }

#### 对象的for in循环处理 ####

for循环中，可以用`break`来跳出循环。执行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

## forEach跳出循环的解决方法二 ##

可以用jq中的each来实现，同时适用于数组和对象

#### jq的each处理数组 ####

上面代码的执行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

#### jq的each处理对象 ####

上面代码的执行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

## 数组的find方法也可以实现 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]

[20210417151956330.png]: /images/20210725/4851d5d2d2504a42aa9483dc63afccac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/7173698a71714ade980dab8766df44b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/7c693d844f624452855f78294ba0fb68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/1627aeff8c43496c9526af100ee44060.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/a6ae0ea86ea2488189051b2da30d420a.png