Массивы Javascript и .forEach Loop Аргументы

Question

В функции listTodos() я не могу понять, как/почему аргумент-заполнитель i для цикла todos.forEach выплескивает номера индексов массива. Для меня, кажется, что оба placeholder/arguments будут делать то же самое, поскольку я не могу понять, как они указаны друг от друга.

Итак, я не понимаю, почему консоль не регистрировалась: "Buy New Turtle: Buy New Turtle", а не: "0: Buy New Turtle".

todos.forEach(function(todo, i) { 
 
console.log(i + ": " + todo);

Здесь весь "Todo List" JS код:

var todos = ["Buy New Turtle"]; 
 

 
var input = prompt("What would you like to do?"); 
 

 
while(input !== "quit") { 
 
    if(input === "list") { 
 
    \t listTodos(); 
 
    } 
 
    else if(input === "new") { 
 
\t addTodo(); 
 
    } 
 
    else if(input === "delete") { 
 
    \t deleteTodo(); 
 
    } 
 
    input = prompt("What would you like to do?"); 
 
} 
 
console.log("OK YOU QUIT THE APP"); 
 

 
function listTodos() { 
 
\t console.log("**********") 
 
    \t todos.forEach(function(todo, i) { 
 
\t console.log(i + ": " + todo); 
 
    }); 
 
    console.log("**********"); 
 
} 
 

 
function addTodo() { 
 
\t var newTodo = prompt("Enter new todo"); 
 
\t todos.push(newTodo); 
 
\t console.log("Added Todo"); 
 
} 
 

 
function deleteTodo() { 
 
\t var index = prompt("Enter Index of Todo to Delete"); 
 
    \t todos.splice(index, 1); 
 
    \t console.log("Deleted Todo"); 
 
}

Итак ... Могу ли я сделать какой-то смысл здесь? Может кто-нибудь прояснить это для меня? Благодаря!

Answer 1

Вы передаете функцию в качестве аргумента forEach. Затем forEach выполняет итерацию вашего массива в цикле и вызывает эту функцию, передавая определенные аргументы этой функции. Аргументы, передаваемые всегда будет ...

1. текущий элемент в цикле
2. текущий индекс цикла
3. исходного массива.

---

Чтобы более четко понять, реализовать свой собственный функционал итератора:

Array.prototype.mySuperForEach = function(callback) { 
 
    for (var i = 0; i < this.length; i++) { 
 
    callback(this[i], i, this) // <---This is your function being invoked 
 
    } 
 
}; 
 

 
["foo", "bar", "baz"].mySuperForEach(function(item, i, arr) { 
 
    console.log("%s: %d of %d", item, i, arr.length) 
 
})

Это не полностью соответствующая реализация .forEach(), но она дает основную идею о том, что происходит. Обратите внимание, что внутри цикла for обратный вызов вызывается и передается аргументы, которые вы наблюдали в своем исходном примере.

---

Обратите внимание, что в то время как я протянул Array.prototype, вы не должны делать это без полностью понимания их разветвления.