JavaScript Hile Sayfası
Son güncelleme
Değişkenler (let, const, var)
Değerleri tanımlayın; önce const, sonra let kullanın ve var'dan kaçının.
| İşlem | Söz dizimi |
|---|---|
| Blok kapsamlı, yeniden atanabilir | let count = 0; |
| Blok kapsamlı, yeniden atanamaz | const name = "Ada"; |
| Fonksiyon kapsamlı (eski) | var x = 1; |
| Değer atamadan tanımla | let result; |
| Çoklu tanımlama | let a = 1, b = 2; |
| Sabit nesne (değiştirilebilir içerik) | const user = {}; user.id = 1; |
Veri tipleri
İlkel ve referans tipleri ile bunların nasıl kontrol edileceği.
| Tip | Örnek |
|---|---|
| Number | let n = 42; |
| String | let s = "hi"; |
| Boolean | let ok = true; |
| Array | let arr = [1, 2, 3]; |
| Object | let obj = { id: 1 }; |
| Null / undefined | let a = null;, let b; |
| Bir tipi kontrol et | typeof n |
| Dönüştür | Number("7"), String(42), Boolean(0) |
Dizeler ve template literal'ler
Metin oluşturun ve değiştirin.
| İşlem | Söz dizimi |
|---|---|
| Template literal | Hi ${name}, age ${age} (ters tırnaklarla sar) |
| Uzunluk | text.length |
| Büyük / küçük harf | text.toUpperCase(), text.toLowerCase() |
| Boşlukları kırp | text.trim() |
| Hepsini değiştir | text.replaceAll("a", "b") |
| Bir diziye böl | text.split(",") |
| İçerir mi | text.includes("js") |
| Dilimle | text.slice(0, 3) |
Diziler ve dizi metotları
Sıralı koleksiyonlar ve onları dolaşan metotlar.
| İşlem | Söz dizimi |
|---|---|
| Sona ekle / kaldır | arr.push(4), arr.pop() |
| Başa ekle / kaldır | arr.unshift(0), arr.shift() |
| Her öğeyi dönüştür | arr.map(x => x * 2) |
| Eşleşen öğeleri tut | arr.filter(x => x > 0) |
| Tek bir değere indirge | arr.reduce((sum, x) => sum + x, 0) |
| Bir öğe bul | arr.find(x => x.id === 1) |
| some / every testi | arr.some(f), arr.every(f) |
| Bir değerin indeksi | arr.indexOf(3), arr.includes(3) |
| Bir dizeye birleştir | arr.join(", ") |
Nesneler
Anahtar-değer koleksiyonları.
| İşlem | Söz dizimi |
|---|---|
| Oluştur | const user = { id: 1, name: "Ada" }; |
| Bir özelliğe eriş | user.name, user["name"] |
| Özellik ekle / güncelle | user.age = 25; |
| Bir özelliği sil | delete user.age; |
| Tüm anahtarları / değerleri al | Object.keys(user), Object.values(user) |
| Girdileri al | Object.entries(user) |
| Nesneleri birleştir | Object.assign({}, a, b) |
| Yüzeysel kopya | const copy = { ...user }; |
Kontrol akışı
Koşullar ve döngüler.
| İşlem | Söz dizimi |
|---|---|
| If / else if / else | if (x > 0) { … } else { … } |
| Üçlü (ternary) | const y = x > 0 ? 1 : 0; |
| Switch | switch (x) { case 1: … break; } |
| For döngüsü | for (let i = 0; i < 5; i++) { … } |
| For-of (değerler) | for (const item of arr) { … } |
| For-in (anahtarlar) | for (const key in obj) { … } |
| While döngüsü | while (x < 10) { … } |
Fonksiyonlar ve ok fonksiyonları
Yeniden kullanılabilir, çağrılabilir bloklar tanımlayın.
| İşlem | Söz dizimi |
|---|---|
| Fonksiyon bildirimi | function add(a, b) { return a + b; } |
| Ok fonksiyonu | const add = (a, b) => a + b; |
| Tek argümanlı ok | const sq = x => x * x; |
| Argümansız ok | const now = () => Date.now(); |
| Varsayılan parametre | function f(x = 0) { … } |
| Rest parametreleri | function f(...args) { … } |
| Hemen çağrılan (IIFE) | (() => { … })(); |
Destructuring ve spread
Değerleri ayrıştırın ve yapıları kopyalayın/birleştirin.
| İşlem | Söz dizimi |
|---|---|
| Dizi destructuring | const [a, b] = arr; |
| Nesne destructuring | const { id, name } = user; |
| Ayrıştırırken yeniden adlandır | const { id: userId } = user; |
| Varsayılan değer | const { age = 0 } = user; |
| Bir diziyi spread et | const all = [...a, ...b]; |
| Bir nesneyi spread et | const next = { ...user, age: 25 }; |
| Destructuring'de rest | const [first, ...rest] = arr; |
Promise'ler ve async/await
Ağ istekleri gibi asenkron işleri yönetin.
| İşlem | Söz dizimi |
|---|---|
| Async fonksiyon | async function load() { … } |
| Bir promise'i await et | const data = await fetch(url); |
| Then / catch | promise.then(res => …).catch(err => …) |
| Await ile try / catch | try { await f(); } catch (e) { … } |
| Resolve / reject | Promise.resolve(1), Promise.reject(err) |
| Hepsini bekle | await Promise.all([a, b]) |
| İlk tamamlanan | await Promise.race([a, b]) |
En çok başvurduğunuz modern JavaScript söz dizimi tek sayfada. Bu JavaScript hile sayfası, günlük ES6+ için hızlı bir başvurudur - değişken tanımlama, dize ve dizi metotları, nesneler, ok (arrow) fonksiyonları, destructuring ve async/await.
Buradaki her şey modern tarayıcılarda ve Node.js'te çalışan standart JavaScript'tir. İhtiyacınız olanı kopyalayın ya da herhangi bir kod parçasını JS playground'da canlı deneyin - kurmanız gereken hiçbir şey yok.
JavaScript hile sayfası SSS
Bu JavaScript hile sayfası ücretsiz mi?
Evet. Bu JavaScript hile sayfası tamamen ücretsizdir ve kayıt gerektirmez. Yer imlerinize ekleyin ve bir söz dizimine, dizi metoduna ya da async desenine bakmanız gerektiğinde geri dönün.
JavaScript'te == ile === arasındaki fark nedir?
== gevşek eşitliktir: karşılaştırmadan önce işlenenleri aynı tipe dönüştürür, dolayısıyla 0 == "0" true olur. === katı eşitliktir: hem değeri hem de tipi dönüştürmeden karşılaştırır, dolayısıyla 0 === "0" false olur. Neredeyse tüm durumlarda === (ve !==) tercih edin - öngörülebilir ve şaşırtıcı tip dönüşümlerini önler.let, const ve var arasındaki fark nedir?
const ve let blok kapsamlıdır ve ES6'da eklenmiştir; var fonksiyon kapsamlıdır ve daha eskidir. Asla yeniden atamadığınız değerler için const, atadıklarınız için let kullanın ve hoisting ile kapsam hatalarını önlemek için var'dan kaçının. Bir const nesnesinin veya dizisinin içeriğinin yine de değiştirilebileceğini unutmayın - yalnızca bağlama (binding) sabittir.JavaScript'i çevrimiçi olarak deneyebilir miyim?
Evet. JS playground'u açarak bu hile sayfasındaki herhangi bir kod parçasını tarayıcınızda çalıştırabilirsiniz - kurmanız gereken hiçbir şey yok. Yapı istediğinizde, Coddy'nin ücretsiz etkileşimli JavaScript kursu sizi değişkenler ve döngülerden dizi metotlarına ve async/await'e adım adım götürür.
Bu hile sayfası yeni başlayanlar için uygun mu?
Evet. Temellerden (değişkenler, veri tipleri, dizeler) destructuring ve async/await'e doğru düzenlenmiştir, böylece üstteki bölümleri ilk günden kullanabilir ve zamanla modern ES6+ özelliklerine geçebilirsiniz.
İlgili kaynaklar
Daha fazla kopya kağıdı
