Tablice i łańcuchy w JavaScript. Podstawy języka część 5 – podsumowanie.

JavaScript

Poziom średnio-zaawansowany

Po omówieniu absolutnych podstaw, przyszła pora na tablice i łańcuchy w JavaScript. Są to zagadnienia szczególnie ważne, a mając je opanowane, możemy wejść na wyższy poziom.

Tablice i łańcuchy w JavaScript

Najpierw omówimy ciągi znaków (łańcuchy tekstowe) i podstawowe sposoby ich przetwarzania. Następnie przejdziemy do tablic.

Nie wiem dlaczego, ale praca ze stringami (wciąż mówię o ciągach znaków) i tablicami, to jedna z moich ulubionych czynności przy pisaniu kodu. Ale do rzeczy.

Tekst obsługiwany jest przez klasę String. Klasa ta umożliwia tworzenie obiektów zawierających napisy, daje też mnóstwo metod do operowania na tych napisach:

anchorreplace
bigsearch
blinkslice
boldsmall
charAtsplit
charCodeAtstrike
concatsub
fixedsubstr
fontcolorsubstring
fontsizesup
indexOftoLowerCase
italicstoSource
lastIndexOftoUpperCase
linktoString
matchvalueOf

Przykład – użycie obiektu klasy String:

var napis = new String("JavaScript wita!");
document.writeln("Napis: " + napis.italics() + " ma " 
    + napis.length + "znaków");

Za pomocą operatora kropki wywołujemy metody z klasy String powiązane z naszym obiektem – łańcuchem. Operator + służy do łączenia łańcuchów, oczywiście w kontekście obiektów klasy String, dla liczb operator + oznacza operację sumy.

Przykład – rozbicie łańcucha według separatora:

var tab = "ab-cd-ef-gh".split("-");
for (indeks in tab) {
    document.write(tab[indeks] + "<br />");
}

Dla przykładu taki efekt w PHP możemy uzyskać funkcją explode().

Przykład – operacje na łańcuchu (metoda anchor):

var str = new String("abc");
// umieszcza w str znaczniku <a> w postaci:
// <a name="moj">abc</a>
var str = "abc".anchor("moj");

Metody przetwarzające ciągi znaków

Poniżej opis często stosowanych metod przetwarzających łańcuchy.

charAt – zwraca znak ciągu znajdujący się pod indeksem wskazanym przez argument:

var c = "abc".charAt(1);

charCodeAt – zwraca kod znaku znajdującego się pod podanym indeksem:

var code = "abc".charCodeAt(1);

concat – konkatenacja (łączenie ciągów):

var str1 = "A"; var str2 = "B";
var str3 = "123".concat(str1, str2); // wynik: 123AB

fromCharCode – zwraca ciąg znaków, których kody zostały przekazane w postaci argumentów:

var str = String.fromCharCode(65, 66, 67);

– indexOf – zwraca indeks wystąpienia znaku lub podciągu, jeżeli podany zostanie drugi argument, przeszukiwanie ciągu string rozpocznie się od znaku pod jego indeksem:

var indeks = "abcabcabc".indexOf("bc");

lastIndexOf – działa podobnie do indexOf, z tą różnicą, że ciąg string przeszukiwany jest od końca:

var indeks = "abcabcabc".lastIndexOf("bc"); //wynik 7

replace – zwraca ciąg, w którym podciągi opisane przez wyrażenie regularne wyrReg zostały zamienione na ciąg znaków reprezentowany przez tekst:

var str = "Ala ma kota. Ala zna także JavaScript.";
var str2 = str.replace(/Ala/gi, "Ola");

