Question

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

作品

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

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

作品

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

radioButtons.forEach(function(button) {
    if (button.checked) {
        selectedRadioButton = button;
    }
});
return selectedRadioButton;

不起作用 - 返回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不支持所谓的非本地返回。

以下是一些实例：

＆＃13;

(function() {
  'use strict';

  var values = [1, 2, 3, 4, 5, 6];

  var three = values.filter(function(value) {
    return value === 3;
  })[0];

  console.info(three);
}());

＆＃13;

(function() {
  'use strict';

  const values = [1, 2, 3, 4, 5, 6];

  const three = values.find(value => value === 3);

  console.info(three);
}());

＆＃13;

Answer 2

第三个示例中的return语句将值返回到forEach语句中的anonymus函数。

Javascript for / forEach通过单选按钮

2 个答案: