10 trików JavaScript, które ułatwią Ci życie!

Krzysiek Furtak JavaScript 0 Comments

Powiedzmy sobie szczerze, programowanie w JavaScript to nie jest lekki kawałek chleba 🙂 Czasami trzeba się nieźle napocić, żeby napisać coś dobrze działającego, a zarazem ładnego od strony kodu. Poniżej znajdziesz 10 trików, dzięki którym Twój kod będzie krótszy, bardziej czytelny, a przede wszystkim prostszy do napisania.

1. Sprawdzenie czy funkcja JavaScript jest wspierana przez przeglądarkę

Pisząc aplikacje webowe, a już na pewno strony www nigdy nie możemy być pewni jaką przeglądarkę używa nasz odbiorca. Czasami potrzebujemy sprawdzić czy dana funkcja Javascript jest wspierana przez przeglądarkę, a jeśli nie to musimy zapewnić jakiegoś typu wsparcie dla tego użytkownika.

Sposób na wykonanie takiego testu jest wręcz banalnie prosty, ale niewiele osób o nim wie. Oto przykładowy test:

if ('querySelector' in document) {
document.querySelector("#id");
} else {
document.getElementById("id");
}

W tym przypadku sprawdzamy czy przeglądarka obsługuje funkcję querySelector. Jeśli nie, to zapewniamy wsparcie dla tej przeglądarki poprzez użycie innej funkcji służącej do pobrania elementu getElementById.

2. Operator || wykorzystywany do ustawienia wartości domyślnej

W standardzie JavaScript ES2015 możemy już używać przypisywania wartości domyślnych do argumentów funkcji. Jednak wsparcie przeglądarek tego standardu nie jest jeszcze najlepsze. Dla przeglądarek, które jeszcze nie wspierają ES2015 możemy użyć takiej sztuczki do ustawienia wartości domyślnych argumentów funkcji:

function User(name, age) {
this.name = name || "Oliver Queen";
this.age = age || 27;
}
var user1 = new User();
console.log(user1.name); // Oliver Queen
console.log(user1.age); // 27

var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25

Używając w ten sposób operatora OR (||) możemy być pewni, że w momencie, gdy parametr zwróci false to zostanie użyta wartość ustawiona po operatorze OR.

3. Operator !! jako konwersja do typu boolean

Często potrzebujemy sprawdzić czy istnieje dana zmienna lub czy ma poprawne dane. Najczęściej do tego celu używamy porównania. Jednak dużo lepszym i „ładniejszym” sposobem jest użycie podwójnego operatora negacji (!!). Operacja taka automatycznie przekonwertuje dowolną wartość na typ bool. Zwróci ona false tylko w przypadku gdy wartość ta będzie równa: 0null, „”, undefined lub NaN, w przeciwnym wypadku zwróci true. Przykład:

function Account(cash) {
this.cash = cash;
this.hasMoney = !!cash;
}
var account = new Account(100.50);
console.log(account.cash); // 100.50
console.log(account.hasMoney); // true

var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false

4. Keszowanie wartości array.length w pętlach

Jeśli piszemy pętle w JSie to najczęściej wygląda ona w taki sposób:

for(var i = 0, i < array.length, i++) {
console.log(array[i])
}

Jeśli pracujemy na małych tablicach to taki sposób jest jak najbardziej OK. Jednak jeśli przetwarzamy duże tablice to obliczenie wielkości danej tablicy będzie się powtarzało przy każdym cyklu i może generować opóźnienia.

Możemy tego uniknąć keszując wielkość tablicy:

for(var i = 0, length = array.length; i < length; i++) {
console.log(array[i]);
}

W ten sposób sprawdzenie wielkości tablicy odbędzie się tylko raz, a później będzie ona pobierana ze zmiennej length.

5. Operator + jako konwersja do typu number

Za pomocą tej sztuczki możemy napisać króciutką funkcję JavaScript, która wykona nam konwersję stringa do typu number. Jeśli stringiem będzie liczba, to wykona się konwersja do oczekiwanego typu, jeśli nie funkcja zwróci NaN. A oto funkcja:

function toNumber(strNumber) {
return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN

Ta sztuczka działa również z new Date, która zwróci timestamp:

console.log(+new Date()) // 1461288164385

6. Pobranie ostatniego elementu tablicy

Chyba wszyscy znają funkcję array.slice(start, end). Funkcja zwraca elementy tablicy, jako nową tablicę, jeśli podamy funkcji dwa argumenty: start to pozycja od której zaczynamy zwracanie elementów i end czyli pozycja ostatniego elementu, który nas interesuje. Drugą ciekawostką jest fakt, że jeśli nie podamy drugiego argumentu, to funkcja automatycznie przypisze do niego indeks ostatniej pozycji tablicy.

Niewiele osób wie, że pierwszy argument może przyjmować wartości ujemne. Jeśli podamy funkcji taką wartość to zacznie ona zwracać elementy od końca:

var array = [1,2,3,4,5,6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]

7. Scalanie tablic

Jeśli chcemy scalić dwie tablice w jedną najczęściej używamy funkcji array.concat(). Jeśli pracujemy na dużych tablicach funkcja ta nie jest zbyt dobra, ponieważ do scalenia dwóch tablic tworzy nową, a to z kolei może zabrać sporo pamięci. Możemy jednak użyć innego sposobu. Funkcja array.push.apply(arr1, arr2) scali nam drugą tablicę do pierwszej, ale dodatkowo po pozbyciu się drugiej tablicy zwolni zasoby pamięci.

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

8. Obcinanie tablicy

Złóżmy, że mamy tablicę z 20 elementami, ale interesuje nas tylko 5 pierwszych elementów, a reszta nie jest już nam potrzebna. Możemy obciąć tą tablicę do żądanej przez nas liczby elementów za pomocą jednej linii. Wykorzystujemy do tego właściwość array.length, a wykonujemy operację poprzez zwykłe przypisanie wartościarray.length = 5. Przykład:

var array = [1,2,3,4,5,6];
console.log(array.length); // 6
array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]

9. String i zamień wszystkie

Funkcja string.replace() pozwala na zamianę stringa za pomocą nowego stringa i regexpa. Jednak natywnie funkcja ta zamienia tylko pierwsze wystąpienie wartości. Metodę zamień wszystkie wystąpienia możemy w prosty sposób zasymulować używając /g na końcu regexpa. A oto przykład:

var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"

10. Mieszanie elementów tablicy

Jeśli chcemy wymieszać elementy tablicy często szukamy do tego celu zewnętrznych bibliotek, ponieważ wydaje się to dość skomplikowane i czasochłonne. Jest to jednak bardzo złudne. Wykorzystując poniższy trik możemy pomieszać tablicę pisząc jedną linię kodu:

var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]

Jeśli spotkaliście się z innymi trikami, które mogą zaoszczędzić czas i często także nerwy programisty, dajcie znać w komentarzach.