15 nützliche JavaScript-Tipps

Dieser Artikel sammelt einige allgemeine JavaScript-Tipps aus dem Internet. Ich habe alle diese Tipps in meinen Projekten verwendet und empfehle sie heute.

1. Zahlentrennzeichen

Um die Lesbarkeit von Zahlen zu verbessern, können Sie Unterstriche als Trennzeichen verwenden.

const largeNumber = 1_000_000_000;

console.log(largeNumber); // 1000000000

Wenn Sie einen Ereignis-Listener hinzufügen und nur einmal ausführen möchten, können Sie die Option once verwenden.

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

Schließen Sie in console.log()die Argumente in geschweifte Klammern ein, damit Sie sowohl den Variablennamen als auch den Variablenwert sehen können.

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

      
                

                    
                    
                
            

Sie können verwenden KeyboardEvent.getModifierState(), um festzustellen, ob die Feststelltaste aktiviert ist.

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

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

Sie können Math.min() oder Math.max()in Kombination mit dem Erweiterungsoperator verwenden, um den Mindest- oder Höchstwert in einem Array zu finden.

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

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

Sie können die Werte der clientX und clientY Eigenschaften des MouseEvent Objekts verwenden, um Informationen über die Koordinaten der aktuellen Mausposition zu erhalten.

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

Sie können die Zwischenablage-API verwenden, um eine „In die Zwischenablage kopieren“-Funktion zu erstellen.

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

Wenn die Funktion nur ausgeführt wird, wenn die Bedingung wahr ist, können Sie die Abkürzung && verwenden.

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

// Abbreviations
condition && doSomething();

Grammatik:

console.table(data [, columns]);

• data Gibt die anzuzeigenden Daten an. Es muss ein Array oder ein Objekt sein.
• columns Stellt ein Array dar, das die Namen der Spalten enthält.

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>

Sind Sie daran interessiert, Ihr Software-Startup zu skalieren ? Schauen Sie sich die Schaltung an .