Jak pisać oraz zrozumieć funkcje w Javascript?

0

Witam, mam pytanie odnośnie funkcji w Javascript. Chciałbym zwrócić funkcję przez return i wykorzystać tablicę w innej funkcji sprawdzającej ale nie potrafię zwrócić tablicę... Pozyskiwanie danych do tablicy :

var array = [];
$('#xxx').children('div.xxx').each(function(){
  array.push($(this).text());
});
console.log(array);

wyświetla pięknie liczby:

["9", "1", "13", "12", "4", "11", "3", "5", "5", "10"] //przykład

Gdy próbuję napisać funkcję to zamiast tego zwraca mi div'y :(, a ja potrzebuje konkretnej wartości tych div' ów tak jak jest w przykładzie.

>>> function sprawdz (){return $('#xxx').children('div.xxx').each(function(){xxx.push($(this).text())});} console.log(xxx);
["9", "0", "5", "3", "4", "1", "7", "10", "0", "11"]
undefined
>>> function sprawdz (){return $('#xxx').children('div.xxx').each(function(){xxx.push($(this).text())});} console.log(sprawdz());
[div.xxx, div.xxx, div.xxx, div.xxx, div.xxx, div.xxx, div.xxx, div.xxx, div.xxx, div.xxx]

Zupełnie nie rozumiem już tego...

0
function sprawdz (){
	var array = [];
	$('#xxx').children('div.xxx').each(function(){
		array.push($(this).text())});
	}) 
        return array;
}
console.log(sprawdz());
0

W nawiasach się chyba pomyliłeś :P

function sprawdz (){
    var array = [];
    $('#xxx').children('div.xxx').each(function(){
        array.push($(this).text())});
        return array;
    }
console.log(sprawdz());

Takie coś niby mi działa ;d

0

Tak, napisałem na szybko i nie sprawdziłem, moja wina.
Swoją drogą zamiast each możesz użyć map:

function sprawdz (){
    return $('#xxx').children('div.xxx').map(function(){
       return $(this).text();
    }) 
}
console.log(sprawdz());
0

Możesz mi napisać różnicę między tym, a tym?

0

$.map odpala funkcje na każdym elemencie z listy, a potem mapuje wyniki tworząc nową listę.
$.each po prostu odpala funkcje na każdym elemencie listy.

0

@ Maciej Cąderek - 1900 stron o JavaScript jest obok mnie -.- to jest mój drugi dzień... nie wszystko idzie zapamiętać... chciałbym się czegoś nauczyć też i dlatego zadaje pytania..., Dzięki Kaczorek, jest możliwość zadawania Tobie pytań czy nie bardzo ??

0

@Skyper
W takim razie proponuję zacząć od podstaw a nie od jQuery.

A jak się już na jQ uparłeś to Ci 1900 stron nie jest potrzebne:
https://api.jquery.com/each/
https://api.jquery.com/map/

Tip: W przykładzie @Wybitny Kaczor brakuje .get() na końcu.

W skrócie:
Metoda .each() - zwraca obiekt jQuery na którym została wykonana, nie zmienia go (tablicę tworzysz za pomocą efektów ubocznych, czyli operując na zmiennych spoza metody).
Metoda .map() przekształca obiekt jQuery w inny obiekt jQuery (podejrzyj sobie w konsoli JS jak on wygląda przed i po), metoda .get() zamienia ten przekształcony obiekt na zwykła tablicę.

0

@Skyper zapomnij, że istnieje takie coś jak jQuery do czasu opanowania podstaw javascript'u, bo sobie zrobisz kuku. Nie wiem co to za 1900 stron, ale to: https://github.com/getify/You-Dont-Know-JS Ci wystarczy.

Wersja łatwiejsza:

function getData() {
  var parent = document.querySelector('#xxx'); // "odpowiednik" $('#xxx')
  var children = parent.querySelectorAll('div.xxxl'); // "odpowiednik" $('#xxx').children('div.xxx')

  var arr = [];
  for(var key in children) if(children.hasOwnProperty(key)) {
    arr.push(children[key].innerHTML);
  }
  
  return arr;
}

var data = getData();
console.log(data);

Wersja trochę trudniejsza, ale lepsza:

function getData() {
  var parent = document.querySelector('#xxx'); 
  var children = parent.querySelectorAll('div.xxxl'); 
  
  // children to array-like object, dlatego musimy użyć takiej konstrukcji
  return Array.prototype.map.call(children, function(element) {
    return element.innerHTML;
  });
}

var data = getData();
console.log(data);

Gwoli ścisłości: jQuery pozwala na chainowanie, dlatego wywołanie metody each zwraca obiekt, na którym metoda została wywołana, który w Twoim przypadku jest tymi divami.

Btw. drugi dzień i już jQuery? To chyba rekord :D

0

1900 stron mam JS - Query to dodatek w książkach...

0

do zrozumienia each/forEach czy map lepiej pobawić się tablicami w czystym JavaScripcie, np.:

var arr = ['kotek','piesek','małpka'];
console.log(arr.map(function (item, index) { return index + ".  " + item  })); // ["0.  kotek", "1.  piesek", "2.  małpka"]

zamiast function można użyć funkcji strzałkowej z ES6:

arr.map((item, index) => index + ".  " + item );

przy czym map nie zmienia tablicy:

console.log(arr); // to samo co na poczatku

dalej można się pobawić z forEach i reduce czy filter (natywne metody tablic z ES5, podobnie jak map).

natomiast funkcje jQuery (map, each, filter) robią coś podobnego, tylko na kolekcjach obiektów DOM (jednak z musu działanie jQuery jest bardziej skomplikowane niż robienie działań na prostych tablicach)

0

Robię to na szybko bo potrzebuję coś napisać, ale powiem że zabawa w JS/jQuery jest ciekawa... od razu nie zrozumiem wszystkiego ale mam nadzieję że dzięki pytaniom - nawet tych dla was głupich zrozumiem trochę...

0

To jQuery nie wyparły już inne Angulary? Nie lepiej pisać w czystym ES6 plus Node.js?

1 użytkowników online, w tym zalogowanych: 0, gości: 1