Javascript-Codeausschnitte

WBOY
Freigeben: 2024-08-30 21:00:10
Original
303 Leute haben es durchsucht

Javascript Code Snippets

Datentypen

Primitive Datentypen

Nummer

let age = 25;
Nach dem Login kopieren

Zeichenfolge

let name = "John";
Nach dem Login kopieren

Boolean

let isStudent = true;
Nach dem Login kopieren

Undefiniert:

let address;
Nach dem Login kopieren

Null

let salary = null;
Nach dem Login kopieren

Symbol

let sym = Symbol("id");
Nach dem Login kopieren

BigInt

let bigIntNumber = 1234567890123456789012345678901234567890n;
Nach dem Login kopieren

Not-a-Number (NaN)
NaN steht für „Not-a-Number“ und stellt einen Wert dar, der keine legale Zahl ist

console.log(0 / 0); // NaN console.log(parseInt("abc")); // NaN
Nach dem Login kopieren

Wie überprüfe ich den Datentyp?

console.log(typeof a);
Nach dem Login kopieren

Klasse

1) Die Klasse kann nur einen Konstruktor haben

class gfg { constructor(name, estd, rank) { this.n = name; this.e = estd; this.r = rank; } decreaserank() { this.r -= 1; } } const test = new gfg("tom", 2009, 43); test.decreaserank(); console.log(test.r); console.log(test);
Nach dem Login kopieren

Nachlass

class car { constructor(brand) { this.carname = brand; } present() { return 'I have a ' + this.carname; } } class Model extends car { constructor(brand, model) { super(brand); super.present(); this.model = model; } show() { return this.present() + ', it is a ' + this.model; } }
Nach dem Login kopieren

Holen und einstellen

