有人可以解释forEach循环吗？

Question

好的，这就是我对forEach的了解。

一个forEach循环从数组中拉出，放置在其中的函数在数组中的每个元素上调用。我似乎无法理解这个概念。我仍在学习JS，已经一个月了，所以请耐心等待。我已经尝试过使用for循环，并且似乎可以正常工作，但我只是不知道如何将其合并为forEach

function CreateSuspectObjects (name) {
  return {
    name: name,
    color: name.split('')[1],
    speak() {
      console.log(`My name is ${name}`);
    }
  };
};

let suspects = ['Miss Scarlet', 'Colonel Mustard', 'Mr. White'];

let suspectsList = [];

// Using a for loop

for(let i = 0; i < suspects.length; i++){
    suspectsList.push(CreateSuspectsObjects(suspects[i]))
};

就像我说过的那样，我仍在学习JS，但并不真正了解forEach循环。我已经尝试了嫌疑人。forEach（CreateSuspectObjects），但这对我来说没有任何意义。

Answer 1

forEach循环只是简化传统for循环的一种方法。您为其传递了一个函数，该函数通常是for循环的{}内部的任何函数。但是，使用该功能时，您需要了解参数顺序：

item
index
array

这意味着如果您想要项目的索引而不是项目本身，则需要使用函数的第二个参数：

arr.forEach((item, index) => doSomething.with(index));

请注意，以上称为箭头功能，它是ES6的新功能。等效于：

arr.forEach(function(item, index) {
  doSomething.with(index);
});

Answer 2

使用Array.prototype.forEach()而不是for循环将您的当前代码转换为等效工作，只需进行最小的更改：

function CreateSuspectObjects (name) {
  return {
    name: name,
    color: name.split(' ')[1],
    speak() {
      console.log(`My name is ${name}`);
    }
  };
}

let suspects = ['Miss Scarlet', 'Colonel Mustard', 'Mr. White'];

let suspectsList = [];

// Using forEach()
suspects.forEach((name, i, suspects) => {
  // use name instead of suspects[i]
  suspectsList.push(CreateSuspectObjects(name))
});

console.log(suspectsList);

但是，在通过转换现有数组中的每个对象来创建新数组时，应改用Array.prototype.map()：

function CreateSuspectObjects (name) {
  return {
    name, // short-hand for name: name
    color: name.split(' ')[1],
    speak() {
      console.log(`My name is ${name}`);
    }
  };
}

const suspects = ['Miss Scarlet', 'Colonel Mustard', 'Mr. White'];

// Using map()
const suspectsList = suspects.map(name => {
  return CreateSuspectObjects(name);
});

console.log(suspectsList);

由于name => { return CreateSuspectObjects(name); }与CreateSuspectObjects完全一样，因此您可以进一步简化它，方法是将语句更改为

const suspectsList = suspects.map(CreateSuspectObjects);

---

array.forEach()与array.map()

suspects.forEach(CreateSuspectObjects);不起作用的原因是由于forEach()和map()之间的差异。 forEach()循环遍历suspects中的每个值，并执行为其副作用提供的功能。在我的第一个代码段中，副作用是suspectsList.push()，它为现有数组suspectsList添加了一个值。

但是，CreateSuspectObjects()没有任何副作用；它只是返回一个对象，forEach()将忽略该对象，因为未使用该函数的返回值。

suspects.map(CreateSuspectObjects);起作用的原因是因为map()创建了一个与suspects相同大小的数组，并遍历suspects中的每个值以执行为函数提供的功能其返回值。 map()使用该函数的返回值作为其创建的数组中每个值的初始化程序，然后将其返回。

Answer 3

forEach非常简单。它是任何数组的属性，调用它会导致为数组中的每个项目调用作为参数提供的函数。因此，对于您追求的是：

function CreateSuspectObjects (name) {
  return {
    name: name,
    color: name.split('')[1],
    speak() {
      console.log(`My name is ${name}`);
    }
  };
};

let suspects = ['Miss Scarlet', 'Colonel Mustard', 'Mr. White'];

let suspectsList = [];

suspects.forEach(s => {
    suspectsList.push(CreateSuspectsObjects(s))
};

Answer 4

您可以使用forEach这样替换for循环。

它将像i ++一样依次遍历suspects数组并依次引用该数组内的每个对象。在这里，我将它们分别称为suspect，以便于理解，然后像对待suspects[i]一样将其推入数组。

关于箭头运算符，如果您不知道它的工作原理，请参见here。

function CreateSuspectObjects (name) {
  return {
    name: name,
    color: name.split('')[1],
    speak() {
      console.log(`My name is ${name}`);
    }
  };
};

let suspects = ['Miss Scarlet', 'Colonel Mustard', 'Mr. White'];

let suspectsList = [];

suspects.forEach(suspect => suspectsList.push(CreateSuspectObjects(suspect)))
console.log(suspectsList)