Hier einige JavaScript Tricks. Vielleicht kennt ihr schon den ein oder anderen.
Trick 1: Slice call
Sie können eine Array-Objektmethode mit den Slice- und Aufrufmethoden (
Array.prototype.slice.call() oder
[].slice.call()) kombinieren, um ein Array aus einer Array-ähnlichen Liste zurückzugeben. Eine Array-ähnliche Liste ist eine Liste mit der length Eigenschaft, sowie weiteren numerisch indizierbaren Eigenschaften.
var myobject = {
length: 4,
'0': 'zero',
'1': 'one',
'2': 'two',
'3': 'three'
}
console.log( Array.prototype.slice.call(myobject) );
var myobject = {
length: 4,
'0': 1,
'1': 2,
'2': 3,
'3': 4
}
console.log( [].slice.call(myobject) );
|
oder alternativ könnte man Elemente greifen durch
querySelectorAll zurückgegeben:
var nodesArray = [].slice.call(document.querySelectorAll("div"));
|
Trick 2: Strings können in einem Array wie Mode verwendet werden
console.log( “Nick”[0] === “N” );
console.log( "Nick"[1] === "i" );
|
Trick 3: Wie man ein Array kopiert
var newArr = Arr.slice(0);
var newArr = [...oldArr];
|
Trick 4: Erstellen einer einfachen Query-Funktion (Singular)
var $ele = document.querySelector.bind(document);
var myEle = $ele("#id");
|
Trick 5: Erstellen einer einfacheren Query-Funktion (multiple)
Hinweis: Dies ist schneller als das Dokument.
querySelectorAll und
Return ein Live-
nodeList.
var $all = function(selector) {
switch (selector[0]) {
case '#':
return [document.getElementById(selector.slice(1, selector.length))];
case '.':
var classes = selector.replace(/\./g, ' ');
return [].slice.call(document.getElementsByClassName(classes));
default:
return [].slice.call(document.getElementsByTagName(selector));
}
}
console.log($all(".myClass"));
|
Trick 6: Verkürzung console.log()
var cl = console.log.bind(document);
cl('hi');
|
Trick 7: Schalten Nummer Binary
var i = 4;
console.log( i.toString(2) );
|
Trick 8: Teilen Zahl in der Hälfte, abrunden
console.log( 26 >> 1 );
console.log( 27 >> 1 );
console.log( 4 >> 1);
console.log( 5 >> 1);
|
Trick 9: Objekt klonen
var newObj = JSON.parse(JSON.stringify(obj));
var newObj = Object.assign({}, obj);
|
Trick 10: Ist Zahl (n) Teilbar durch x
var n = 56;
console.log(n % 5 == 0);
n = 5;
console.log(n % 5 == 0);
|
Trick 11: Ist Nummer (n) gerade oder ungerade?
var n = 10;
console.log(n % 2 === 0);
var n = 6;
console.log(n & 1 === 0);
|
Trick 12: Voreinstellung wenn Wert nicht vorhanden ist (Kurzschluss)
var a;
a = a || 10;
console.log(a);
var a = 3;
a = a || 10;
console.log(a);
|
Trick 13: Verwenden Sie den Ternäre-Operator, wenn Leistung aus (Wahr oder Falsch)
var a = 2;
(a === 2) ? console.log(a): alert(a);
var a = 3;
(a === 2) ? console.log(a): alert(a);
|
Trick 14: Verwenden Sie "e" für übermäßige Nullen.
console.log( 1e4 );
console.log( 2e1);
|
Trick 15: JavaScript konvertiert Hexadezimal zu einer Zahl automagisch.
console.log(0x1)
console.log(0xa)
console.log(0xff)
|
Trick 16: void (0) kann anstelle von undefiniert verwendet werden
console.log( void(0) === undefined );
|
Trick 17: Konvertiere einen Wert in Boolean mit !
console.log(!!"");
console.log(!!" ");
console.log(!!0);
console.log(!!1);
|
Trick 18: Funktionsdeklarationen können mit Hilfe von! Zeichen, den void-Bezeichner oder durch Umhüllen der Funktion in Klammern.
Sobald ein Ausdruck aktiviert ist, kann eine Funktion aufgerufen werden, indem sie Klammern an ihrem Ende platziert.
!function(x) { console.log(x); }(1);
void function(x){console.log(x); }(3);
(function(x) { console.log(x); } )(5);
|
Trick 19: Destructuring
Sie können Informationen aus einem Objekt herausziehen, indem Sie Ihre Parameter auf die gleichen Werte wie die Objektschlüsselnamen einstellen (dies wird als zerstörung
„destructuring“ bezeichnet)
function howOld({name, date}, age) {
console.log(name + " is " + age);
console.log("on " + date);
};
console.log( howOld({name:'tim', date: '11/10/16'}, 13) );
var externalObj = {
name: 'john',
date: '06/06/06'
}
console.log( howOld(externalObj, 66) );
|
Trick 20: Deklarieren von Standard-Funktionsparameter
function whoAmI(name = 'Nick', job ='web-Entwickler') {
console.log(name + ' der ' + job);
}
whoAmI();
whoAmI('nick', 'entwickler');
|
Trick 21: Sie können die .call()-Methode einer Funktion verwenden, um einen Aufruf dieser Funktion mit einem angegebenen Kontext und Argumenten auszuführen.
function.call(this context, arguments);
|
Wir können dies verwenden, um einen Workaround zu erstellen und permanente Werte einer Funktion zu übergeben, die wir nicht neu schreiben wollen.
Als Beispiel:function add(x, y) {
return x + y;
}
function add3(y) {
return add.call(this, 3, y);
}
console.log(add(2, 5));
console.log(add3(6));
|
Trick 22: Einzel-parameter-Fat-Arrow-Deklarationen:
Wenn Sie eine Fettpfeil-Funktion mit einem einzelnen Parameter übergeben, müssen Sie keine Klammern um ihn herum schreiben.
var newFunction = text => console.log(text);
var newFunction = (name, text) => console.log(name + ': ' + text);
|
Dies funktioniert auch, wenn Sie eine Fat-Arrow-Funktion als Parameter übergeben.
arr.map(item => console.log(item));
arr.map( (item, index) => console.log(item + ' index ' + index) );
|
Denken Sie daran, dass eine Einschränkung der
Fat Arrow Funktion ist, dass sie nicht binden einen neuen "this" Kontext. Sie behalten den " this " Kontext, von dem sie aufgerufen werden.
Trick 23: Bestimmen Sie eine True- oder False-Anweisung aus einer String-Methode indexOf.
var myString = "aloha peeps";
console.log( !!~(myString.indexOf('aloha')) );
console.log( !!~(myString.indexOf('hello')) );
|
Ruft ein Array aller Links im Dokument ab.
var allLinks = document.links;
|
Styling aus dem Browser
var ele = document.getElementById("eleID");
var fontSize = getComputedStyle(ele).getPropertyValue("font-size");
console.log( fontSize );
|
(Diese ist eigentlich eine Regel als alles andere)
Verwenden
document.write aus irgendeinem Grund nicht.
var otherText = document.createTextNode('whodunnit');
document.body.appendChild(otherText);
var myEle = document.createElement("H1");
var myText = document.createTextNode('blah blah');
myEle.appendChild(myText);
document.body.appendChild(myEle);
|
Kommunikation mit einem
IFrame Wenn Sie Informationen zwischen einem
IFrame hin und her senden möchten.
Sie können tatsächlich so lange Ihr Hauptfenster eine Nachricht aus dem
IFrame senden, wie Sie nicht die Regeln der Cross-Site-Scripting brechen.
parent.postMessage('this is a message', '*')
|
Um vom Hauptfenster aus dem Containerfenster zu hören, fügen Sie einfach einen
Event-Listener zum Fenster hinzu.
window.addEventListener("message", function(e){
console.log(e.data);
});
|
Der obige Code druckt den Inhalt der Nachricht an Ihre Konsole.
Durch das Analysieren des Inhalts der Nachricht können Sie eine Funktionalität erstellen, die sowohl mit dem Hauptfenster als auch mit dem
IFrame arbeitet.
Methoden zum Navigieren des DOM-Baums: ele.parentNode
ele.firstChild
ele.nextSibling
ele.previousSibling
|
ele.replaceChild(x, y)
ele.removeChild(x)
|
ele.cloneNode(false);
ele.cloneNode(true);
ele.importNode(node);
|
ele.nodeName;
ele.nodeType;
ele.hasChildNodes();
ele.childNodes;
ele.textContent;
ele.nodeValue;
ele.contains(x);
|
No comments:
Post a Comment