Fragment kodu JavaScript dla typowych problemów

Ostatnia aktualizacja 27 lipca 2021 r.

Każdy język programowania ma swoje wady i dziwactwa. Język JavaScript, a nawet użyty fragment kodu JavaScript nie jest wyjątkiem. Język skryptowy zachowywał się dziwnie w ostatnich latach, ale obecnie jest jednym z najczęściej używanych języków. W większości jest to podstawowy interaktywny język przeglądarek internetowych.

Czasami, jako programiści i programiści, mamy powtarzające się, proste zadania, które wymagają prostych fragmentów kodu. W tym blogu przedstawię kilka typowych problemów, które można łatwo rozwiązać za pomocą skryptów ES6 jako części fragmentów kodu JavaScript.

Wskazówka dotycząca fragmentu kodu JavaScript: użyj „let” zamiast „var”

let jest jak var , ale niech ma zakres. let jest dostępny tylko na poziomie zakresu bloku, jest zadeklarowany i ma przypisaną wartość. var jest dostępna na każdym poziomie w zakresie zdefiniowanego zakresu bloku. W poniższym przykładzie zmienna 'num1' jest zdefiniowana wewnątrz instrukcji If i dlatego nie jest dostępna poza funkcją.

 Jeśli prawda) {
  niech num1 = 40;
}

niech liczba2 = 20;

console.log(num2, num1);
konsola.log(num1);

Wyjście:
20
nieokreślony

 niech a = 25;
niech b = 50;

Jeśli prawda) {
  niech a = 100;
  zm c = 5;
  konsola.log(a/c);
  konsola.log(b/c);
}

konsola.log(c);
konsola.log(a);

Wyjście:
20
10
5
25

Użyj „const”, gdy wartość zmiennej się nie zmienia

const przypisuje stałą wartość do zmiennej, której nie można zmienić. Za każdym razem, gdy zdefiniowana jest zmienna const, JavaScript odwołuje się do adresu wartości do zmiennej.

Funkcja strzałkowa fragmentu kodu JavaScript, nowa składnia funkcji

Fragmenty kodu JavaScript Funkcje w ES6 zostały zmienione na prostsze wyrażenie, '() => {}'.

 // Stara składnia
funkcja mojeCześć() {
  console.log("Witaj świecie...!");
}

// Nowa składnia
var myHello = () => {
  console.log("Witaj świecie...!");
}

Nowa składnia może początkowo być nieco myląca. Składnia składa się z dwóch części.

 var myHello = ()

