Karatasi ya Maelezo ya JavaScript
Rejeleo linalotafutika na linaloweza kuchapishwa la JavaScript ya kisasa — sintaksia, safu, mifuatano, vitu, async/await, DOM na vipengele vya ES2022+. Bila malipo.
Vigeu na aina
10let x = 1;
Kigeu chenye wigo wa block, kinachoweza kupewa thamani upya
const PI = 3.14;
Ufungaji wa const wenye wigo wa block
typeof value
Hurudisha aina kama string
Number('42')
Badilisha string kuwa namba
String(42)
Badilisha thamani kuwa string
parseInt('42px', 10)
Soma integer ya mwanzo (base 10)
Boolean(0)
Lazimisha thamani kuwa true/false
value ?? 'default'
Nullish coalescing (null/undefined pekee)
a?.b?.c
Optional chaining, husimama kwenye null
Array.isArray(x)
Angalia kama thamani ni array
Functions
9function add(a, b) { return a + b; }
Tangazo la function yenye jina
const add = (a, b) => a + b;
Arrow function yenye return ya moja kwa moja
const f = (a = 1) => a;
Thamani chaguo-msingi ya parameter
function f(...args) {}
Rest parameters hukusanya kwenye array
f(...arr)
Tawanya array kuwa arguments
const { a, b } = obj;
Object destructuring
const [x, y] = arr;
Array destructuring
(function(){})()
Function inayoitwa mara moja (IIFE)
fn.bind(this)
Funga muktadha wa this uliowekwa
Strings
10`Hello ${name}`
Uwekaji ndani wa template literal
str.length
Idadi ya herufi
str.includes('a')
Angalia kama substring ipo
str.slice(0, 3)
Toa sehemu ya string
str.replace(/a/g, 'b')
Badilisha zinazolingana (regex)
str.split(',')
Gawanya kuwa array
str.trim()
Ondoa nafasi zinazozunguka
str.toUpperCase()
Badilisha kuwa herufi kubwa
str.padStart(3, '0')
Jaza mwanzo hadi urefu fulani
str.at(-1)
Herufi kwenye index (huruhusu hasi)
Arrays
11arr.map(x => x * 2)
Badilisha kila kipengele
arr.filter(x => x > 0)
Weka vipengele vinavyolingana
arr.reduce((a, b) => a + b, 0)
Punguza kuwa thamani moja
arr.find(x => x.id === 1)
Kipengele cha kwanza kinacholingana
arr.some(x => x > 0)
True kama kipengele chochote kinalingana
arr.every(x => x > 0)
True kama vipengele vyote vinalingana
arr.includes(3)
Angalia kama thamani ipo
arr.sort((a, b) => a - b)
Panga namba kupanda
[...new Set(arr)]
Ondoa thamani zinazojirudia
arr.flat(Infinity)
Sambaza kabisa array zilizopachikwa
arr.at(-1)
Kipengele cha mwisho (index hasi)
Objects
9Object.keys(obj)
Array ya keys za asili zinazohesabika
Object.values(obj)
Array ya thamani za asili
Object.entries(obj)
Array ya jozi [key, value]
{ ...a, ...b }
Unganisha objects (spread)
Object.assign({}, a, b)
Nakili/unganisha kwenye lengo
Object.freeze(obj)
Fanya object isibadilike
{ [key]: value }
Jina la property lililokokotolewa
obj.hasOwnProperty('x')
Angalia kama property ya asili ipo
structuredClone(obj)
Nakili kwa kina object
Async na promises
9async function f() {}
Tangaza async function
await fetch(url)
Simama hadi promise itakapokamilika
Promise.all([p1, p2])
Subiri zote zikamilike
Promise.allSettled([p1, p2])
Subiri zote zituleke
Promise.race([p1, p2])
Kamilisha na ya kwanza kutuleka
new Promise((res, rej) => {})
Tengeneza promise kwa mkono
try { await f(); } catch (e) {}
Shughulikia makosa ya async
setTimeout(fn, 1000)
Endesha baada ya kuchelewa (ms)
queueMicrotask(fn)
Panga microtask
Mtiririko wa udhibiti
9if (a) {} else if (b) {} else {}
Matawi ya masharti
a ? b : c
Usemi wa ternary
switch (x) { case 1: break; }
Tawi la njia nyingi
for (const x of arr) {}
Pitia thamani (iterables)
for (const k in obj) {}
Pitia keys za object
while (cond) {}
Rudia mradi sharti linatimia
arr.forEach((x, i) => {})
Endesha callback kwa kila kipengele
break / continue
Toka au ruka mzunguko wa loop
label: for (...) { break label; }
Toka kwenye loops zilizopachikwa
DOM na events
10document.querySelector('.x')
Kipengele cha kwanza kinacholingana
document.querySelectorAll('.x')
Vipengele vyote vinavyolingana (NodeList)
el.addEventListener('click', fn)
Ambatisha event listener
el.classList.toggle('active')
Geuza class ya CSS
el.dataset.id
Soma attribute ya data-id
el.textContent = 'hi'
Weka maandishi kwa usalama (bila HTML)
el.setAttribute('aria-hidden', true)
Weka attribute
e.preventDefault()
Ghairi kitendo chaguo-msingi
el.closest('.parent')
Mzazi wa karibu anayelingana
document.createElement('div')
Tengeneza kipengele kipya
Classes na modules
9class A extends B {}
Class yenye urithi
constructor() { super(); }
Anzisha na ita mzazi
#private = 1;
Field ya class ya faragha
static create() {}
Static method kwenye class
get value() {}
Getter accessor
export default fn;
Export chaguo-msingi ya module
export { a, b };
Exports za module zenye majina
import x, { y } from './m.js'
Imports chaguo-msingi + zenye majina
const m = await import('./m.js')
Dynamic import
Hakuna kipengele kinacholingana na “:q”.
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.