JavaScript kann viele tolle Dinge. Dieser Artikel stellt über 50 praktische Toolfunktionen vor, die Ihnen helfen, Ihre Arbeitseffizienz zu verbessern und Ihren Code zu debuggen. 1. isStatic: Überprüfen Sie, ob die Daten mit Ausnahme des Symbols Originaldaten sind. Funktion ist statisch (Wert) { zurückkehren ( Typ des Wertes === 'Zeichenfolge' || Typ des Wertes === 'Zahl' || Typ des Wertes === 'Boolesch' || Typ des Wertes === 'undefiniert' || Wert === null ) } 2. isPrimitive: Überprüfen Sie, ob es sich bei den Daten um primitive Daten handelt Funktion istPrimitiv(Wert) { returniere isStatic(Wert) || Typ des Wertes === 'Symbol' } 3. isObject: Bestimmen Sie, ob es sich bei den Daten um Daten vom Referenztyp handelt (zum Beispiel: Array, Funktion, Objekt, Regexe, neue Nummer (), neue Zeichenfolge ()). Funktion istObjekt(Wert) { let Typ = Typ des Wertes; Rückgabewert != null && (Typ == ‚Objekt‘ || Typ == ‚Funktion‘); } 4. isObjectLike: Überprüft, ob der Wert ein Klassenobjekt ist. Wenn ein Wert der Klasse „Objekt“ angehört, darf er nicht null sein und das Ergebnis nach typeof ist „Objekt“. Funktion istObjektähnlich(Wert) { Rückgabewert != null und Typ des Wertes == „Objekt“; } 5. getRawType: Ruft den Datentyp ab. Das zurückgegebene Ergebnis ist „Zahl“, „Zeichenfolge“, „Objekt“, „Array“ usw. Funktion getRawType(Wert) { gibt Object.prototype.toString.call(Wert).slice(8, -1) zurück } // getoRawType([]) ⇒ Array 6. isPlainObject: Bestimmen Sie, ob die Daten vom Typ „Objekt“ sind Funktion istEinfachesObjekt(Objekt) { returniere Object.prototype.toString.call(obj) === '[Objekt Objekt]' } 7. isArray: Bestimmen Sie, ob die Daten ein Array-Typ sind (kompatibles Schreiben von Array.isArray) Funktion istArray(arr) { gibt Object.prototype.toString.call(arr) === '[Objekt-Array]' zurück } //isArray auf ArrayArray einbinden.isArray = Array.isArray || isArray; 8. isRegExp: Bestimmen Sie, ob die Daten ein reguläres Objekt sind Funktion isRegExp(Wert) { gibt Object.prototype.toString.call(Wert) === '[Objekt RegExp]' zurück } 9. isDate: Bestimmen Sie, ob die Daten ein Zeitobjekt sind Funktion istDatum(Wert) { returniere Object.prototype.toString.call(Wert) === '[Objekt Datum]' } 10. isNative: Bestimmen Sie, ob der Wert eine integrierte Funktion des Browsers ist Der Hauptcodeblock nach der integrierten Funktion toString ist [nativer Code], während die nicht integrierte Funktion zugehöriger Code ist, sodass nicht integrierte Funktionen kopiert werden können (nach toString werden Kopf und Ende abgeschnitten und dann aus der Funktion konvertiert). Funktion isNative(Wert) { Rückgabetyp des Wertes === 'Funktion' && /nativer Code/.test(value.toString()) } 11. isFunction: Überprüfen Sie, ob der Wert eine Funktion ist Funktion istFunktion(Wert) { gibt Object.prototype.toString.call(Wert) === '[Objektfunktion]' zurück } 12. isLength: Überprüft, ob der Wert eine gültige arrayähnliche Länge hat Funktion istLänge(Wert) { Rückgabetyp des Wertes == „Zahl“ und Wert > -1 und Wert % 1 == 0 und Wert <= Zahl.MAX_SAFE_INTEGER; } 13. isArrayLike: Überprüfen Sie, ob der Wert ein Array-ähnliches Wenn ein Wert als arrayähnlich betrachtet wird, handelt es sich nicht um eine Funktion und value.length ist eine Ganzzahl größer oder gleich 0 und kleiner oder gleich Number.MAX_SAFE_INTEGER. Auch hier werden Strings arrayähnlich behandelt. Funktion istArrayLike(Wert) { Rückgabewert != null && isLength(value.length) && !isFunction(value); } 14. isEmpty: Überprüfen Sie, ob der Wert leer ist Wenn es null ist, geben Sie direkt „true“ zurück. Wenn es ein arrayähnliches Objekt ist, bestimmen Sie die Datenlänge. Wenn es ein Object-Objekt ist, bestimmen Sie, ob es Attribute hat. Wenn es andere Daten sind, geben Sie direkt „false“ zurück (Sie können stattdessen auch „true“ zurückgeben). Funktion istLeer(Wert) { wenn (Wert == null) { gibt true zurück; } wenn (istArrayLike(Wert)) { return !Wert.Länge; } sonst wenn (isPlainObject(Wert)) { für (let Schlüsselwert) { if (hasOwnProperty.call(Wert, Schlüssel)) { gibt false zurück; } } } gibt false zurück; } 15. zwischengespeichert: Speicherfunktion: Berechnungsergebnisse der Cache-Funktion Funktion zwischengespeichert(fn) { Lassen Sie den Cache = Objekt.erstellen(null); Rückgabefunktion cachedFn(str) { lass hit = cache[str]; Treffer zurückgeben || (Cache[str] = fn(str)) } } 16. camelize: horizontale Linien in Camel Case umwandeln sei camelizeRE = /-(\w)/g; Funktion Kamelize (str) { return str.replace(camelizeRE, Funktion(_, c) { gibt c zurück? c.toUpperCase(): ''; }) } //ab-cd-ef ==> abCdEf //Verwende die Speicherfunktion let _camelize = cached(camelize) 17. Bindestrich: Wandeln Sie Camel-Case-Namen in Bindestrich-Namen um: Teilen Sie die Zeichenfolge, verbinden Sie sie mit - und konvertieren Sie sie in Kleinbuchstaben sei hyphenateRE = /\B([AZ])/g; Funktion Bindestrich(str){ return str.replace(hyphenateRE, '-$1').toLowerCase() } //abCd ==> ab-cd //Verwenden der gespeicherten Funktion let _hyphenate = cached(hyphenate); 18. capitalize: Großschreiben Sie das erste Zeichen einer Zeichenfolge Funktion Großschreibung(str) { return str.charAt(0).toUpperCase() + str.slice(1) } //abc ==> Abc //Verwenden der Memoized-Funktion let _capitalize = cached(capitalize) 19. Erweitern: Attribute in das Zielobjekt mischen Funktion erweitern(auf, _form) { für (let-Schlüssel in _form) { zu[Schlüssel] = _form[Schlüssel]; } zurück zu } 20. Object.assign: Objekteigenschaftskopie, oberflächliche Kopie Objekt.assign = Objekt.assign || Funktion() { if (arguments.length == 0) throw new TypeError('Undefined oder null kann nicht in Objekt konvertiert werden'); let ziel = argumente[0], args = Array.prototype.slice.call(Argumente, 1), Schlüssel; args.forEach(Funktion(Element) { für (Element eingeben) { item.hasOwnProperty(Schlüssel) && (Ziel[Schlüssel] = Element[Schlüssel]) } }) Rücklaufziel } Verwenden Sie Object.assign, um ein Objekt zu klonen: Lassen Sie Klon = Objekt.assign({}, Ziel); Einfaches Deep Cloning kann JSON.parse() und JSON.stringify() verwenden. Diese beiden APIs analysieren JSON-Daten, sodass sie nur primitive Typen, Arrays und Objekte außer Symbolen analysieren können. let clone = JSON.parse( JSON.stringify(Ziel) ) 21. Klonen: Daten klonen, tiefes Klonen ist möglich Hier sind die Klonregeln für primitive Typen, Zeit, regulär, Fehler, Array und Objekt. Andere können Sie selbst hinzufügen Funktion Klon(Wert, tief) { wenn (istPrimitiv(Wert)) { Rückgabewert } if (isArrayLike(value)) { // ist ein arrayähnlicher Wert = Array.prototype.slice.call(vall) Rückgabewert.map(Element => tief ? Klon(Element, tief) : Element) } sonst wenn (isPlainObject(value)) { //ist ein Objekt let target = {}, key; für (Wert eingeben) { value.hasOwnProperty(Schlüssel) && ( Ziel[Schlüssel] = tief ? Klon(Wert[Schlüssel], Wert[Schlüssel] )) } } let Typ = getRawType(Wert); Schalter(Typ) { Fall 'Datum': Fall 'RegExp': Fall „Fehler“: Wert = neues Fenster[Typ](Wert); Unterbrechung; } Rückgabewert } 22. Identifizieren Sie verschiedene Browser und Plattformen //Die Betriebsumgebung ist der Browser let inBrowser = typeof window !== 'undefined'; //Die Betriebsumgebung ist WeChat let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform; let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase(); //Browser-UA-Beurteilung let UA = inBrowser && window.navigator.userAgent.toLowerCase(); let isIE = UA && /msie|trident/.test(UA); let isIE9 = UA && UA.indexOf('msie 9.0') > 0; let isEdge = UA && UA.indexOf('edge/') > 0; let isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android'); let isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios'); let isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge; 23. getExplorerInfo: Browserinformationen abrufen Funktion getExplorerInfo() { lass t = navigator.userAgent.toLowerCase(); return 0 <= t.indexOf("msie") ? { //dh < 11 Typ: "IE", Version: Nummer(t.match(/msie ([\d]+)/)[1]) } : !!t.match(/trident\/.+?rv:(([\d.]+))/) ? { // zB 11 Typ: "IE", Version: 11 } : 0 <= t.indexOf("Kante") ? { Typ: "Kante", Version: Nummer(t.match(/edge\/([\d]+)/)[1]) } : 0 <= t.indexOf("Firefox") ? { Typ: "Firefox", Version: Nummer(t.match(/firefox\/([\d]+)/)[1]) } : 0 <= t.indexOf("chrome") ? { Typ: "Chrome", Version: Nummer(t.match(/chrome\/([\d]+)/)[1]) } : 0 <= t.indexOf("opera") ? { Typ: "Opera", Version: Nummer(t.match(/opera.([\d]+)/)[1]) } : 0 <= t.indexOf("Safari") ? { Typ: "Safari", Version: Nummer(t.match(/version\/([\d]+)/)[1]) } : { Typ: t, Version: -1 } } 24. isPCBroswer: Überprüfen Sie, ob es sich um den PC-Browsermodus handelt Funktion istPCBroswer() { lass e = navigator.userAgent.toLowerCase() , t = "ipad" == e.match(/ipad/i) , i = "iphone" == e.match(/iphone/i) , r = "midp" == e.match(/midp/i) , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i) , a = "ucweb" == e.match(/ucweb/i) , o = "Android" == e.match(/Android/i) , s = "Windows CE" == e.match(/Windows CE/i) , l = "Windows Mobile" == e.match(/Windows Mobile/i); Rückgabe !(t || i || r || n || a || o || s || l) } 25. unique: Entfernen Sie Duplikate aus einem Array und geben Sie ein neues Array zurück Funktion einzigartig(arr){ if(!isArrayLink(arr)){ //kein array-ähnliches Objekt return arr } let ergebnis = [] lass objarr = [] let obj = Objekt.erstellen(null) arr.fürJeden(Element => { if(isStatic(item)){//Dies sind die Rohdaten, außer dem Symbol let key = item + '_' + getRawType(item); wenn(!obj[Schlüssel]){ obj[Schlüssel] = true Ergebnis.push(Element) } }else{//Referenztyp und Symbol wenn (!objarr.includes(item)){ objarr.push(Element) Ergebnis.push(Element) } } }) Ergebnis zurückgeben } 26. Einfache Implementierung von Set Fenster.Set = Fenster.Set || (Funktion () { Funktion Set(arr) { diese.Artikel = arr? einzigartig(arr) : []; this.size = this.items.length; // Array-Größe} Prototyp = { hinzufügen: Funktion (Wert) { // Ein Element hinzufügen. Wenn das Element bereits vorhanden ist, überspringen Sie es und geben Sie die Set-Struktur selbst zurück. wenn (!dieser.hat(Wert)) { this.items.push(Wert); diese.Größe++; } gib dies zurück; }, löschen: Funktion () { // Alle Mitglieder löschen, kein Rückgabewert. diese.items = [] diese.Größe = 0 }, löschen: Funktion (Wert) { //Löschen Sie einen Wert und geben Sie einen booleschen Wert zurück, um anzuzeigen, ob das Löschen erfolgreich war. gib dies zurück.items.some((v, i) => { wenn(v === Wert){ diese.items.splice(i,1) returniere wahr } return false }) }, hat: Funktion (Wert) { //Gibt einen Booleschen Wert zurück, der angibt, ob der Wert ein Mitglied des Sets ist. gib this.items.some(v => v === Wert) zurück }, Werte: Funktion () { gib diese.Artikel zurück }, } Set zurückgeben; }()); 27. Wiederholung: Generiert eine wiederholte Zeichenfolge bestehend aus n Zeichenfolgen, die geändert werden kann, um ein Array usw. zu füllen. Funktion wiederholen(str, n) { lass res = ''; während(n) { wenn(n % 2 === 1) { res += str; } wenn(n > 1) { str += str; } n >>= 1; } Rückgabewert }; //wiederholen('123',3) ==> 123123123 28. dateFormater: Zeit formatieren Funktion dateFormater(formater, t){ lass Datum = t? neues Datum(t) : neues Datum(), Y = date.getFullYear() + '', M = date.getMonth() + 1, D = datum.getDate(), H = date.getHours(), m = date.getMinutes(), s = date.getSeconds(); Rückgabeformatierer.Ersetzen(/JJJJ|jjjj/g,J) .ersetzen(/YY|yy/g,Y.substr(2,2)) .replace(/MM/g,(M<10?'0':'') + M) .ersetzen(/DD/g,(D<10?'0':'') + D) .replace(/HH|hh/g,(H<10?'0':'') + H) .replace(/mm/g,(m<10?'0':'') + m) .replace(/ss/g,(s<10?'0':'') + s) } // dateFormater('JJJJ-MM-TT HH:mm', t) ==> 2019-06-26 18:30 // dateFormater('JJJJMMTTHHmm', t) ==> 201906261830 29. dateStrForma: Konvertiert eine angegebene Zeichenfolge von einem Zeitformat in ein anderes. Das Format von From sollte der Position von str entsprechen. Funktion dateStrForma(str, von, bis){ //'20190626' 'JJJJMMTT' 'JJJJ Jahr MM Monat TT Tag' str += '' sei Y = '' wenn(~(Y = von.indexOf('YYYY'))){ Y = str.substr(Y, 4) zu = zu.ersetzen(/JJJJ|jjjj/g,J) }sonst wenn(~(Y = from.indexOf('YY'))){ Y = str.substr(Y, 2) zu = zu.ersetzen(/YY|yy/g,Y) } sei k,i ['M','D','H','h','m','s'].fürEach(s => { i = von.indexOf(s+s) k = ~i ? str.substr(i, 2) : '' zu = zu.ersetzen(s+s, k) }) zurück zu } // dateStrForma('20190626', 'JJJJMMTT', 'JJJJ Jahr MM Monat TT Tag') ==> 26. Juni 2019 // dateStrForma('121220190626', '----JJJJMMTT', 'JJJJ Jahr MM Monat TT Tag') ==> 26. Juni 2019 // dateStrForma('20190626', 'JJJJ Jahr MM Monat TT Tag', 'JJJJMMTT') ==> 20190626 // Sie können hierfür auch reguläre Ausdrücke verwenden //'2019-06-26'.replace(/(\d{4})year(\d{2})month(\d{2})day/, '$1-$2-$3') ==> 2019-06-26 30. getPropByPath: Objekteigenschaften basierend auf dem String-Pfad abrufen: 'obj[0].count' Funktion getPropByPath(Objekt, Pfad, strikt) { lass tempObj = obj; Pfad = Pfad.Ersetzen(/\[(\w+)\]/g, '.$1'); //Konvertiere [0] in .0 Pfad = Pfad.replace(/^\./, ''); //Entfernen Sie das führende . let keyArr = path.split('.'); // Schneiden gemäß . let i = 0; für (let len = keyArr.length; i < len - 1; ++i) { wenn (!tempObj && !strict) abbrechen; sei Schlüssel = SchlüsselArr[i]; if (Schlüssel in tempObj) { tempObj = tempObj[Schlüssel]; } anders { if (strict) {//Strict-Modus einschalten, kein entsprechender Schlüsselwert gefunden, einen Fehler ausgeben throw new Error('bitte übertrage dem Formularelement einen gültigen Prop-Pfad!'); } brechen; } } zurückkehren { o: tempObj, //Originaldaten k: keyArr[i], //Schlüsselwert v: tempObj ? tempObj[keyArr[i]] : null //Wert, der dem Schlüsselwert entspricht}; }; 31. GetUrlParam: Holt den URL-Parameter und gibt ein Objekt zurück Funktion GetUrlParam(){ Lassen Sie URL = document.location.toString(); Lassen Sie arrObj = url.split("?"); let params = Objekt.erstellen(null) wenn (arrObj.length > 1){ arrObj = arrObj[1].split("&"); arrObj.fürJeden(item=>{ Artikel = Artikel.split("="); Parameter[Element[0]] = Element[1] }) } Rückgabeparameter; } // ?a=1&b=2&c=3 ==> {a: "1", b: "2", c: "3"} 32. downloadFile: Base64-Datenexportdatei, Dateidownload Funktion downloadFile(Dateiname, Daten) { let DownloadLink = document.createElement('a'); wenn (DownloadLink) { Dokument.body.appendChild(DownloadLink); DownloadLink.style = 'Anzeige: keine'; DownloadLink.download = Dateiname; DownloadLink.href = Daten; wenn (Dokument.Ereignis erstellen) { let DownloadEvt = document.createEvent('Mausereignisse'); DownloadEvt.initEvent('klicken', wahr, falsch); DownloadLink.dispatchEvent(DownloadEvt); } sonst wenn (Dokument.createEventObject) { DownloadLink.fireEvent('beimKlick'); } sonst wenn (Typ von DownloadLink.onclick == 'Funktion') { DownloadLink.onclick(); } Dokument.body.removeChild(DownloadLink); } } 33. toFullScreen: Vollbild Funktion toFullScreen() { lass elem = Dokument.Body; elem.webkitRequestFullScreen ? elem.webkitRequestFullScreen() : elem.mozRequestFullScreen ? elem.mozRequestFullScreen() : elem.msRequestFullscreen ? elem.msRequestFullscreen() : elem.requestFullScreen ? elem.requestFullScreen() : alert("Der Browser unterstützt keinen Vollbildmodus"); } 34. exitFullscreen: Vollbild beenden Funktion exitFullscreen() { let elem = übergeordnetes Dokument; elem.webkitAbbrechenVollbild ? elem.webkitCancelFullScreen() : elem.mozAbbrechenVollbild ? elem.mozCancelFullScreen() : elem.cancelFullScreen ? elem.cancelFullScreen() :elem.msExitFullscreen ? elem.msExitFullscreen() : elem.exitFullscreen ? elem.exitFullscreen() : alert("Wechseln ist fehlgeschlagen. Versuchen Sie, durch Drücken von Esc zu beenden"); } 35. requestAnimationFrame: Fensteranimation Fenster.RequestAnimationFrame = Fenster.RequestAnimationFrame || Fenster.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || fenster.msRequestAnimationFrame || Fenster.oRequestAnimationFrame || Funktion (Rückruf) { //Um setTimeout so nah wie möglich an 60 Bilder pro Sekunde zu bringen, window.setTimeout(callback, 1000 / 60); } window.cancelAnimationFrame = window.cancelAnimationFrame || window.webkitAnimationFrame abbrechen || window.mozAnimationFrame abbrechen || Fenster.msCancelAnimationFrame || window.oAnimationFrame abbrechen || Funktion (ID) { //Um setTimeout so nah wie möglich an 60 Bilder pro Sekunde zu bringen window.clearTimeout(id); } 36. _isNaN: Prüft, ob die Daten ein nicht numerischer Wert sind Funktion _isNaN(v){ zurückgeben !(Typ von v === 'Zeichenfolge' || Typ von v === 'Zahl') || istNaN(v) } 37. max: Finden Sie den Maximalwert von Nicht-NaN-Daten in einem Array Funktion max(arr){ arr = arr.filter(Element => !_isNaN(Element)) gibt arr.length zurück? Math.max.apply(null, arr) : undefiniert } //max([1, 2, '11', null, 'fdf', []]) ==> 11 38. min: Finden Sie den Mindestwert von Nicht-NaN-Daten in einem Array Funktion min(arr){ arr = arr.filter(Element => !_isNaN(Element)) gibt arr.length zurück? Math.min.apply(null, arr) : undefiniert } //min([1, 2, '11', null, 'fdf', []]) ==> 1 39. random: Gibt eine untere/obere Zufallszahl zurück. (unterer und oberer Wert können positiv oder negativ, groß oder klein sein, müssen aber keine NaN-Daten sein) Funktion random(unterer, oberer) { niedriger = +niedriger || 0 oben = +oben || 0 return Math.random() * (oberer - unterer) + unterer; } //zufällig(0, 0,5) ==> 0,3567039135734613 //zufällig(2, 1) ===> 1,6718418553475423 //zufällig(-2, -1) ==> -1,4474325452361945 40. Object.keys: Gibt ein Array aufzählbarer Eigenschaften eines gegebenen Objekts zurück Objekt.Tasten = Objekt.Tasten || Funktionstasten(Objekt) { wenn (Objekt === null || Objekt === undefiniert) { throw new TypeError('Undefined oder null kann nicht in Objekt konvertiert werden'); } lass Ergebnis = []; wenn (istArrayLike(Objekt) || istPlainObject(Objekt)) { für (let-Schlüssel im Objekt) { Objekt.hasOwnProperty(Schlüssel) && (Ergebnis.push(Schlüssel)) } } Ergebnis zurückgeben; } 41. Object.values: Gibt ein Array aller aufzählbaren Eigenschaftswerte eines bestimmten Objekts zurück Objekt.Werte = Objekt.Werte || Funktion Werte(Objekt) { wenn (Objekt === null || Objekt === undefiniert) { throw new TypeError('Undefined oder null kann nicht in Objekt konvertiert werden'); } lass Ergebnis = []; wenn (istArrayLike(Objekt) || istPlainObject(Objekt)) { für (let-Schlüssel im Objekt) { Objekt.hasOwnProperty(Schlüssel) && (Ergebnis.push(Objekt[Schlüssel])) } } Ergebnis zurückgeben; } 42. arr.fill: Füllt das Array mit Werten, beginnend an der Startposition und endend an der Endposition (aber ohne die Endposition) und gibt das ursprüngliche Array zurück Array.prototype.fill = Array.prototype.fill || Funktion füllen(Wert, Start, Ende) { lass ctx = dies lass Länge = ctx.Länge; start = parseInt(start) wenn (isNaN(start)) { Start = 0 }sonst wenn (Start < 0) { Start = -Start > Länge? 0: (Länge + Start); } Ende = parseInt(Ende) wenn(isNaN(Ende) || Ende > Länge){ Ende = Länge }sonst wenn (Ende < 0) { Ende += Länge; } während (Start < Ende) { ctx[start++] = Wert; } ctx zurückgeben; } //Array(3).fill(2) ===> [2, 2, 2] 43. arr.includes: Wird verwendet, um zu bestimmen, ob ein Array einen bestimmten Wert enthält. Wenn ja, gibt es true zurück, andernfalls false. Sie können die Position angeben, an der die Abfrage beginnen soll. Array.prototype.includes = Array.prototype.includes || Funktion umfasst(Wert, Start) { lass ctx = dies; lass Länge = ctx.Länge; start = parseInt(start) wenn(istNaN(Start)) { Start = 0 } sonst wenn (Start < 0) { Start = -Start > Länge? 0: (Länge + Start); } let index = ctx.indexOf(Wert); Rückgabeindex >= Start; } 44. Gibt den Wert des ersten Elements im Array zurück, das den Test besteht (Beurteilung in der Funktion fn). Array.prototype.find = Array.prototype.find || Funktion find(fn, ctx) { ctx = ctx || dies; lass resultieren; ctx.some((Wert, Index, arr), dieserWert) => { returniere fn(Wert, Index, arr) ? (Ergebnis = Wert, wahr) : falsch }) Ergebnis zurückgeben } 45. arr.findIndex: Gibt den Index des ersten Elements im Array zurück, das den Test besteht (beurteilt in der Funktion fn). Array.prototype.findIndex = Array.prototype.findIndex || Funktion findIndex(fn, ctx){ ctx = ctx || dies lass resultieren; ctx.some((Wert, Index, arr), dieserWert) => { returniere fn(Wert, Index, arr) ? (Ergebnis = Index, wahr) : falsch }) Ergebnis zurückgeben } 46. performance.timing: Leistungsanalyse mit performance.timing fenster.onload = funktion() { setzeTimeout(Funktion() { sei t = Leistung.Timing; console.log('DNS-Abfragezeit:' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0)) console.log('TCP-Verbindungszeit:' + (t.connectEnd - t.connectStart).toFixed(0)) console.log('Anforderungsanforderungszeit:' + (t.responseEnd - t.responseStart).toFixed(0)) console.log('Zeitaufwand für das Parsen des DOM-Baums:' + (t.domComplete - t.domInteractive).toFixed(0)) console.log('Zeit des weißen Bildschirms:' + (t.responseStart - t.navigationStart).toFixed(0)) console.log('domready-Zeit: ' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0)) console.log('Ladezeit: ' + (t.loadEventEnd - t.navigationStart).toFixed(0)) wenn (t = Leistung.Speicher) { console.log('Prozentsatz der js-Speichernutzung:' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%') } }) } 47. Bestimmte Tastaturereignisse deaktivieren document.addEventListener('Taste gedrückt', Funktion(Ereignis) { zurückkehren !( 112 == event.keyCode || //F1 deaktivieren 123 == event.keyCode || //F12 deaktivieren event.ctrlKey && 82 == event.keyCode || //Strg+R deaktivieren event.ctrlKey && 18 == event.keyCode || //Strg+N deaktivieren event.shiftKey && 121 == event.keyCode || //Umschalt+F10 deaktivieren event.altKey && 115 == event.keyCode || //Alt+F4 deaktivieren "A" == event.srcElement.tagName && event.shiftKey //Umschalt+Klick auf Tag a deaktivieren || (event.returnValue = false) }); 48. Rechtsklick, Auswahl und Kopieren deaktivieren ['Kontextmenü', 'SelectStart', 'Kopieren'].forEach(Funktion(ev) { document.addEventListener(ev, Funktion(Ereignis) { Rückgabeereignis. Rückgabewert = false; }) }); 49. numAdd - Berechnet die Addition von Zahlen Funktion numAdd(num1, num2) { sei Basisnummer, Basisnummer1, Basisnummer2; versuchen { baseNum1 = num1.toString().split(".")[1].Länge; } fangen (e) { Basisnummer1 = 0; } versuchen { baseNum2 = num2.toString().split(".")[1].Länge; } fangen (e) { Basisnummer2 = 0; } Basiszahl = Math.pow(10, Math.max(Basiszahl1, Basiszahl2)); return (Zahl1 * Basiszahl + Zahl2 * Basiszahl) / Basiszahl; }; 50. numSub - - Berechnen Sie die Subtraktion von Zahlen Funktion numSub(num1, num2) { sei Basisnummer, Basisnummer1, Basisnummer2; let precision; // Präzision try { baseNum1 = num1.toString().split(".")[1].Länge; } fangen (e) { Basisnummer1 = 0; } versuchen { baseNum2 = num2.toString().split(".")[1].Länge; } fangen (e) { Basisnummer2 = 0; } Basiszahl = Math.pow(10, Math.max(Basiszahl1, Basiszahl2)); Präzision = (Basiszahl1 >= Basiszahl2) ? Basiszahl1 : Basiszahl2; return ((Zahl1 * Basiszahl - Zahl2 * Basiszahl) / Basiszahl).toFixed(Präzision); }; 51. numMulti - - Berechnet die Multiplikation von Zahlen Funktion numMulti(num1, num2) { sei Basisnummer = 0; versuchen { Basisnummer += Nummer1.toString().split(".")[1].Länge; } fangen (e) { } versuchen { Basisnummer += Nummer2.toString().split(".")[1].Länge; } fangen (e) { } returniere Zahl(Zahl1.toString().replace(".", "")) * Zahl(Zahl2.toString().replace(".", "")) / Math.pow(10, Basiszahl); }; 52. numDiv - - Berechnet die Division von Zahlen Funktion numDiv(num1, num2) { sei baseNum1 = 0, baseNum2 = 0; sei Basisnummer3, Basisnummer4; versuchen { baseNum1 = num1.toString().split(".")[1].Länge; } fangen (e) { Basisnummer1 = 0; } versuchen { baseNum2 = num2.toString().split(".")[1].Länge; } fangen (e) { Basisnummer2 = 0; } mit (Mathe) { baseNum3 = Zahl(num1.toString().replace(".", "")); baseNum4 = Zahl(num2.toString().replace(".", "")); return (Basiszahl3 / Basiszahl4) * pow(10, Basiszahl2 - Basiszahl1); } }; Damit ist dieser Artikel mit der Zusammenfassung von über 50 praktischen Toolfunktionen in JavaScript abgeschlossen. Weitere relevante Inhalte zu praktischen Toolfunktionen in JavaScript finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: MySQL Slow Query-Optimierung: Die Vorteile von Limit aus Theorie und Praxis
>>: Zusammenfassung der Linux-Befehle zur Dateiverzeichnisverwaltung
Inhaltsverzeichnis Vorwort 1. Welche Variablen we...
Heutzutage erlauben viele Websites nicht das direk...
Inhaltsverzeichnis Wie erstelle ich einen Pod? We...
Inhaltsverzeichnis 1. Routing-Konfiguration 2. Vu...
Löschen einer einzelnen Tabelle: LÖSCHEN AUS Tabe...
Lösung: Setzen Sie den Zielattributwert des Links ...
Lassen Sie mich zunächst die Bedeutung einiger Fe...
Als ich kürzlich Docker zum Bereitstellen einer J...
Ein Hauptmerkmal des WeChat 8.0-Updates ist die U...
Vorwort Vor kurzem war ich damit beschäftigt, ein...
Aufgrund Ihrer Unternehmensstandards gestatten Si...
In diesem Artikel wird beschrieben, wie Sie Docke...
Laden Sie ausländische Bilder mit Alibaba Cloud I...
Überblick Lassen Sie uns einige SQL-Anweisungen z...
Ziel: Erstelle ein Quadrat, dessen Seitenlänge gl...