Umiarkowanie proste ćwiczenie – piszemy własną metodę forEach, która działa identycznie jak ta wbudowana w język JavaScript. Przypiszemy ją sobie do prototypu tablic, dzięki czemu będzie dostępna „po kropce”, jak oryginalny forEach.
Napiszemy sobie własną funkcję forEach (teoretycznie jest to metoda tablic, nie pętla). Na początku jednak przypomnimy sobie, jak forEach działa, w najmniejszych detalach, bo aby odtworzyć jej działanie – musimy dobrze je rozumieć.
forEach – jeden argument, element
Jeżeli funkcja przekazana do forEach ma jeden argument, to jest nim zawsze element tablicy, każdy element, na którym funkcja zostanie wywołana:
<script>
const students = ["John", "Jane", "Bob"];
students.forEach((student) => {
console.log(student);
});
//John
//Jane
//Bob
</script>Tutaj ten argument nazwaliśmy sobie student i wywołaliśmy na nim console.log().
forEach – element, indeks
Callback przekazany do forEach może przyjąć dwa argumenty. Drugim będzie indeks danego elementu.
<script>
const students = ["John", "Jane", "Bob"];
students.forEach((student,idx) => {
console.log(student,idx);
});
//John 0
//Jane 1
//Bob 2
</script>Jak widać, drugi argument (nazwaliśmy go idx) to rzeczywiście indeks danego elementu. W każdym obrocie na elemencie (student) oraz indeksie (idx) wywoływany jest callback (nasza funkcja).
Czy to wszystko?
forEach – element, indeks, tablica
forEach pozwala na callback, który zawiera aż trzy argumenty. Trzecim będzie cała tablica, jeżeli go przekażemy.
<script>
const students = ["John", "Jane", "Bob"];
students.forEach((student,idx, arr) => {
console.log(student,idx);
console.log(arr);
});
//John 0
//['John', 'Jane', 'Bob']
//Jane 1
//['John', 'Jane', 'Bob']
//Bob 2
//['John', 'Jane', 'Bob']
</script>Do czego my to wykorzystamy – to już nasza sprawa. Natomiast możemy przekazać callback z trzema argumentami. Pierwszy to dany element, drugi to indeks elementu, trzeci to cała tablica. I na tych argumentach zawsze zostanie wywołany nasz callback.
Jeżeli nie potrzebujemy tablicy albo indeksu, chcemy tylko element – po prostu ignorujemy te argumenty. Natomiast mechanizm działania forEach jest taki – weź callback podany przez użytkownika i wywołuj go na każdym elemencie, jego indeksie i całej tablicy.
Własny forEach – piszemy i sprawdzamy
Oto nasza funkcja, którą przypiszemy sobie do prototypu Array, aby można ją było wykonywać na tablicy:
Array.prototype.myForEach = function(callback){
for (var i = 0; i < this.length; i++) {
callback(this[i], i, this);
}
}Ona przechodzi po każdym elemencie tablicy, przyjmując pewien callback i wywołując go, za każdym razem wrzucając do niego – w tej kolejności – aktualny element, indeks elementu, całą tablicę.
W przypadku prototypu Array – this odnosi się do tablicy.
Teraz możemy sprawdzić, czy to działa:
<script>
Array.prototype.myForEach = function(callback){
for (var i = 0; i < this.length; i++) {
callback(this[i], i, this);
}
}
const students = ["John", "Jane", "Bob"];
students.myForEach((el) => console.log(el));
//John
//Jane
//Bob
</script>Możemy też sprawdzić, jak działa indeks oraz tablica (opcjonalne argumenty):
<script>
Array.prototype.myForEach = function(callback){
for (var i = 0; i < this.length; i++) {
callback(this[i], i, this);
}
}
const students = ["John", "Jane", "Bob"];
students.myForEach((el, idx, arr) => console.log(el, idx, arr));
//John 0 ['John', 'Jane', 'Bob']
//Jane 1 ['John', 'Jane', 'Bob']
//Bob 2 ['John', 'Jane', 'Bob']
</script>I tym prostym sposobem napisaliśmy sobie własną pętlę forEach.
