Javascript for/forEach 通过单选按钮

Question

我有一个关于如何 for 循环和 forEach 循环工作的问题。我有 3 个代码示例，其中 2 个可以工作，但在 forEach 循环中返回不起作用，为什么？

1. 作品

   const radioButtons = document.getElementsByName("option");
   
   for (let i = 0; i < radioButtons.length; i++) {
       if (radioButtons[i].checked) {
           return radioButtons[i];
       }
   }
   

2. 作品

   const radioButtons = document.getElementsByName("option");
   let selectedRadioButton;
   
   radioButtons.forEach(function(button) {
       if (button.checked) {
           selectedRadioButton = button;
       }
   });
   return selectedRadioButton;
   

3. 不起作用 - 在 forEach 中返回

   const radioButtons = document.getElementsByName("option");
   
   radioButtons.forEach(function(button) {
       if (button.checked) {
           return button;
       }
   });
   

Answer 1

这是因为Array.prototype.forEach不支持中断行为。该函数的目的是无条件访问数组中的每个元素。您想要的方法是Array.prototype.filter或者在较新的浏览器中，Array.prototype.find

const radioButtons = document.getElementsByName("option");

const button = radioButtons.filter(function(button) {
    return button.checked;
})[0];

在现代浏览器中:

const radioButtons = document.getElementsByName("option");

const button = radioButtons.find(button => button.checked);

值得注意的是，正如 D. Simon 在他/她的回答中指出的那样，回调中的 return 语句会导致回调本身返回，而不是迭代方法返回。 JavaScript 不支持所谓的非本地返回。

以下是一些实例:

(function() {
  'use strict';

  var values = [1, 2, 3, 4, 5, 6];

  var three = values.filter(function(value) {
    return value === 3;
  })[0];

  console.info(three);
}());

(function() {
  'use strict';

  const values = [1, 2, 3, 4, 5, 6];

  const three = values.find(value => value === 3);

  console.info(three);
}());