Ciąg tekst może zawierać następujące sekwencje znaków specjalnych:
$$ – znak $
$& – podciąg pasujący do wyrażenia wyrReg
$`- podciąg znajdujący się przed ciągiem $&
$’ – podciąg znajdujący się za ciągiem $&
$n – lub $nn n-ty podciąg wyrażenia wyrReg (jak w przykładzie poniżej)

Przykład – $n:

var str = "Ala ma kota. Ala zna także JavaScript.";
var str2 = str.replace(/(A)(l)(a)/gi, "$3$2$1");

search – sprawdza, czy ciąg opisany przez wyrażenie regularne wyrReg występuje w ciągu string:

mojString.search(wyrReg);

slice – zwraca podciąg ciągu string rozpoczynający się od indeksu wskazywanego przez start i kończący się wraz z końcem ciągu string (lub indeksie podanym jako 2 parametr):

var str1 = "abcdefg".slice(3);
var str2 = "abcdefg".slice(3, 5);

valueOf – zwraca podstawową wartość przechowywaną przez obiekt. W przypadku obiektu typu string, działanie tej metody jest równoważne z wywołaniem string.toString() i zwraca zawarty w obiekcie ciąg znaków.

Więcej o wyrażeniach regularnych napiszemy w osobnym, obszerniejszym artykule.

Tablice w JavaScript

Do tworzenia i operacji na tablicach używa się klasy Array.

Metody klasy Array:

concatslice
joinsort
popsplice
pushtoString
reverseunshift
shiftvalueOf

Przykład – pośrednie zwiększanie długość tablicy:

var tab = new Array();
tab[100] = 1;

Przykład – użycie metody join:

var str = tablica.join(',');

Metoda zwróci łańcuch zbudowany z elementów tablicy rozdzielonych separatorem (tu: przecinek).

Tak jak dla łańcuchów, tak i dla tablic możemy użyć właściwości length, która informuje nas o ilości elementów w tablicy:

var tab = new Array();
tab.push(1,2);
alert(tab.length);

Przykład – sortowanie tablicy dzięki metodzie sort:

var tab = new Array('PHP', 'Ada', 'JavaScript', 'Ruby');
tab.sort();
alert(tab.join()); // wypisze: Ada,JavaScript,PHP,Ruby

To oczywiście bardzo prosty przykład sortowania.

Definicja tablic – może zostać przeprowadzona na różne sposoby:

var t = new Array("a","b","c");

można zapisać w zwięzłej formie:

var t = ["a","b","c"];

Do tablicy (czyli obiektu klasy Array) możemy łatwo dodawać (lub usuwać) elementy przy pomocy metod push() i pop().

// dodaj element(y) na końcu tablicy
tablica.push(element1[, element2, ..., elementN]);

// zwróć ostatni element tablicy
tablica.pop();

splice – metoda usuwa z tablicy elementy, w ich miejsce mogą zostać wstawione nowe:

// usuwanie elementów
splice(index, jakDuzo, [element1][, ..., elementN]); 

Przykład:

var tab1 = new Array("a", "b", 0, 0 , 0, "f", "g");

// spowoduje usunięcie 3 elementów, począwszy od
// indeksu 2 (czyli trzech 0) i wstawienie na ich
// miejsce elementów c, d, e
tab1.splice(2, 3, "c", "d", "e");

Klasa Array udostępnia też metody shift() i unshift() działające tak samo jak push() i pop() z tą różnicą, że operują one na początku, a nie na końcu tablicy.

Generalnie, usuwanie elementów tablicy można wykonać:

– poprzez wspomnianą metodę splice – otrzymamy nową tablicę bez elementów, które chcemy pominąć:

// usuwa 5 elementów zaczynając od 1-szego
var nowaTablica = tablica.splice(1, 5);

– poprzez delete:

delete tablica[indeks];

Dodatkowe przykłady użycia metod klasy Array dobrze pokazuje w3schools.

Tablice 2-D w JavaScript

W JS możemy korzystać oczywiście także z tablic wielowymiarowych. Pokażemy jak można to zrobić.

Przykład – tablica 2D – macierz:

str = "Matrix ";
var a = new Array(4); // tworzenie nowej tablicy z N elementów
for (i = 0; i < 4; i++) {
    a[i] = new Array(4);
    for (j = 0; j < 4; j++) {
        a[i][j] = "[" + i + ", " + j + "]";
    }
}

// przetwarzanie: wydrukowanie czytelnie zawartości tablicy 2-D
for (i = 0; i < 4; i++) {
    s = "Wiersz " + i + ":";
    for (j = 0; j < 4; j++) {
        s += a[i][j];
    }
    str += s + " | ";
}
alert(str);

Inny sposób na definicje tablicy wielowymiarowej w JavaScript:

var matrix = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8]
];
alert(matrix[2][1]); // 7

Tym akcentem kończymy krótkie przedstawienie łańcuchów i tablic w JavaScript, a tym samym omawianie podstaw tego języka.

Mamy już solidne podstawy do zgłębiania coraz poważniejszych i ciekawszych zagadnień języka.

Oczywiście zachęcam do komentowania.

W następnym artykule zajmiemy się pracą z DOM (Document Object Model) w JavaScript, powiemy także o BOM (Browser Object Model).

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+1Share on LinkedIn2Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.
  • Adam P.


    Nie wiem dlaczego, ale praca ze stringami (wciąż mówię o ciągach znaków) i tablicami, to jedna z moich ulubionych czynności przy pisaniu kodu

    dobrze że precyzujesz 😛

    Ale post spoko, faktycznie z czasem coraz ciekawsze 🙂

    Pzdr!

  • 🙂
    If you know what I mean

  • Dodatek: jak z tablicami radzi sobie Dojo Toolkit

    http://dojotoolkit.org/documentation/tutorials/1.9/arrays/