• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zastosowanie metody .reduce() na tablicy

42 Warsaw Coding Academy
0 głosów
246 wizyt
pytanie zadane 23 kwietnia 2020 w JavaScript przez maslokeeper01 Użytkownik (620 p.)

Witam,

mam oto sobie dwie funkcje wyższego rzędu wewnątrz funkcji reduce() oraz forEach():

et studentsList = [new Student('Maya', 200, 'West'),
    new Student('Thomas', 150, 'West'),
    new Student('Graham', 175, 'East'),
    new Student('Taylor', 160, 'East'),
    new Student('Phoebe', 190, 'West'),
    new Student('Nathan', 190, 'West')];

let studentsPoints = studentsList.reduce((arr, currentObj) => arr.concat(currentObj.points), []); //z concat() - [200, 150, 175, 160, 190, 190]
                                    //z push() - TypeError

// -------------------------------------------------

let posts = [
    {title: 'Post One', content: 'Why JavaScript?'},
    {title: 'Post Two', content: 'JavaScript for beginners'},
    {title: 'Post Three', content: 'First project in JavaScript'},
    {title: 'Post Four', content: 'Async JavaScript'},
];

setTimeout(() => {
    let output = [];
    posts.forEach(post => {
        output.push(post.title);
    })
    console.log(output); //z push() - ["Post One", "Post Two", "Post Three", "Post Four"]
}, 2000);                //z concat() - []

Jak widać, obie funkcje wyższego rzędu mają zwrócić tablicę z konkretnymi właściwościami obiektów znajdujących się wewnątrz tablic o scopie globalnym. Problem w tym, że z jakiegoś powodu funkcja wewnątrz reduce() dokleja elementy do tablicy studentsPoints tylko z użyciem metody concat() - przy zastosowaniu zwykłego push() konsola zwraca TypeError. Odwrotnie jest w przypadku drugiego przykładu - zastosowanie wewnątrz funkcji forEach() metody concat() zwraca pustą tablicę, a użycie push() działa poprawnie. 

Dlaczego działa to w taki sposób i czy ktoś może polecić przystępne źródła wiedzy o funkcjach high order?

Z góry dziękuję.

1 odpowiedź

+1 głos
odpowiedź 23 kwietnia 2020 przez DawidK Nałogowiec (37,910 p.)
wybrane 23 kwietnia 2020 przez maslokeeper01
 
Najlepsza

push() - modyfikuje orginalną tablice

concat() - nie modyfikuje tablicy

Jeżeli chcesz, żeby zadziałało Ci z concat zmień na:

            posts.forEach(post => {
                output = output.concat(post.title);
            })

 

komentarz 23 kwietnia 2020 przez maslokeeper01 Użytkownik (620 p.)
Chyba rozumiem. Ale dlaczego trzeba zastosować te dwie różne metody, skoro w obu przypadkach tworzymy nową tablicę na podobnej zasadzie?
komentarz 23 kwietnia 2020 przez DawidK Nałogowiec (37,910 p.)

Zasada tworzenia jest troche inna push() - oprocz tego, że modyfikuje wartość tablicy zwraca jej nową długość co jest dosyć przydatne. concat() nic nie zwraca więc można np wyświetlić lub jednorazowo użyć jakiegoś połączenia tablic i nie wartwić się, że zostaną zmienione.

kilka przykładów:

 ////////// push //////////
        const array = ['żubr','bóbr','k..','loś','kuna','ryjówka'];
        console.log(array.push('zajac')); // ilość elementów po dodaniu (7)
        console.log(array); // wypisze wszystkie elementy

        const arrayPart1 =  ['żubr','bóbr','k..','loś'];
        const arrayPart2 =  ['kuna','ryjówka','zając'];

        ///////// concat //////////
        console.log(arrayPart1.concat(arrayPart2)); // wypisze wszystkie elementy
        console.log(arrayPart1); // nie zmieni pierwszej tablicy
        console.log(arrayPart2); // nie zmieni drugiej tablicy

        const fullArray = arrayPart1.concat(arrayPart2); // nowa tablica
        console.log(fullArray); // mozna ją póżniej gdzieś użyć
        console.log(arrayPart1); // po połączeniu można też użyć 1 części tablicy
        console.log(arrayPart1); // po poączeniumożna też użyć 2 części tablicy 


        ////////// for i push //////////
        const arrayPart3 = ['żubr','bóbr','k..','loś'];

        const fullArray2 =[];
        arrayPart3.forEach(element => {
            console.log(`Aktualnie elementów po dodaniu ${fullArray2.push(element)}`)
        })

        console.log(fullArray2) // wyswietli wszystkie dodane elementy

 

komentarz 23 kwietnia 2020 przez maslokeeper01 Użytkownik (620 p.)
Czy poprawnym jest powiedzieć, że stworzony z użyciem concat() element staje się rzeczywistym literałem zmiennej, do której tenże element przypisujemy?
komentarz 23 kwietnia 2020 przez DawidK Nałogowiec (37,910 p.)
element zwracany przez concat() - żle napisałem, że nic nie zwraca w poprzednim komentarzu chodziło mi o to, że nie modyfikuje odpowieniej wartości - to literał tablicowy, więc chyba można tak powiedzieć, ale lepiej nich ktoś to potwierdzi - mogę się mylić i to bardziej "na czuja".
komentarz 23 kwietnia 2020 przez maslokeeper01 Użytkownik (620 p.)

Dobra, już rozumiem, pięknie dziękuję laugh

Podobne pytania

0 głosów
2 odpowiedzi 134 wizyt
pytanie zadane 1 lutego 2020 w JavaScript przez mb-dir Mądrala (6,710 p.)
0 głosów
2 odpowiedzi 843 wizyt
pytanie zadane 11 grudnia 2020 w JavaScript przez hiper007 Stary wyjadacz (11,270 p.)
0 głosów
1 odpowiedź 1,201 wizyt
pytanie zadane 13 października 2016 w C i C++ przez Evelek Nałogowiec (28,960 p.)

93,385 zapytań

142,384 odpowiedzi

322,540 komentarzy

62,746 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
...