15 Yararlı JavaScript İpucu

Bu makale, web'deki bazı yaygın JavaScript İpuçlarını derler. Tüm bu ipuçlarını projelerimde kullandım ve bugün tavsiye ediyorum.

1. Sayı ayırıcı

Sayıların okunabilirliğini artırmak için alt çizgileri ayırıcı olarak kullanabilirsiniz.

const largeNumber = 1_000_000_000;

console.log(largeNumber); // 1000000000

Bir olay dinleyicisi eklemek ve bunu yalnızca bir kez çalıştırmak istiyorsanız, bir kez seçeneğini kullanabilirsiniz.

element.addEventListener('click', () => console.log('I run only once'), {
    once: true
});

içinde console.log(), hem değişken adını hem de değişken değerini görebilmeniz için bağımsız değişkenleri kaşlı ayraçlar içine alın.

const name = "Maxwell";
    console.log({ name });

      
                

                    
                    
                
            

KeyboardEvent.getModifierState()Caps Lock'un açık olup olmadığını tespit etmek için kullanabilirsiniz .

const passwordInput = document.getElementById('password');

passwordInput.addEventListener('keyup', function (event) {
    if (event.getModifierState('CapsLock')) {
        // CapsLock is open
    }
});

Bir dizideki minimum veya maksimum değeri bulmak için veya uzantı işleciyle birlikte Math.min() kullanabilirsiniz .Math.max()

const numbers = [5, 7, 1, 4, 9];

console.log(Math.max(...numbers)); // 9
console.log(Math.min(...numbers)); // 1

Geçerli fare konumunun koordinatları hakkında bilgi almak için nesnenin clientX ve clientY özelliklerinin değerlerini kullanabilirsiniz .MouseEvent

document.addEventListener('mousemove', (e) => {
    console.log(`Mouse X: ${e.clientX}, Mouse Y: ${e.clientY}`);
});

Bir "Panoya Kopyala" işlevi oluşturmak için Pano API'sini kullanabilirsiniz.

function copyToClipboard(text) {
    navigator.clipboard.writeText(text);
}

İşlev yalnızca koşul doğru olduğunda yürütülürse, && kısaltmasını kullanabilirsiniz.

// Common writing method
if (condition) {
    doSomething();
}

// Abbreviations
condition && doSomething();

Dilbilgisi:

console.table(data [, columns]);

• data Görüntülenecek verileri belirtir. Bir dizi veya bir nesne olmalıdır.
• columns Sütunların adlarını içeren bir diziyi temsil eder.

function Person(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    const p1 = new Person("Mark", "Smith");
    const p2 = new Person("Maxwell", "Siegrist");
    const p3 = new Person("Lucy", "Jones");

    console.table([p1, p2, p3], ["firstName"]);

       
                

                    
                    
                
            

const str = '508';

console.log(+str) // 508;

const numbers = [2, 3, 5, 5, 2];

console.log([...new Set(numbers)]); // [2, 3, 5]

const myArray = [1, undefined, NaN, 2, null, '@maxwell', true, 5, false];

console.log(myArray.filter(Boolean)); // [1, 2, "@maxwell", true, 5]

const myTech = 'JavaScript';
const techs = ['HTML', 'CSS', 'JavaScript'];

// Common writing method
if (myTech === 'HTML' || myTech === 'CSS' || myTech === 'JavaScript') {
    // do something
}

// includes writing method
if (techs.includes(myTech)) {
    // do something 
}

const myArray = [10, 20, 30, 40];
const reducer = (total, currentValue) => total + currentValue;

console.log(myArray.reduce(reducer)); // 100

<div id="user" data-name="Maxwell" data-age="32" data-something="Some Data">
    Hello Maxwell
</div>

<script>
    const user = document.getElementById('user');
  
    console.log(user.dataset); 
    // { name: "Maxwell", age: "32", something: "Some Data" }
  
    console.log(user.dataset.name); // "Maxwell"
    console.log(user.dataset.age); // "32"
    console.log(user.dataset.something); // "Some Data"
</script>

Yazılım başlangıcınızı ölçeklendirmekle ilgileniyor musunuz? Devreyi kontrol edin .