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

Zastosowanie metody .reduce() na tablicy

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
124 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 78 wizyt
pytanie zadane 1 lutego 2020 w JavaScript przez mb-dir Mądrala (6,710 p.)
0 głosów
2 odpowiedzi 200 wizyt
pytanie zadane 11 grudnia 2020 w JavaScript przez hiper007 Stary wyjadacz (11,270 p.)
0 głosów
1 odpowiedź 263 wizyt
pytanie zadane 13 października 2016 w C i C++ przez Evelek Nałogowiec (29,060 p.)

89,768 zapytań

138,374 odpowiedzi

309,455 komentarzy

59,679 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 1074p. - Argeento
  2. 1010p. - rucin93
  3. 1006p. - Michal Drewniak
  4. 1000p. - Łukasz Eckert
  5. 974p. - TheLukaszNs
  6. 949p. - JMazurkiewicz
  7. 946p. - adrian17
  8. 933p. - Jarosław Roszyk
  9. 889p. - nidomika
  10. 860p. - Mikbac
  11. 847p. - ssynowiec
  12. 799p. - Hubert Chęciński
  13. 772p. - Mawrok
  14. 768p. - overcq
  15. 764p. - Vinox
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...