Может кто-нибудь объяснить цикл 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.Я пробовал sustims.forEach (CreateSuspectObjects), но для меня это не имеет никакого смысла.

Answer 1

Переход вашего текущего кода для работы эквивалентно с использованием 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 2

Цикл

A forEach - это просто способ упростить традиционный цикл for. Вы передаете ему функцию, которая обычно используется внутри {} цикла for. Однако с помощью функции вам необходимо знать порядок параметров:

item
index
array

Это означает, что если вам нужен индекс вашего элемента, а не самого элемента, вам нужно использовать второй параметр функции:

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

Обратите внимание, что вышесказанное называется функция стрелки , и это новая функция ES6. Это эквивалент:

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

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, используя его следующим образом.

Он будет перебирать массив suspects и ссылаться на каждый его объект внутри массива последовательно, как это делает i ++.Здесь я называю каждый из них suspect, чтобы его было легче понять, а затем вы помещаете его в массив точно так же, как вы делаете с suspects[i].

Об операторе стрелки см. здесь. если вы не знаете, как это работает.

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)