调试 forEach 循环以了解其工作原理答案

【问题标题】：Debugging a forEach loop to understand how it works调试 forEach 循环以了解其工作原理
【发布时间】：2019-09-23 10:08:38
【问题描述】：

我希望您能在以下简单练习中提供帮助。我正在学习 forEach 但我不确定错误在哪里。尝试了多种方式解决它，但仍然出现错误。

我的目标是遍历数组电话簿并显示在翻页对应的名字和号码。

示例：如果我搜索“Fede”，我应该得到结果“Fede1234”

var phoneBook = [{
  name: "Fede",
  number: "1234"
}, {
  name: "Marco",
  number: "5678"
}]

phoneBook.forEach(search(name))

function search(name) {
  if (name === phoneBook.name) {
    document.write(phoneBook.name + phoneBook.number)
  }
}

【问题讨论】：

错误是什么？
forEach 的第一个参数应该是一个函数，你使用的是search 的返回值，它不是一个函数。
另外，似乎没有任何name 变量。
用phoneBook.forEach(search)替换phoneBook.forEach(search(name))

标签： javascript foreach iteration

【解决方案1】：

这里发生了一些事情。在这一行：phoneBook.forEach(search(name)) 变量 name 未定义。如果要传入每个对象，则该行应为：

phoneBook.forEach(search)

这会自动将每个对象传递给搜索函数。

搜索功能本身也有一些问题：

function search(name) {
  if (name === phoneBook.name) {
      document.write(phoneBook.name + phoneBook.number)
  }
}

在这种情况下，name 是整个对象。此外，由于phonebook 是数组，调用phonebook.name 不会返回任何内容。

试试这个：

var phoneBook = [{name: "Fede" , number: "1234"}, {name: "Marco" , number: "5678"}]
var name = "Fede";
phoneBook.forEach(search)

function search(object) {
  if (name === object.name) {
  document.write(object.name + object.number)
  }
}

现在，name 已定义，搜索功能正在应用于电话簿中的每个对象。

【讨论】：

【解决方案2】：

var phoneBook = [{name: "Fede" , number: "1234"}, {name: "Marco" , number: "5678"}]
phoneBook.forEach(search);

function search(name) {
  if (name === "???") {
    document.write(phoneBook.name + phoneBook.number)
  }
}

【讨论】：

知道了。谢谢:)

【解决方案3】：

简介

要学习forEach method，了解语法：

arr.forEach(function callback(currentValue [, index [, array]]) {
    //your iterator
}[, thisArg]);

如你所见，回调函数还有两个参数：除了值之外，还有该值的索引和数组本身。 forEach 本身还有第二个参数，它可以设置上下文（在迭代对象中的某些内容时很有用）。

1 级

如果要使用 forEach 搜索一个值，搜索函数必须返回回调函数（我们称这个构造为closure）：

phoneBook.forEach(search("Fede"))

function search(name) {
  return function(value, position) {
    if (name === value.name) {
      document.write(value.name + value.number);
      document.write(" found at position "+position);
    }
  }
}

2 级

或者您可以（ab）使用 thisArg forEach 参数：

phoneBook.forEach(search,"Fede")

function search(value) {
  if (this == value.name) { // Fede was passed to this
    document.write(value.name + value.number);
  }
}

注意== 运算符而不是===：Fede 作为对象字符串传递，但 value.name 在这里只是字符串文字（不同类型）。

但是，为此，您应该使用find method，其中回调接受相同的参数：

function search(value) {
  return this == value.name;
}
var fede = phoneBook.find(search,"Fede");

if(fede) document.write(fede.name + fede.number);

3 级

在学习的同时，对于这么简单的单行函数，arrow functions 更方便。它们有点不同，例如，上下文不能通过 find 或 forEach 方法传递。但是，您可以进一步将搜索简化为单行：

var fede = phoneBook.find(value => "Fede" === value.name);

【讨论】：