6.07.20205 min

Mahdhi Rezvi

10 przydatnych trików dla programistów JavaScript

Poznaj przydatne sztuczki w JavaScript, które sprawią, że praca będzie szła lepiej i szybciej.

Jak wszyscy dobrze wiemy, JavaScript niesamowicie się zmienia. Wraz z ES2020 istnieje wiele nowych i świetnych funkcji, które warto poznać. Tak naprawdę to możesz teraz pisać kod, jak Ci się tylko podoba. Każdy sposób służy osiągnięciu tego samego celu, ale niektóre z nich są prostsze i szybsze. Możesz używać niektórych sztuczek, aby Twój kod był jeszcze bardziej przejrzysty i czytelny. Oto lista takich tricków.

Walidacja parametrów metod

JavaScript pozwala na ustawianie domyślnych wartości dla Twoich parametrów. Możemy dzięki temu zaimplementować fajną sztuczkę, dzięki której sprawdzamy parametry danej metody.

const isRequired = () => { throw new Error('param is required'); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2);//printing 2
print()// error
print(null)//printing null

Wygląda całkiem fajnie, prawda?

Formatowanie JSON-a

Pewnie znasz JSON.stringify. Czy wiedzieliście jednak, że można formatować wyniki przy użyciu stringify? Nic prostszego!

Metoda stringify pobiera 3 parametry: value, replacer oraz space. Dwa ostatnie to opcjonalne parametry — to dlatego nie używaliśmy ich przedtem. Aby zrobić wcięcie w naszym JSON, musimy użyć parametru space.

console.log(JSON.stringify({name:"John",Age:23},null,'\t'));
>>> 
{
 "name": "John",
 "Age": 23
}

Oto komponent React, który opublikowałem na Bit. Zapraszam do zabawy z przykładem dotyczącym stringify.

https://bit.dev/eden/stringify-components/display-results

Otrzymuj unikalne wartości z tablicy

Aby otrzymać unikalne wartości z tablicy, musieliśmy wcześniej użyć metody filter, aby przefiltrować powtarzające się wartości. Sprawy są jednak o wiele prostsze z nowym natywnym obiektem Set.

let uniqueArray = [...new Set([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])];
>>> [1, 2, 3, "school", "ball", false, true]

Usuwanie z tablic wartości falsy

Zdarzają się przypadki, w których chcesz usunąć wartości falsy z tablicy. Wartości falsy w JS to takie, które ewaluują się do FALSE. Istnieje tylko 6 takich wartości w JS:

undefined
null
NaN
0
“”(pusty ciąg znaków)
false

Najłatwiejszym sposobem na przefiltrowanie tych wartości jest użycie poniższej funkcji.

myArray
    .filter(Boolean);

Jeśli chcesz trochę zmodyfikować swoją tablicę, a potem przefiltrować nowopowstałą tablicę, to spróbuj poniższego. Pamiętaj jednak, że myArray się w tym przypadku nie zmieni.

myArray
    .map(item => {
        // Do your changes and return the new item
    })
    .filter(Boolean);

Połączenie ze sobą kilku obiektów

Musiałem w kilku przypadkach połączyć dwie lub więcej klas. Podszedłem do tego w następujący sposób:

const user = { 
 name: 'John Ludwig', 
 gender: 'Male' 
 };
const college = { 
 primary: 'Mani Primary School', 
 secondary: 'Lass Secondary School' 
 };
const skills = { 
 programming: 'Extreme', 
 swimming: 'Average', 
 sleeping: 'Pro' 
 };
const summary = {...user, ...college, ...skills};

Trzy kropki to w JavaScript operator spread. Możesz dowiedzieć się więcej o ich użyciu tutaj.

Sortowanie tablic liczb

Tablice JS mają trochę wbudowanych metod sortowania. Metody te konwertują elementy tablicy w ciągi znaków i domyślnie wykonują sortowanie leksykograficzne. Może to spowodować pewne problemy, kiedy sortujemy tablice liczb. Oto proste rozwiązanie tego problemu.

[0,10,4,9,123,54,1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]

Dajemy funkcję, która porówna ze sobą dwa elementy z oryginalnej tablicy. Funkcja ta pomaga w otrzymaniu odpowiednich wyników.

Blokuj klikanie prawym przyciskiem myszy

Możesz zabronić swoim użytkownikom klikać prawym przyciskiem myszy na swojej stronie internetowej. To dosyć rzadkie, ale zdarzają się przypadki, w których możesz czegoś takiego potrzebować.

<body oncontextmenu="return false">
    <div></div>
</body>

Powyższy snippet to zablokuje.

Aliasy i przypisanie destrukturyzujące

Składnia przypisania destrukturyzującego to wrażenie JS, które umożliwia rozpakowywanie wartości z tablic lub właściwości z obiektów do oddzielnych zmiennych. Zamiast trzymać się obecnej zmiennej obiektu, możemy nazwać je, jak nam się podoba.

const object = { number: 10 };
// Grabbing number
const { number } = object;
// Grabbing number and renaming it as otherNumber
const { number: otherNumber } = object;
console.log(otherNumber); //10

Otrzymywanie ostatnich elementów w tablicy

Jeśli chcesz zabrać elementy z końca tablicy, to możesz użyć metody slice z ujemnymi liczbami całkowitymi.

let array = [0, 1, 2, 3, 4, 5, 6, 7] 
console.log(array.slice(-1));
>>>[7]
console.log(array.slice(-2));
>>>[6, 7]
console.log(array.slice(-3));
>>>[5, 6, 7]

Czekanie, aż obietnice zostaną wykonane

Może się zdarzyć i tak, że będzie trzeba poczekać na kilka obietnic. Możemy użyć Promise.all, aby równolegle uruchomić je wszystkie.

Uwaga: obietnice będą działać współbieżnie. Jego głównym zadaniem jest czekanie, aż wszystkie obietnice, które zostaną mu przekazane, zostaną spełnione.

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
  .then(data => console.log('all resolved! here are the resolve values:', data))
  .catch(err => console.log('got rejected! reason:', err))

Najważniejszą rzeczą, na którą należy zwrócić uwagę w przypadku Promise.all, jest to, że metoda ta generuje błąd, gdy jedna z obietnic zostaje odrzucona. Oznaczałoby to, że Twój kod nie będzie czekać, aż wszystkie obietnice zostaną spełnione. Jeśli chcesz poczekać, aż wszystkie obietnice zostaną rozwiązane, niezależnie od tego, czy zostaną odrzucone, czy spełnione, możesz skorzystać z Promise.allSettled. Metoda ta jest w sfinalizowanej wersji ES2020.

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err));
//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]

Mimo że niektóre obietnice zostają odrzucone, Promise.allSettled zwraca wyniki ich wszystkich.

Publikuj i używaj na nowo komponentów Reacta za pomocą Bit

Bit ułatwia publikowanie komponentów Reacta wielokrotnego użytku z dowolnej bazy kodu w centrum komponentów Bit. Chcesz zaktualizować opublikowany komponent? Zaimportuj go do swojego projektu za pomocą Bit, zmień i dodaj go na nowo za pomocą wersji bump.

Dziel się komponentami z teamem, aby zmaksymalizować recycling kodu, przyspieszyć dostarczanie i tworzyć skalowalne aplikacje.

Przykład: eksploracja komponentów Reacta opublikowanych na Bit.dev

Oryginał tekstu w języku angielskim możesz przeczytać tutaj.