Функции в массивах

Question

У меня возникают проблемы с получением значения объекта в моем массиве, когда значение определяется функцией, а не жестко закодировано. В этом примере я хочу либо выполнить итерацию по массиву, чтобы console.log значение моего объекта «stats» и не возвращать имеющуюся у меня функцию, ИЛИ добавить к существующей функции для каждого объекта в моем массиве в console.log значение и снова, а не сама функция.

Здесь моя функция возвращает значение в текстовом поле как значение объекта «stats» в моем массиве. Каждый раз, когда я пытаюсь, он либо возвращает саму функцию как значение, либо возвращает «ноль», либо возвращает только значение первого объекта в моем массиве.

Кто-нибудь может сказать мне, что мне не хватает?

Спасибо.

Вот мой (полный HTML) пример кода с «опциями», которые я пробовал.

let users = [{
    name: "bob",
    stats: function() {
      return document.getElementById('option1').value;
    },
    code: "A1"
  },
  {
    name: "john",
    stats: function() {
      return document.getElementById('option2').value;
    },
    code: "A2"
  },
  {
    name: "karen",
    stats: function() {
      return document.getElementById('option3').value;
    },
    code: "A1"
  }
]

/* Option 1 */
console.log('firstRun');
users.forEach((user) => console.log(user.stats));

/* Option 2 */
console.log('secondRun');
for (let user of users) {
  console.log(user.stats)
}

/* Option 3 */
console.log('thirdRun');
var myArray = users.length;
for (i = 0; i < myArray; i++) {
  console.log(myArray.stats)
}

<h2>Simple Object/Array Step Through</h2>

<input type="text" id="option1" value="box1">
<input type="text" id="option2" value="box2">
<input type="text" id="option3" value="box3">

Answer 1

Попробуйте это,

Вызов функции и исправление вашего варианта 3 l oop myArray фактически users.length переопределено.

let users = [{
    name: "bob",
    stats: () => document.getElementById('option1').value,
    code: "A1"
  },
  {
    name: "john",
    stats: () => document.getElementById('option2').value,
    code: "A2"
  },
  {
    name: "karen",
    stats: () => document.getElementById('option3').value,
    code: "A1"
  },
  {
    name: "steve",
    stats: () => document.getElementById('option4').value,
    code: "A5"
  }
]

/* Option 1 */
console.log('firstRun');
users.forEach(user => console.log(user.stats()));

/* Option 2 */
console.log('secondRun');
for (let user of users) {
  console.log(user.stats())
}

/* Option 3 */
console.log('thirdRun');
for (let i in users) {
  console.log(users[i].stats())
}

/* Option 4 */
console.log('forthRun');
for (let i = 0; i < users.length; i++) {
  console.log(users[i].stats())
}

<h2>Simple Object/Array Step Through</h2>

<input type="text" id="option1" value="box1">
<input type="text" id="option2" value="box2">
<input type="text" id="option3" value="box3">
<input type="text" id="option4" value="box4">

Кажется странным пробовать несколько способов l oop над массивом, поэтому я добавил for..in для непрерывности