class car { constructor(brand) { this.carname = brand; } // Getter method get cnam() { return "It is " + this.carname; // Return a value } // Setter method set cnam(x) { this.carname = x; } } const mycar = new car("Ford"); console.log(mycar.cnam);
Nach dem Login kopieren

Sofort aufgerufener Funktionsausdruck (IIFE)

Ein IIFE ist eine Funktion, die ausgeführt wird, sobald sie definiert ist

(function() { console.log("IIFE executed!"); })();
Nach dem Login kopieren

Funktionen höherer Ordnung

Funktionen höherer Ordnung sind Funktionen, die andere Funktionen als Argumente annehmen oder Funktionen als Ergebnis zurückgeben

function higherOrderFunction(callback) { return callback(); } function sayHello() { return "Hello!"; } console.log(higherOrderFunction(sayHello)); // "Hello!"
Nach dem Login kopieren

Variables Shadowning

Variable Shadowing tritt auf, wenn eine lokale Variable denselben Namen hat wie eine Variable in einem äußeren Bereich.
Die lokale Variable überschreibt oder verbirgt die äußere Variable in ihrem eigenen Bereich.
Die äußere Variable bleibt intakt und kann außerhalb des lokalen Bereichs aufgerufen werden.

var name = "John"; function sayName() { console.log(name); var name = "Jane"; } sayName();
Nach dem Login kopieren

Zugriff auf HTML-Elemente in JavaScript

Es gibt mehrere Möglichkeiten, auf HTML-Elemente in JavaScript zuzugreifen:

Element nach ID auswählen:

document.getElementById("elementId");
Nach dem Login kopieren

Element nach Klassenname auswählen:

document.getElementsByClassName("className");
Nach dem Login kopieren

Element nach Tagname auswählen:

document.getElementsByTagName("tagName");
Nach dem Login kopieren

CSS-Auswahl:

document.querySelector(".className"); document.querySelectorAll(".className");
Nach dem Login kopieren

Wert übergeben

function changeValue(x) { x = 10; console.log("Inside function:", x) } let num = 5; changeValue(num);
Nach dem Login kopieren

Als Referenz übergeben

function changeProperty(obj) { obj.name = "Alice"; console.log("Inside function:", obj.name); // Output: Inside function: Alice } let person = { name: "Bob" }; changeProperty(person); console.log("Outside function:", person.name); // Output: Outside function: Alice
Nach dem Login kopieren

verwenden Sie streng

Es schaltet die JavaScript-Engine in den strikten Modus, der häufige Codierungsfehler abfängt und mehr Ausnahmen auslöst.

"use strict"; x = 10; // Throws an error because x is not declared
Nach dem Login kopieren

Spread-Operator

Es ermöglicht die Erweiterung eines Iterables wie eines Arrays oder einer Zeichenfolge an Stellen, an denen keine oder mehr Argumente oder Elemente erwartet werden

function sum(a, b, c) { return a + b + c; } const numbers = [1, 2, 3]; console.log(sum(...numbers)); // Output: 6
Nach dem Login kopieren

InstanzVon

Der Operator prüft, ob ein Objekt eine Instanz einer bestimmten Klasse oder Konstruktorfunktion ist.

class Animal { constructor(name) { this.name = name; } } class Dog extends Animal { constructor(name, breed) { super(name); this.breed = breed; } } const myDog = new Dog('Buddy', 'Golden Retriever'); console.log(myDog instanceof Dog); // true console.log(myDog instanceof Animal); // true console.log(myDog instanceof Object); // true console.log(myDog instanceof Array); // false
Nach dem Login kopieren

Filter

Diese Methode erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten Funktion implementierten Test bestehen.

const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // [2, 4, 6]
Nach dem Login kopieren

Reduzieren

Diese Methode führt eine Reduzierfunktion für jedes Element des Arrays aus, was zu einem einzelnen Ausgabewert führt.

const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((sum, value) => sum + value, 0); // sum = 0 initially console.log(sum); // 15
Nach dem Login kopieren

Ausruhen

Diese Parametersyntax ermöglicht einer Funktion, eine unbegrenzte Anzahl von Argumenten als Array zu akzeptieren.

function sum(...numbers) { return numbers.reduce((sum, value) => sum + value, 0); } console.log(sum(1, 2, 3)); // 6 console.log(sum(5, 10, 15, 20)); // 50
Nach dem Login kopieren

Arten von Erklärungen

Implizite globale Variable
Eine implizite globale Variable ist eine Variable, die automatisch im globalen Bereich erstellt wird, wenn ihr ein Wert zugewiesen wird, ohne explizit mit einem Schlüsselwort wie var, let oder const deklariert zu werden. Dies löst jedoch einen Fehler aus, wenn es sich imStrikten Modus
befindet

function myFunction() { x = 10; // no error }
Nach dem Login kopieren

const
Es deklariert eine konstante Variable, die nicht neu zugewiesen werden kann.

const PI = 3.14;
Nach dem Login kopieren

lassen
Es deklariert eine Variable mit Blockbereich.
Es kann nicht mit demselben Namen neu initialisiert werden

let c=1; let c=3;// throws error let count = 0; if (true) { let count = 1; console.log(count); // Output: 1 } console.log(count); // Output: 0
Nach dem Login kopieren

var
Es deklariert eine Variable mit Funktions- oder Globalbereich. Es fördert das Heben und Neuzuordnen.

var name = 'John'; if (true) { var name = 'Doe'; console.log(name); // Output: Doe } console.log(name); // Output: Doe console.log(a) var a=2 // prints undefined
Nach dem Login kopieren

Synthetisches Ereignis

Synthetische Ereignisse: React stellt einen SyntheticEvent-Wrapper für die nativen Browserereignisse bereit. Dieser Wrapper normalisiert die Ereigniseigenschaften und das Verhalten in verschiedenen Browsern und stellt so sicher, dass Ihr Ereignisbehandlungscode unabhängig vom Browser auf die gleiche Weise funktioniert.

import React from 'react'; class MyComponent extends React.Component { handleClick = (event) => { // `event` is a SyntheticEvent console.log(event.type); // Always 'click' regardless of browser console.log(event.target); // Consistent target property } render() { return ; } }
Nach dem Login kopieren

Heben in JavaScript

Hoisting ist ein JavaScript-Mechanismus, bei dem Variablen und Funktionsdeklarationen während der Kompilierungsphase an den Anfang ihres enthaltenden Bereichs verschoben werden, sodass sie verwendet werden können, bevor sie im Code deklariert werden. Allerdings werden nur die Deklarationen gehisst, nicht die Initialisierungen.

console.log(x); // Output: undefined var x = 5; console.log(x); // Output: 5 // Function hoisting hoistedFunction(); // Output: "Hoisted!" function hoistedFunction() { console.log("Hoisted!"); } // Function expressions are not hoisted notHoisted(); // Error: notHoisted is not a function var notHoisted = function() { console.log("Not hoisted"); };
Nach dem Login kopieren

Geben Sie Zwang ein

Es handelt sich um die automatische Konvertierung von Werten von einem Datentyp in einen anderen. Es gibt zwei Arten von Zwang: implizit und explizit.

Impliziter Zwang

Bsp.

let result = 5 + "10"; // "510" let result = "5" * 2; // 10 let result = "5" - 2; // 3 let result = "5" / 2; // 2.5
Nach dem Login kopieren

Explizite Nötigung

Das passiert, wenn wir einen Wert mithilfe integrierter Funktionen manuell von einem Typ in einen anderen konvertieren.

let num = 5; let str = String(num); // "5" let str2 = num.toString(); // "5" let str3 = `${num}`; // "5"
Nach dem Login kopieren

Truthy Values

Non-zero numbers (positive and negative)
Non-empty strings
Objects (including arrays and functions)
Symbol
BigInt values (other than 0n)

Falsy Values

0 (zero)
-0 (negative zero)
0n (BigInt zero)
"" (empty string)
null
undefined
NaN (Not-a-Number)

Props (Properties)

To pass data from a parent component to a child component. It is immutable (read-only) within the child component.

// Parent Component function Parent() { const data = "Hello from Parent!"; return ; } // Child Component function Child(props) { return 
{props.message}
; }
Nach dem Login kopieren

State

To manage data that can change over time within a component. It is mutable within the component.

// Function Component using useState import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( 

Count: {count}

); }
Nach dem Login kopieren

Closure

A closure in JavaScript is a feature where an inner function has access to the outer (enclosing) function's variables and scope chain even after the outer function has finished executing.

function outerFunction(outerVariable) { return function innerFunction(innerVariable) { console.log('Outer Variable:', outerVariable); console.log('Inner Variable:', innerVariable); }; } const newFunction = outerFunction('outside'); newFunction('inside');
Nach dem Login kopieren

Currying

Currying is a technique of transforming a function that takes multiple arguments into a sequence of functions that each take a single argument.

function add(a) { return function(b) { return a + b; }; } const add5 = add(5); console.log(add5(3)); // Output: 8 console.log(add(2)(3)); // Output: 5
Nach dem Login kopieren

Generators

Generators are special functions that can be paused and resumed, allowing you to generate a sequence of values over time.

function* generateSequence() { yield 1; yield 2; yield 3; } const generator = generateSequence(); console.log(generator.next()); // { value: 1, done: false } console.log(generator.next()); // { value: 2, done: false } console.log(generator.next()); // { value: 3, done: false } console.log(generator.next()); // { value: undefined, done: true }
Nach dem Login kopieren

Stay Connected!
If you enjoyed this post, don’t forget to follow me on social media for more updates and insights:

Twitter:madhavganesan
Instagram:madhavganesan
LinkedIn:madhavganesan

Das obige ist der detaillierte Inhalt vonJavascript-Codeausschnitte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!