suchen
HeimWeb-Frontendjs-TutorialZusammenfassung gängiger JavaScript-Methoden_Grundkenntnisse

Dieses Kapitel enthält keine ausführliche Erklärung einiger der zugrunde liegenden Prinzipien von js, wie z. B. Zeiger, Umfang und Prototypen. Es beinhaltet einige Dinge, die zur Vereinfachung des Codes und zur Verbesserung der Ausführungseffizienz während der täglichen Entwicklung beitragen oder können Als empirische Methode ist die Länge nicht lang und Sie können den gesamten Artikel in kleinen Schritten lesen und die Freude am Programmieren erleben.

Erhalten Sie Zufallszahlen innerhalb von zwei Intervallen

Code kopieren Der Code lautet wie folgt:

function getRandomNum(Min, Max){ // Zufallszahlen innerhalb von zwei Intervallen abrufen
// @ Backfire Crazy schlug vor, dass der erste Parameter möglicherweise größer als der zweite Parameter ist, daher ist es zuverlässiger, etwas mehr Urteilsvermögen hinzuzufügen
Wenn (Min > Max)
Max = [Min, Min = Max][0]; // Zwei Variablenwerte schnell austauschen
 
var Range = Max - Min 1;
var Rand = Math.random();
Gibt Min Math.floor(Rand * Range);
zurück };

Gibt zufällig einen positiven/negativen Parameter zurück

Code kopieren Der Code lautet wie folgt:

