JavaScript: Jak posortować tablicę obiektów po danej właściwości?

Opublikowano: 07.07.2022 - tagi: JavaScript Tablica Obiekt Sortowanie

Mamy taką tablicę:

const data = [
  { 
    name: 'Janusz',
    age: 69,
  },
  {
    name: 'Zuzanna',
    age: 7 
  }
  {
    name: 'Anna',
    age: 25 
  },
  {
    name: 'Bartosz',
    age: 18
  }
];

I chcemy posortować dane alfabetycznie po właściwości name.

Rozwiązanie:

const sortByName = (item1, item2) => {
  if (item1.name < item2.name) {
    return -1;
  }

  if (item1.name > item2.name) {
    return 1;
  }

  return 0;
}

data.sort(sortByName);

Posortuje:

[
  {
    "name": "Anna",
    "age": 25
  },
  {
    "name": "Bartosz",
    "age": 18
  },
  {
    "name": "Janusz",
    "age": 69
  },
  {
    "name": "Zuzanna",
    "age": 7
  }
]

JavaScript: Jak umieścić element w konkretnym miejscu w tablicy?

Opublikowano: 05.07.2022 - tagi: JavaScript Tablica

Mamy tablicę:

['Apple', 'Lemon', 'Grapes', 'Pear']

Załóżmy, że chcemy dodać nowy element: Pineapple jako trzeci w tablicy. Czyli chcemy osiągnąć:

['Apple', 'Lemon', 'Pineapple', 'Grapes', 'Pear']

Można to zrobić za pomocą funkcji splice:

const fruits = ['Apple', 'Lemon', 'Grapes', 'Pear'];
const fruitIndex = fruits.findIndex((fruit) => fruit === 'Lemon');

if (fruitIndex) {
  fruits.splice(fruitIndex + 1, 0, 'Pineapple');
}

console.log(fruits); // ['Apple', 'Lemon', 'Pineapple', 'Grapes', 'Pear']

Funkcja splice przyjmuje indeks, w którym miejscu chcemy dodać element (tutaj dodajemy 1, bo chcemy umieścić nowy element za Lemon). Drugi parametr to 0 informujemy w ten sposób metodę slice, że... nie chcemy usuwać żadnego element (do kasowania także służy ta metoda!). I na koniec w trzecim parametrze przekazujemy parametr, jaki chcemy dodać do tablicy.


Webstorm: Nawigacja w kodzie

Opublikowano: 02.07.2022 - tagi: Webstorm Klawiatura Skrót klawiszowy Produktywność

Żeby praca z kodem była bardziej efektywna, warto znać skróty klawiszowe, które pomogą nam w szybkim poruszaniu się po nim.

Przejście do konkretnej linii kodu - CTRL + G

Przejście do ostatnio edytowanego miejsca - ALT + SHIFT + BACKSPACE

Przejście do następnego/poprzedniego błędu - F2 lub: Shift + F2

Przejście do następnej/poprzedniej metody - ALT + UP lub: ALT + DOWN


Podsumowanie: Czerwiec 2022

Opublikowano: 30.06.2022 - tagi: Podsumowanie Czerwiec 2022 Blog

W czerwcu opublikowałem 11 wpisów:


CSS:

  1. Jak ograniczyć ilość wyświetlanych linijek tekstu?
  2. Flex - jak wycentrować element poziomo i pionowo?
  3. Flex - Jak wyświetlić elementy po lewej i prawej stronie?

Angular:

  1. Jak stworzyć wiązanie dwukierunkowe?
  2. Jak stworzyć zagnieżdżony formularz?
  3. Jak wypełnić formularz danymi?

JavaScript:

  1. Jak bezpośrednio zwrócić obiekt z funkcji typu arrow?

TypeScript:

  1. Operator !

Inne:

  1. PM2: Zapisywanie i odzyskiwanie procesów

Narysowałem dwa komiksy:

  1. Motivation vs Habit
  2. Deep Work

Przeczytałem trzy książki:

  1. Ostre cięcia - Joe Abercrombie
  2. Wielki bazar kolejowy. Pociągiem przez Azję - Paul Theroux
  3. Horyzont - Jakub Małecki

Przesłuchałem cztery audiobooki:

  1. Kult - Łukasz Orbitowski
  2. Utonęła - Therese Bohman
  3. Ukryte okno, ukryty ogród - Stephen King
  4. Ostatnie stadium - Nina Lykke

TypeScript: Operator !(wykrzyknik)

Opublikowano: 28.06.2022 - tagi: JavaScript TypeScript Operator

W TypeScript istnieje operator ?, który służy do poinformowania, że oznaczone w taki sposób wyrażenie jest opcjonalne:

const someFunction = (data?: string) => {
}

Jest to przydatne gdy chcemy określić, że na przykład parametr funkcji nie jest wymagany.

Zapis:

data: string | null

możemy zastąpić:

data?: string

Spójrzmy jeszcze na przykład:

interface Person {
  name: string;
  age: number;
}

const displayPersonInfo = (person?: Person) => {
  console.log('Name: ', person.name);
  console.log('Age: ', person.age);
}

Ponieważ w funkcji displayPersonInfo oznaczyliśmy parametr person jako opcjonalny, dostaniemy komunikat o błędzie przy próbie kompilacji. Próbujemy się dostać do właściwości obiektu (parametru), który może w ogóle nie zostać przekazany.

error TS2532: Object is possibly 'undefined'.

A co jeśli mam gwarancję, że do tej funkcji zawsze zostanie przekazany właściwy obiekt?

Operator !

Istnieje operator w TypeScript dzięki, któremu informujemy TS, że wiemy, co robimy. Dajemy gwarancję, że zostanie tam przekazany obiekt. Oto zapis:

const displayPersonInfo = (person?: Person) => {
  console.log('Name: ', person!.name);
  console.log('Age: ', person!.age);
}

Operator ! to tzw.: non-null assertion. Usuwa on z danego typu wartości null lub undefined informując TypeScript "puste" wartości nie zostaną przekazane.

Innym przykład użycia tego operatora to rozwiązanie poniższego problemu. To jest przykład z Angulara:

export class FormComponent implements OnInit {

  @Input()
  data: FormGroup;
	
	...
}	

Przy próbie kompilacji takiego kodu dostaniemy błąd:

error TS2564: Property 'data' has no initializer and is not definitely assigned in the constructor.

Przekazujemy do tego komponentu obiekt FormGroup, który nie jest "pusty". My to wiemy, ale TS nie. Wystarczy napisać:

@Input()
data!: FormGroup;

Problem rozwiązany.