Pierwsza część fragmentu kodu JavaScript deklaruje zmienną i przypisuje do niej funkcję (). Po prostu mówi, że zmienna jest funkcją.

 => { //zrób coś } 

Druga część deklaruje część treści funkcji. Część ze strzałką z nawiasami klamrowymi określa część ciała.

Inne przykłady, ale z parametrami.

 niech withParameters = (a, b) => {
  konsola.log(a+b);
}

z parametrami(10, 20);

Wyjście:
30

 niech sumOfNum = (a, b = 10) => {
  zwróć a + b;
}

console.log(sumOfNum(20);
console.log(sumOfNum(20,30);

Wyjście:
30
50

Nowy” dla… z…” Pętla

for…of jest bardzo podobny do for…in z niewielką modyfikacją. for…of iteruje przez listę elementów, takich jak Array i zwraca elementy (nie ich indeks) jeden po drugim. Zwróć uwagę, że zmienna „num” wyprowadza każdy element tablicy, a nie indeks.

 niech liczby = [5,6,7,8];

for (niech liczba liczb) {
  konsola.log(wartość);
}

Wyjście:
5
6
7
8

 niech str = 'Arturo';

for (niech znak ze str) {
  console.log(znak);
}

Wyjście:
A
r
t
ty
r
o

Przypisanie niszczenia zmiennej

Przypisywanie zmiennych z tablicy pojedynczo jest czasochłonne i głupie. Po prostu użyj przypisania destruktora, aby wykonać to szybciej i łatwiej:

 niech profil = ['Jan', 32, 'inżynier'];

let [imię, wiek, praca] = profil;

konsola.log(nazwa);

Wyjście:
Jan

Znajdź określony obiekt w tablicy obiektów

Jednym z najczęstszych zadań, które musisz wykonać w JavaScript, jest iteracja po tablicy obiektów w celu znalezienia konkretnego. Metoda find jest tutaj prostym rozwiązaniem. Po prostu podłączasz kryteria wyboru za pomocą anonimowej funkcji jako argumentu i otrzymujesz:

 niech personel = [
  { id: 0, imię: 'Nina' },
  { id: 1, imię: 'Kevin'},
  { id: 2, imię: 'Jan' }
]

niech pracownik = personel.find(emp => emp.name === 'Jan');

console.log(klient);

Wyjście:
{ id: 2, imię: 'Jan' }

Zapętlanie kluczy i wartości obiektu

Nasza struktura danych może być złożonym obiektem, który zawiera różne pary klucz/wartość. Iteracja każdej pary może być trochę dziwna, ale jest to proste, gdy zaczniemy korzystać z funkcji Object.

Po przechwyceniu kluczy Object, możemy przejść przez pętlę kluczy i wartości w tym samym czasie. W poniższym rozwiązaniu uzyskujemy dostęp do każdej pary za pomocą zmiennych klucza i wartości podczas pętli.

 niech myObject = { Piotr: 15, Jan: 20, Anna: 35 };

Object.keys(myObject).forEach((klucz, wartość) => {
  //...Zrób coś
  console.log(klucz, wartość);
});

Wyjście:
Piotr 15
Jana 20
Anna 35

Filtruj tablicę obiektów na podstawie warunku

Czasami mamy dużą liczbę danych, które chcemy odfiltrować na podstawie określonego warunku. Możemy to zrobić za pomocą funkcji filtrowania. Poniższe rozwiązanie ma tablicę ścieżek plików. Niektóre pliki znajdują się w katalogu „data1”, a inne w katalogu „data2”. Załóżmy, że chcemy filtrować tylko według określonego katalogu:

 niech lokalizacja = [
  "pliki/dane1/plik",
  "pliki/dane1/plik2",
  "pliki/dane2/plik",
  "pliki/dane2/plik2"
];

let filter = location.filter(path => path.includes('data2'));

console.log(filtr);

Wyjście:
[ 'pliki/katalog2/plik', 'pliki/katalog2/plik2' ]

Określając, że ciąg ścieżki musi zawierać ciąg „data2′”, odfiltrowujemy wszystkie ścieżki, które nie zawierają w sobie „data2”. Pamiętaj, że każda funkcja, którą przekażesz do filtrowania, musi zwrócić wartość true, aby element został uwzględniony w wyniku.

Przypisz klawisze do obiektu o tej samej nazwie

Kiedy przypisujesz klucze do obiektu, jeśli klucz ma taką samą nazwę jak zmienna przechowująca wartość, którą chcesz przypisać, możesz całkowicie pominąć przypisanie wartości. Dzięki temu nie musisz się powtarzać, czego wszyscy nienawidzimy. Spójrz na ten przykład:

 niech imię = 'Jan';
niech wiek = 32;
niech praca = 'inżynier';

// zamiast tego
let profil1 = { imię: imię, wiek: wiek, praca: praca };

// Zrób to
let profile2 = { imię, wiek, praca };

console.log(profil2);

Wyjście:
{ imię: 'Jan', wiek: 32 lata, praca: 'inżynier' }

Korzystanie z operatora rozproszenia ES6 „…”

Operator rozłożenia pozwala dosłownie „rozłożyć” tablicę. Można to wykorzystać do przekształcenia tablicy w listę argumentów lub nawet połączenia dwóch tablic. Możesz również użyć go do utworzenia listy argumentów funkcji.

W pierwszym przykładzie pokazujemy, jak operator rozsunięcia działa na tablicy i zamienia każdy element w osobny element.

 niech liczby1 = [1,2,3,4,5];

console.log(...liczby1);

Wyjście:
1 2 3 4 5

Drugi przykład łączy zawartość dwóch tablic, tworząc nową tablicę tymczasową zawierającą obie treści.

 niech liczby2 = [6,7,8,9,10];

let łączony = [...liczby1,...liczby2];

console.log(...połączony);

Wyjście:
1 2 3 4 5 6 7 8 9 10

Ostatni przykład ilustruje, jak operator rozproszenia może zamienić tablicę w listę argumentów funkcji. Math.max zwraca najwyższą liczbę z listy przekazanych do niej argumentów. Jednym z tych argumentów było 10, czyli najwięcej.

 niech liczby1 = [1,2,3,4,5];

niech liczby2 = [6,7,8,9,10];

let łączony = [...liczby1,...liczby2];

console.log(Math.max(...połączony));

Wyjście:
10

Nowe funkcje getterów i seterów

Gettery i settery są jedną z przydatnych funkcji wprowadzonych w ES6. Przydaje się, jeśli używamy klas w JavaScript.

 klasa NazwaOsoby {
  konstruktor(nazwa) {
    this.name = nazwa;
  }
  pobierz imię () {
    zwróć to.nazwa;
  }
  zestaw Imię(imię) {
    this.name = nazwa;
  }
}

let person = new PersonName("Jon Snow");
konsola.log(osoba.Imię); // (A)

osoba.Nazwisko = "Dania"; // (B)
konsola.log(osoba.Imię);

Wyjście:
Jon Snow
Dany

Widzimy, że wewnątrz klasy PersonName znajdują się dwie funkcje z właściwościami 'get' i 'set'. Właściwość „get” służy do pobrania wartości zmiennej, a właściwość „set” służy do ustawienia wartości zmiennej. Widzimy też, że funkcja get Name (A) jest wywoływana bez nawiasów, a funkcja set Name (B) jest wywoływana bez nawiasów i to tak, jak przypisywanie wartości do zmiennej.