function getRandomXY(num){ // Gibt zufällig einen positiven/negativen Parameter zurück
num = neue Zahl(num);
If (Math.random()          num = -num;
Rückgabenummer;
}

setInterval() oder setTimeOut() Timer-Funktion, die Parameter übergibt

Code kopieren Der Code lautet wie folgt:

var s = 'Ich bin ein Parameter';
Funktion fn(args) {
console.log(args);
}
var a = setInterval(fn(s),100); // xxxxxx Fehler xxxxx
var b = setInterval(function(){ // Richtig, verwenden Sie eine anonyme Funktion, um die zeitgesteuerte Funktion aufzurufen
fn(s);
}, 100);

setInterval() oder setTimeOut() Timer ruft rekursiv

auf

Code kopieren Der Code lautet wie folgt:

var s = true;
Funktion fn2(a, b){                // Schritt 3
Wenn (s) {
         clearInterval(a);
         clearInterval(b);
}
};
function fn(a){ // Schritt 2
var b = setInterval(function(){
              fn2(a, b) // Zwei Timer übergeben
}, 200)
};
var a = setInterval(function(){ // Schritt 1
fn(a); // b stellt den Timer selbst dar, der als Sitzparameter
übergeben werden kann }, 100);

Zeichenfolge in Zahl umwandeln

Code kopieren Der Code lautet wie folgt:

// Keine neue Zahl (String) oder Zahl (String) erforderlich. Subtrahieren Sie einfach Null von der Zeichenfolge
var str = '100'; // str: String
var num = str - 0;// num: Zahl

Nullwerturteil

Code kopieren Der Code lautet wie folgt:

var s = ''; // Leere Zeichenfolge
if(!s) // Die leere Zeichenfolge wird standardmäßig in Boolean false konvertiert und kann direkt in die Urteilsanweisung
geschrieben werden if(s != null) // Aber leere Zeichenfolge != null
if(s != undefiniert) // Leerer String auch != undefiniert

IE-Browser parseInt()-Methode

Code kopieren Der Code lautet wie folgt:

// Die folgende Konvertierung ist 0 im IE und 1 in anderen Browsern. Dies hängt mit dem Basissystem zusammen, das der IE-Browser zur Interpretation von Zahlen verwendet
var iNum = parseInt(01);
// Daher ist die kompatible Schreibmethode
var num = parseInt(new Number(01));

Firebug debuggt bequem JS-Code

Code kopieren Der Code lautet wie folgt:

//Firebug verfügt über ein integriertes Konsolenobjekt, das integrierte Methoden zum Anzeigen von Informationen bereitstellt
/**
* 1: console.log(), das als Ersatz für alarm() oder document.write() verwendet werden kann, unterstützt Platzhalterausgabe, Zeichen (%s), Ganzzahlen (%d oder %i), Gleitkommazahlen (%f). ) und Objekt (%o). Zum Beispiel: console.log("%d Jahr %d Monat %d Tag", 2011,3,26)
*2: Wenn zu viele Informationen vorhanden sind, können diese in Gruppen angezeigt werden. Die verwendeten Methoden sind console.group() und console.groupEnd()
*3: console.dir() kann alle Eigenschaften und Methoden eines Objekts
anzeigen * 4: console.dirxml() wird verwendet, um den HTML/XML-Code anzuzeigen, der in einem Knoten der Webseite
enthalten ist * 5: console.assert()-Behauptung, wird verwendet, um zu bestimmen, ob ein Ausdruck oder eine Variable wahr ist
* 6: console.trace() wird verwendet, um den Aufruf-Trace der Funktion
zu verfolgen * 7: console.time() und console.timeEnd(), werden verwendet, um die Laufzeit des Codes
anzuzeigen * 8: Die Leistungsanalyse (Profiler) besteht darin, die Laufzeit jedes Teils des Programms zu analysieren und herauszufinden, wo der Engpass liegt. Die verwendete Methode ist console.profile()....fn....console.profileEnd( )
​*/

Ermitteln Sie schnell die aktuelle Uhrzeit in Millisekunden

Code kopieren Der Code lautet wie folgt:

// t == Aktueller Millisekundenwert des Systems, Grund: Der Vorzeichenoperator ruft die valueOf()-Methode von Date auf.
var t = neues Datum();

Dezimalstellen schnell ermitteln

Code kopieren Der Code lautet wie folgt:

// x == 2, die folgenden x-Werte sind alle 2, negative Zahlen können auch konvertiert werden
var x = 2,00023 |. 0;
// x = '2.00023' |. 0;

Vertauschen Sie die Werte zweier Variablen (es wird keine Zwischengröße verwendet)

Code kopieren Der Code lautet wie folgt:

var a = 1;
var b = 2;
a = [b, b=a][0]
alarm(a '_' b) // Ergebnis 2_1, die Werte von a und b wurden vertauscht.

Logischer ODER-Operator '||'

Code kopieren Der Code lautet wie folgt:

// b ist nicht null: a=b, b ist null: a=1.
var a = b ||. 1;
// Die häufigere Verwendung besteht darin, Parameter an eine Plug-in-Methode zu übergeben und das Ereigniszielelement abzurufen: event = event || window.event
// IE hat ein window.event-Objekt, FF jedoch nicht.

Nur ​​Methodenobjekte haben Prototypattribute

Code kopieren Der Code lautet wie folgt:

// Die Methode verfügt über das Prototypattribut des Objektprototyps, aber die Originaldaten haben dieses Attribut nicht, z. B. var a = 1, a hat nicht das Prototypattribut
function Person() {} // Personenkonstruktor
Person.prototype.run = function() { Alert('run...'); } // Prototyp-Ausführungsmethode
Person.run(); // Fehler
var p1 = new Person(); // Nur bei Verwendung des neuen Operators wird die Prototyp-Ausführungsmethode p1
zugewiesen p1.run(); // ausführen...

Schnell den Wochentag ermitteln

Code kopieren Der Code lautet wie folgt:

// Berechnen Sie den Wochentag, an dem die aktuelle Systemzeit
ist var Week = „Heute ist: Woche“ „Tag eins, zwei, drei, vier, fünf, sechs“.charat(new date().getDay());

Abschlussfehler

Code kopieren Der Code lautet wie folgt:

/**
* Abschluss: Jeder js-Methodenkörper kann als Abschluss bezeichnet werden. Dies geschieht nicht nur, wenn eine Inline-Funktion auf einen Parameter oder ein Attribut einer externen Funktion verweist.
* Es verfügt über einen unabhängigen Bereich, in dem es mehrere Unterbereiche geben kann (d. h. verschachtelte Methoden). Am Ende ist der Abschlussbereich der Bereich der äußersten Methode
* Es enthält seine eigenen Methodenparameter und die Methodenparameter aller eingebetteten Funktionen. Wenn also eine eingebettete Funktion extern eine Referenz hat, ist der Referenzbereich der (oberste) Methodenbereich, in dem sich die referenzierende Funktion befindet
​*/
Funktion a(x) {
Funktion b(){
Alert(x); // Verweis auf externe Funktionsparameter
}
Geben Sie b;
zurück }
var run = a('run...');
// Durch die Erweiterung des Geltungsbereichs können die Variablen der externen Funktion a referenziert und angezeigt werden
run(); // alarm(): run..

Adressparameterzeichenfolge abrufen und regelmäßig aktualisieren

Code kopieren Der Code lautet wie folgt:

// Fragezeichen erhalten? Der folgende Inhalt enthält Fragezeichen
var x = window.location.search
// Den Inhalt nach der Polizeinummer # abrufen, einschließlich der #-Nummer
var y = window.location.hash
// Verwenden Sie den Timer, um die Webseite automatisch zu aktualisieren
window.location.reload();

Null und undefiniert

Code kopieren Der Code lautet wie folgt:

/**
* Der Typ „Undefiniert“ hat nur einen Wert, der undefiniert ist. Wenn eine deklarierte Variable nicht initialisiert wurde, ist der Standardwert der Variablen undefiniert.
* Der Null-Typ hat auch nur einen Wert, nämlich null. Null wird verwendet, um ein Objekt darzustellen, das noch nicht existiert. Es wird oft verwendet, um anzuzeigen, dass eine Funktion versucht, ein nicht existierendes Objekt zurückzugeben.
* ECMAScript geht davon aus, dass undefiniert von null abgeleitet ist, sodass sie als gleich definiert sind.
* Wenn wir jedoch in manchen Fällen zwischen diesen beiden Werten unterscheiden müssen, was sollten wir dann tun? Sie können die folgenden zwei Methoden verwenden
* Bei der Beurteilung ist es am besten, bei der Beurteilung, ob ein Objekt einen Wert hat, die starke Typbeurteilung „===“ zu verwenden.
​*/
var a;
Alert(a === null); // false, weil a kein leeres Objekt ist
Alert(a === undefiniert); // true, da a nicht initialisiert ist, ist der Wert undefiniert
// Erweiterung
Alert(null == undefiniert); // true, da der Operator „==“ eine Typkonvertierung durchführt,
//Ähnlich
alarm(1 == '1'); // true
warning(0 == false); // true, false werden in den Zahlentyp 0
konvertiert

Fügen Sie der Methode dynamisch Parameter hinzu

Code kopieren Der Code lautet wie folgt:

// Methode a hat einen weiteren Parameter 2
Funktion a(x){
var arg = Array.prototype.push.call(arguments,2);
alarm(arguments[0] '__' arguments[1]);
}

Angepasster SELECT-Rahmenstil

Code kopieren Der Code lautet wie folgt:








Die einfachste Farbpalette

Code kopieren




Funktion, Objekt ist Array?

Code kopieren

Der Code lautet wie folgt:

var anObject = {}; //一個物件
anObject.aProperty = “Property of object”; //物件的一個屬性
anObject.aMethod = function(){alert(“Method of object”)}; //物件的一個方法
//主要看下面:
alert(anObject[“aProperty”]); //可以將物件當數組以屬性名稱作為下標來存取屬性
anObject[“aMethod”](); //可以將物件作為數組以方法名稱作為下標來呼叫方法
for( var s in anObject) //遍歷物件的所有屬性和方法進行迭代化處理
alert(s ” is a ” typeof(anObject[s]));
// 同樣對於function類型的物件也是一樣:
var aFunction = function() {}; //一個函數
aFunction.aProperty = “Property of function”; //函數的一個屬性
aFunction.aMethod = function(){alert(“Method of function”)}; //函數的一個方法
//主要看下面:
alert(aFunction[“aProperty”]); //可以將函數當數組以屬性名稱作為下標來存取屬性
aFunction[“aMethod”](); //可以將函數當數組以方法名稱作為下標來呼叫方法
for( var s in aFunction) //遍歷函數的所有屬性和方法進行迭代化處理
alert(s ” is a ” typeof(aFunction[s]));

複製程式碼 程式碼如下:

/**
 * 是的,物件和函數可以像數組一樣,用屬性名或方法名作為下標來存取並處理。
 * 那麼,它到底該算是數組呢,還是算對象?我們知道,數組應該算是線性資料結構,線性資料結構一般有一定的規律,適合進行統一的批量迭代操作等,有點像波。
 * 而物件是離散資料結構,適合用來描述分散的和個人化的東西,有點像粒子。
 * 因此,我們也可以這樣問:JavaScript 裡的物件到底是波還是粒子?如果存在對象量子論,那麼答案一定是:波粒二象性!
 * 因此,JavaScript裡的函數和物件既有物件的特徵也有陣列的特徵。這裡的陣列稱為“字典”,一種可以任意伸縮的名稱值對兒的集合。其實, object和function的內部實作就是一個字典結構,但這種字典結構卻透過嚴謹而精巧的語法表現出了豐富的外觀。正如量子力學在某些地方用粒子來 解釋和處理問題,而在另一些地方卻用波來解釋和處理問題。你也可以在需要的時候,自由選擇用物件還是陣列來解釋和處理問題。只要善於掌握 JavaScript 的這些奇妙特性,就可以寫出許多簡潔而強大的程式碼來。
 */

點選空白處能觸發某一元素關閉/隱藏

複製程式碼 程式碼如下:

/**
 * 有時頁面有個下拉式選單或什麼的效果,需要使用者點擊空白處或點選其他元素時將其隱藏
 * 可用一個全域document點選事件來觸發
 * @param {Object} "目標物件"
 */
$(document).click(function(e){
    $("目標物件").hide();
});
/**
 * 但有一個缺點就是當你點選該元素又想讓他顯示
 * 如果你不及時阻止事件冒泡至全域出發document物件點擊時,上面方法就會執行
 */
$("目標物件").click(function(event){
    event = event || window.event;
    event.stopPropagation(); // 點選目標物件時,及時阻止事件冒泡
    $("目標物件").toggle();
});

以上都是個人整理的一些常用的javascript小方法,記錄下來方便自己開發時直接拿來使用,這裡也推薦給有需要的小伙伴。

Stellungnahme
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
Verständnis der JavaScript -Engine: ImplementierungsdetailsVerständnis der JavaScript -Engine: ImplementierungsdetailsApr 17, 2025 am 12:05 AM

Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.

Python vs. JavaScript: Die Lernkurve und BenutzerfreundlichkeitPython vs. JavaScript: Die Lernkurve und BenutzerfreundlichkeitApr 16, 2025 am 12:12 AM

Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.

Python gegen JavaScript: Community, Bibliotheken und RessourcenPython gegen JavaScript: Community, Bibliotheken und RessourcenApr 15, 2025 am 12:16 AM

Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.

Von C/C nach JavaScript: Wie alles funktioniertVon C/C nach JavaScript: Wie alles funktioniertApr 14, 2025 am 12:05 AM

Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.

JavaScript -Engines: Implementierungen vergleichenJavaScript -Engines: Implementierungen vergleichenApr 13, 2025 am 12:05 AM

Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.

Jenseits des Browsers: JavaScript in der realen WeltJenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AM

Zu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.

Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen

So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Dieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen die Rollenbasis einhalten

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools