JavaScript'te Bilmediğiniz 7 Şey

JavaScript'te çalışırken çok eğlenceliydi . Her gün onunla etkileşime giren geliştiriciler için bile, dilin bazı kısımları keşfedilmemiş olarak kalır. JavaScript hakkında bilmediğiniz yedi şeyi vurgulayacağım.

 

 

1. İki Sıfır Var

Genellikle sıfırın pozitif değerini kullanırız. Ama bir de -0 var! Nasıl dizildiklerinden dolayı, onları konsolda göremezsiniz:

+0 → 0 -0 → 0

Bunun nedeni, (-0) .toString () ve (+0) .toString () öğesinin 0 olmasıdır.

Biraz daha derine inerek, aslında eşit olduklarını öğreniyoruz:

+0 === -0 → true +0 > -0 → false +0 < -0 → false

Ayrıca, indexOf'u çok fazla yardımcı olmayacak olan diziler üzerinde kullanmaya çalışırsak (eğer indexOf katı eşit kullanır:

// We would expect 1, right? [+0, -0, 42].indexOf(-0) → 0 [-0, +0, 42].indexOf(+0) → 0

Bir değerin negatif bir sıfır olup olmadığını öğrenmek için bir yol vardır: Pozitif ve sınırlı bir sayıyı bu değere bölerek:

42 / 0 → Infinity 42 / -0 → -Infinity

Yani, basitçe şunu söyleyebiliriz:

// Two conditions: // 1. The input parameter should be zero (negative or positive) // 2. Dividing a number by that input, we should get a negative value (-Infinity) let isNegativeZero = input => input === 0 && 1 / input < 0; // Let's test it isNegativeZero(0) → false isNegativeZero(+0) → false isNegativeZero(-0) → true

2. NaN (Sayı Değil) Özel Bir Sayıdır

Evet, NaN olan bir sayı:

typeof NaN → "number"

 

Thre bunu elde etmemizin birkaç yolu:

• 0/0 (0'a bölün)
• + 'foo' (sayı olmayan bir sayıyı sayıya dönüştürür)
• Sonsuzluk - Sonsuzluk
• …ve daha fazlası.

Gerçek şu ki, bu özel bir sayıdır.

NaN kendisine eşit değildir.

Eğer (x! == x) {…} gibi bir şey gördüyseniz, şimdi orada neler olduğunu anlayacaksınız.

Kısacası, NaN NaN eşit değil!

NaN === NaN → false // Even by storing the value in a variable let x = NaN x === x → false

Bir yan etki, bir diziye bir NaN değerinin dizinini bulmak istiyorsanız indexOf kullanmazsınız:

let values = [7, NaN, 42]; // Find the index of 42 values.indexOf(42); → 2 // Find the index of NaN (WRONG!) values.indexOf(NaN) → -1 // If you really want to find the index of NaN, simply create your indexOf function let myIndexOf = (arr, value, start) => { if (value !== value) { start = start || 0; for (let i = start; i < arr.length; ++i) { if (arr[i] !== arr[i]) { return i; } } return -1; } return arr.indexOf(value, start); }; // Now, it will work! myIndexOf(values, NaN) → 1

Eğer x'in NaN olup olmadığını bulmak için x! == x olup olmadığını kontrol etmek yerine isNaN (x) 'i kullanabilirsiniz, ancak bu biraz daha yavaştır.

Ama neden bu? Kolay yanıt, bu davranışın IEEE 754 tarafından belirlendiğidir:

Her NaN, kendisi de dahil olmak üzere, her şeyi sıralanmamış olarak karşılaştırır.

İpucu : ES2015 kullanıyorsanız, NaN kasasını ele alır:

[42, NaN].includes(NaN) → true

NaN (in) sonlu değildir.

NaN sonlu bir sayı değildir. Yani yok değil sonsuz olduğu anlamına gelir. Bu sadece sonlu veya sonsuz değil.

// Check if it's finite isFinite(NaN) → false // Comparing with infinity, it will always give us false Infinity > NaN → false > Infinity < NaN → false -Infinity < NaN → false > -Infinity > NaN → false

NaN pozitif veya negatif değildir.

NaN NaN'dir. + NaN veya -NaN yoktur. Her ikisi de NaN'dir:

NaN → NaN -NaN → NaN +NaN → NaN

3. Bitsel Operatörlerin Kullanımı

Bu oldukça anormal bir durumdur, ancak bitsel operatörler JavaScript’te desteklendiğinden, bunları kullanarak bazı güzel şeyler göstereceğim.

Hızlı çarpma / tamsayıların bölünmesi

Kullanım durumu, büyük bir tuvalde karmaşık 3D animasyonlar oluşturmak istediğinizde olabilir. Çerçeveleri mümkün olduğunca çabuk üretmek ve render etmek istiyorsunuz. Oraya biraz matematik ihtiyacınız olduğunu varsayalım (şüphesiz).

Bir şeyi 2, 4, 8, 16 veya 2'nin herhangi bir gücü ile çarpmak / bölmek istediğinizde, numaralar bitlerin bitlerini sağa (bölme) veya sola (çarpma) hareket ettiren bitsel operatörleri kullanmaktır. ).

// Same with 21 * 2, but faster 21 << 1 → 42 // Same with 5 * 4 5 << 2 → 20

<< işleci, tüm bitleri sol bir konuma taşır. Sayılar ikili formda gösterilir, bu nedenle sağ tarafta yeni bir 0 ekler:

// 5 in base 2: 101 101 << 1 → 1010 (which is 10 in base 2)

>> operatörü kullanırken benzer şeyler olur.

84 >> 1 → 42

Testlerimden bu << değerini kullanmak, * operatörünü kullanmaktan yaklaşık 1.04 kat daha hızlıdır. Böyle küçük bir hız farkı için insan tarafından okunabilir kodu feda etmek isteyip istemediğinizden emin değilsiniz. Olabilir. Her neyse, bilmek güzel.

Şifreli mesajlar gönder

XOR (^) operatörü, kriptografide kullanılır. Mesajları kullanarak şifreleyebilir ve şifreleyebilirsiniz. İşte nasıl çalışır:

A B ^ ========= 0 0 0 0 1 1 1 0 1 1 1 0

Basit bir örnek, bir sayıyı şifreleyip şifresini çözer:

// Alice and Bob share the same secret key: let key = 123; // Alice wants to send Bob a number let msg = 42; // But before sending it, Alice encrypts it: msg = msg ^ key // or directly: msg ^= key → 81 // Bob receives 45, but knowing the key is 123 he knows to decrypt it: 81 ^ key → 42 // Now Bob can enjoy the message from Alice

Bir öğenin bir dizinin parçası olup olmadığını bulun

Bitwise NOT (~) operatörünü kullanarak, bir dizide bir elemanın görünüp görünmediğini kolayca kontrol edebiliriz.

let fruits = ["apple", "pear", "orange"]; // Usually they do it like this if (fruits.indexOf("pear") !== -1) { ... } // That works, but using the `~` makes the code shorter if (~fruits.indexOf("pear")) { ... }

Bu operatör -1'i 0'a çevirir (dahili ikili gösterimi nedeniyle, 0'ı 1'e ve 1'e 0'a çevirir), diğer sayılar için sıfırdan farklı sonuçlar verir. 0 yanlış bir değer olduğundan (!! 0 → yanlış), bu yüzden eğer koşul varsa o girmez.

İpucu : ES2015 kullanıyorsanız, şunları yapacak:

["pear", "apple"].includes("apple") → true

4. Hex / Unicode Kodunu Kullanarak Dizeleri Temsil

Bazı garip sebeplerden ötürü, kodda bir dizgeyi gizlemek, herhangi bir işlevi çağırmak istemiyorsanız, bunu doğal olarak yapabilirsiniz. Oner onaltılık veya unicode kaçış dizileri kullanın:

// Hex: '2a' (in base 16) is 42—representing the ASCII code of '*' '\x2a' → '*' // Unicode: it expects 4 hex digits '\u002a' → '*'

İnsan tarafından okunabilir iletileri dönüştürmesi gereken basit bir işlev oluşturalım:

let strToHex = input => input.split('').map( // Convert each character into its hex code c => `\x${c.charCodeAt(0).toString(16)}` ).join(''); // Let's convert something. strToHex('hello world!') → '\\x68\\x65\\x6c\\x6c\\x6f\\x20\\x77\\x6f\\x72\\x6c\\x64\\x21' // Once we have the above output, we just have to remove the escaping: $ echo '\\x68\\x65\\x6c\\x6c\\x6f\\x20\\x77\\x6f\\x72\\x6c\\x64\\x21' | awk 'gsub("\\\\\\\\", "\\")' → \x68\x65\x6c\x6c\x6f\x20\x77\x6f\x72\x6c\x64\x21 // And finally, we have it! \x68\x65\x6c\x6c\x6f\x20\x77\x6f\x72\x6c\x64\x21 → 'hello world!'

5. Kısa Devreli İkili Mantıksal Operatörler

İkili bir ifadede, ilk işlenen sonuç koşullarını karşıladığında ikinci işlenen değerlendirilmez. Bazı örneklere bir göz atalım:

true && 'hello' → 'hello' // We won't get 'hello', because 'false && anything else' will be always false false && 'hello' → false // Let's try a logical or false || 'hello' → 'hello' // When we have more than two, they are interpreted in the obvious way (from left to right) 0 && false && 'hello' → 0 42 && false && 'hello' → false 42 && true && 'hello' → 'hello'

Şimdi, güzel şey aynı işlevler için de geçerli.

// Get some random number let rand = () => Math.random() + 1; // Let's create an object to collect some data let data = {}; // A function to assign some random numbers to that specific key, only the first time let add = key => !data[key] && (data[key] = rand()) || data[key]; // Assign a random number to 'a' add('a') → 1.0398168717659242 // Reassigning won't work, but we get back the existing value add('a') → 1.0398168717659242 // Do the same for 'b' add('b') → 1.4267915083378722 // And for 'c' add('c') → 1.495289329665785 // Let's see how the data looks like internally: // Seems we do have a clean key-value map { a: 1.0398168717659242, b: 1.4267915083378722, c: 1.495289329665785 }

Açıkçası, sihir add fonksiyonundadır. Hadi şunu genişletelim:

// Let's see what's going on here let add = key => !data[key] && (data[key] = rand()) || data[key]; // Looks more human-readable, but it's longer :D add = key => { // If the value is not yet set... if (!data[key]) { // set it! data[key] = rand(); } // Always, do return the value return data[key]; };

6. Strict Modunda Eval Çalışması Kötü Değil

Evet, şey kötülüktür, ama belki de mad-fen projelerinde size yardımcı olabilecek bazı özellikleri vardır.

Eval'ı katı modda çalıştırırken, çevreleyen alanda değişkenler oluşturmanıza izin vermez. Değerlendir, yalnızca ilettiğiniz kodu yorumlar ve çalıştırır:

let x = 35; // Sum x + 7 let result = eval('x + 7'); → 42 // You can declare variables there (we are NOT in the strict mode): eval('var y = x + 7'); console.log(y); → 42

Şimdi, sıkı modu etkinleştirdiğimizde, yukarıdaki ikinci değerlendirme hala çalışmaya devam edecektir, ancak y değişkenini eval ortamının dışında oluşturmayacaktır:

"use strict"; let x = 35; eval('var y = x + 7'); // ^ // ReferenceError: y is not defined console.log(y);

7. Dinamik olarak Fonksiyonlar Yaratın

Yeni Fonksiyon yapıcısını kullanarak dinamik fonksiyonları tanımlayabiliriz.

let square = new Function('x', 'return x * x'); // Let's see how it looks like: console.log(square.toString()); function anonymous(x /**/) { return x*x } square(4) → 16

Bu kullanıldığında bir kullanım durumu, şablonu bir kez ayrıştıran ve şablon verilerini kabul eden bir işlevi döndüren şablon kütüphanelerinde (örneğin, ejs, ajs vb.) Bulunur.