JavaScript Cheat Sheet: ściąga z JS
Ostatnia aktualizacja
Zmienne (let, const, var)
Deklarowanie wartości; wybieraj const, potem let, a unikaj var.
| Operacja | Składnia |
|---|---|
| Zasięg blokowy, można przypisać ponownie | let count = 0; |
| Zasięg blokowy, nie można przypisać ponownie | const name = "Ada"; |
| Zasięg funkcji (przestarzałe) | var x = 1; |
| Deklaracja bez wartości | let result; |
| Kilka deklaracji | let a = 1, b = 2; |
| Stały obiekt (zmienna zawartość) | const user = {}; user.id = 1; |
Typy danych
Typy proste i referencyjne oraz sposób ich sprawdzania.
| Typ | Przykład |
|---|---|
| Liczba | let n = 42; |
| Łańcuch znaków | let s = "hi"; |
| Wartość logiczna | let ok = true; |
| Tablica | let arr = [1, 2, 3]; |
| Obiekt | let obj = { id: 1 }; |
| Null / undefined | let a = null;, let b; |
| Sprawdzenie typu | typeof n |
| Konwersja | Number("7"), String(42), Boolean(0) |
Łańcuchy znaków i literały szablonowe
Tworzenie tekstu i operacje na nim.
| Operacja | Składnia |
|---|---|
| Literał szablonowy | Hi ${name}, age ${age} (w odwrotnych apostrofach) |
| Długość | text.length |
| Wielkie / małe litery | text.toUpperCase(), text.toLowerCase() |
| Usunięcie białych znaków | text.trim() |
| Zamiana wszystkich wystąpień | text.replaceAll("a", "b") |
| Podział na tablicę | text.split(",") |
| Zawiera | text.includes("js") |
| Wycinek | text.slice(0, 3) |
Tablice i metody tablic
Uporządkowane kolekcje i metody, które po nich iterują.
| Operacja | Składnia |
|---|---|
| Dodanie / usunięcie na końcu | arr.push(4), arr.pop() |
| Dodanie / usunięcie na początku | arr.unshift(0), arr.shift() |
| Przekształcenie każdego elementu | arr.map(x => x * 2) |
| Zachowanie pasujących elementów | arr.filter(x => x > 0) |
| Redukcja do jednej wartości | arr.reduce((sum, x) => sum + x, 0) |
| Znalezienie elementu | arr.find(x => x.id === 1) |
| Sprawdzenie some / every | arr.some(f), arr.every(f) |
| Indeks wartości | arr.indexOf(3), arr.includes(3) |
| Połączenie w łańcuch | arr.join(", ") |
Obiekty
Kolekcje klucz-wartość.
| Operacja | Składnia |
|---|---|
| Utworzenie | const user = { id: 1, name: "Ada" }; |
| Dostęp do właściwości | user.name, user["name"] |
| Dodanie / zmiana właściwości | user.age = 25; |
| Usunięcie właściwości | delete user.age; |
| Wszystkie klucze / wartości | Object.keys(user), Object.values(user) |
| Pary klucz-wartość | Object.entries(user) |
| Scalenie obiektów | Object.assign({}, a, b) |
| Płytka kopia | const copy = { ...user }; |
Sterowanie przepływem
Instrukcje warunkowe i pętle.
| Operacja | Składnia |
|---|---|
| If / else if / else | if (x > 0) { … } else { … } |
| Operator warunkowy | const y = x > 0 ? 1 : 0; |
| Switch | switch (x) { case 1: … break; } |
| Pętla for | for (let i = 0; i < 5; i++) { … } |
| For-of (wartości) | for (const item of arr) { … } |
| For-in (klucze) | for (const key in obj) { … } |
| Pętla while | while (x < 10) { … } |
Funkcje i funkcje strzałkowe
Definiowanie bloków kodu wielokrotnego użytku.
| Operacja | Składnia |
|---|---|
| Deklaracja funkcji | function add(a, b) { return a + b; } |
| Funkcja strzałkowa | const add = (a, b) => a + b; |
| Strzałkowa z jednym argumentem | const sq = x => x * x; |
| Strzałkowa bez argumentów | const now = () => Date.now(); |
| Parametr domyślny | function f(x = 0) { … } |
| Parametry resztowe | function f(...args) { … } |
| Natychmiast wywoływana (IIFE) | (() => { … })(); |
Destrukturyzacja i rozwijanie
Rozpakowywanie wartości oraz kopiowanie i scalanie struktur.
| Operacja | Składnia |
|---|---|
| Destrukturyzacja tablicy | const [a, b] = arr; |
| Destrukturyzacja obiektu | const { id, name } = user; |
| Zmiana nazwy przy rozpakowaniu | const { id: userId } = user; |
| Wartość domyślna | const { age = 0 } = user; |
| Rozwinięcie tablicy | const all = [...a, ...b]; |
| Rozwinięcie obiektu | const next = { ...user, age: 25 }; |
| Reszta w destrukturyzacji | const [first, ...rest] = arr; |
Promise i async/await
Obsługa pracy asynchronicznej, np. zapytań sieciowych.
| Operacja | Składnia |
|---|---|
| Funkcja asynchroniczna | async function load() { … } |
| Oczekiwanie na Promise | const data = await fetch(url); |
| Then / catch | promise.then(res => …).catch(err => …) |
| Try / catch z await | try { await f(); } catch (e) { … } |
| Resolve / reject | Promise.resolve(1), Promise.reject(err) |
| Oczekiwanie na wszystkie | await Promise.all([a, b]) |
| Pierwszy zakończony | await Promise.race([a, b]) |
Najczęściej używana składnia nowoczesnego JavaScriptu na jednej stronie. Ten JavaScript cheat sheet to szybka ściąga z codziennego ES6+: deklarowanie zmiennych, metody łańcuchów i tablic, obiekty, funkcje strzałkowe, destrukturyzacja i async/await.
Wszystko tutaj to standardowy JavaScript, który działa w nowoczesnych przeglądarkach i w Node.js. Skopiuj to, czego potrzebujesz, albo uruchom dowolny fragment w edytorze online JS, bez instalacji. Dopiero zaczynasz? Darmowy interaktywny kurs JavaScriptu w Coddy uczy tej samej składni w praktyce.
JavaScript cheat sheet: najczęstsze pytania
Czy ten JavaScript cheat sheet jest darmowy?
Tak. Ta ściąga z JavaScriptu jest całkowicie darmowa i nie wymaga rejestracji. Dodaj ją do zakładek i wracaj, gdy potrzebujesz sprawdzić składnię, metodę tablicy albo wzorzec asynchroniczny.
Czym różni się == od === w JavaScripcie?
== to luźna równość: przed porównaniem zamienia operandy na ten sam typ, więc 0 == "0" daje true. === to ścisła równość: porównuje wartość i typ bez konwersji, więc 0 === "0" daje false. Niemal zawsze wybieraj === (i !==): jest przewidywalny i pozwala uniknąć zaskakujących konwersji.Czym różnią się let, const i var?
const i let mają zasięg blokowy i pojawiły się w ES6; var ma zasięg funkcji i jest starszy. Używaj const dla wartości, których nigdy nie przypisujesz ponownie, let dla tych, które zmieniasz, i unikaj var, aby nie mieć błędów związanych z hoistingiem i zasięgiem. Pamiętaj, że zawartość obiektu lub tablicy zadeklarowanych przez const nadal można zmieniać: stałe jest tylko powiązanie.Czy mogę ćwiczyć JavaScript online?
Tak. Otwórz edytor online JS, aby uruchomić dowolny fragment z tej ściągi w przeglądarce, bez instalacji. Gdy chcesz uczyć się bardziej systematycznie, darmowy interaktywny kurs JavaScriptu w Coddy prowadzi krok po kroku od zmiennych i pętli do metod tablic i async/await.
Czy ta ściąga nadaje się dla początkujących?
Tak. Jest ułożona od podstaw (zmienne, typy danych, łańcuchy) do destrukturyzacji i async/await, więc górnych sekcji możesz używać od pierwszego dnia, a nowoczesne funkcje ES6+ poznawać z czasem.
Powiązane materiały
Więcej ściąg
