Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung praktischer nativer APIs in JavaScript_Javascript-Kenntnissen

Zusammenfassung praktischer nativer APIs in JavaScript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:59:001382Durchsuche

Gehe direkt zum Thema

String-Objekt analysieren

Wir alle wissen, dass JavaScript-Objekte in JSON serialisiert und JSON auch in Objekte analysiert werden können. Das Problem besteht jedoch darin, dass die Konvertierung unpraktisch ist, wenn es ein „Ding“ gibt, das weder JSON noch ein Objekt ist entweder eines, dann eval Es kann nützlich sein

var obj = "{a:1,b:2}";  // 看起来像对象的字符串
eval("("+ obj +")")   // {a: 1, b: 2}

Da eval Zeichenfolgenausdrücke ausführen kann und wir das Zeichenfolgenobjekt obj in ein reales Objekt ausführen möchten, müssen wir eval verwenden. Um jedoch zu verhindern, dass eval obj mit {} als Anweisung ausführt, fügen wir ein Paar () außerhalb von obj ein, damit es in einen Ausdruck analysiert werden kann.

& (bitweises UND)

Um festzustellen, ob eine Zahl die n-te Potenz von 2 ist, können Sie sie mit sich selbst minus eins UND mit sich selbst verknüpfen

var number = 4
(number & number -1) === 0 // true

^ (bitweises XOR)

Mit verschiedenen dritten Variablen können Sie die Werte der beiden Variablen austauschen

var a = 4,b = 3
a = a ^ b //  7
b = a ^ b //  4
a = b ^ a //  3

Datum formatieren

Möchten Sie die Zeit nach dem Formatieren erhalten? Jetzt müssen Sie Jahr, Monat, Tag, Stunde, Minute und Sekunde nicht mehr ermitteln, sondern können dies in drei Schritten tun

var temp = new Date();
var regex = /\//g;
(temp.toLocaleDateString() + ' ' + temp.toLocaleTimeString().slice(2)).replace(regex,'-');

// "2015-5-7 9:04:10"

Möchten Sie die formatierte Zeit in ein Zeitobjekt konvertieren? Verwenden Sie direkt den Date-Konstruktor

new Date("2015-5-7 9:04:10");

// Thu May 07 2015 09:04:10 GMT+0800 (CST)

Möchten Sie ein Standardzeitobjekt in einen Unix-Zeitstempel konvertieren? valueOf erledigt es

(new Date).valueOf();

// 1431004132641

Viele Freunde haben mich auch daran erinnert, dass man so schnell den Zeitstempel bekommen kann

neues Datum

Ein Dollar plus

Ein Dollar plus kann String-Zahlen schnell in mathematische Zahlen umwandeln, das heißt

var number = "23" 
typeof number // string
typeof +number // number

Sie können Zeitobjekte in Zeitstempel umwandeln

new Date // Tue May 12 2015 22:21:33 GMT+0800 (CST)
+new Date // 1431440459887

Escaped URI

Sie müssen die URL als Parameter in der Route übergeben, jetzt maskieren Sie sie

var url = encodeURIComponent('http://segmentfault.com/questions/newest')

// "http%3A%2F%2Fsegmentfault.com%2Fquestions%2Fnewest"

Umgekehrte Flucht

decodeURIComponent(url)
// "http://segmentfault.com/questions/newest"


Nummer

Wenn Sie ein paar Dezimalstellen nach dem Komma behalten möchten, ohne die Zeichenfolge abfangen zu müssen, verwenden Sie toFixed, um sie zu entfernen

number.toFixed()   // "12346"
number.toFixed(3)  // "12345.679"
number.toFixed(6)  // "12345.678900"

Der Parameterbereich liegt zwischen 0 und 20. Wenn nicht geschrieben, ist der Standardwert 0

Typerkennung

Typeof ist die am häufigsten verwendete Methode zur Typerkennung

typeof 3    // "number"
typeof "333"  // "string"
typeof false  // "boolean"

Es ist gut für grundlegende (einfache) Datentypen, aber wenn es um Referenzdatentypen geht, ist es nicht so einfach

typeof new Date()  // "object"
typeof []      // "object"
typeof {}      // "object"
typeof null     // "object"   

Die ersten drei sind erträglich, aber null gibt tatsächlich ein Objekt zurück. ! ! (ps: Eigentlich ist das ein JavaScript-Fehler, den die Leute nicht beheben können)

Zu diesem Zeitpunkt werden wir Instanz von

verwenden
toString instanceof Function
// true
(new Date) instanceof Date
// true
[] instanceof Object
// true
[] instanceof Array
// true

Tatsächlich können wir feststellen, dass [] und Object wahr werden. Obwohl wir wissen, dass [] auch ein Objekt ist, hoffen wir auf eine genauere Methode zur Bestimmung des Typs, und jetzt ist sie da
Verwenden Sie Object.prototype.toString() zur Beurteilung. Damit jedes Objekt die Erkennung besteht, müssen wir Function.prototype.call oder Function.prototype.apply verwenden, um

aufzurufen
var toString = Object.prototype.toString;

toString.call(new Date)  // "[object Date]"
toString.call(new Array)  // "[object Array]"
toString.call(new Object) // "[object Object]"
toString.call(new Number) // "[object Number]"
toString.call(new String) // "[object String]"
toString.call(new Boolean) // "[object Boolean]"

Es ist zu beachten, dass die toString-Methode sehr wahrscheinlich überschrieben wird. Wenn Sie sie also verwenden müssen,
Sie können die Methode Object.prototype.toString() direkt
verwenden

Vererbung implementieren

Schauen Sie sich ein offizielles Beispiel an

//Shape - superclass
function Shape() {
 this.x = 0;
 this.y = 0;
}

Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info("Shape moved.");
};

// Rectangle - subclass
function Rectangle() {
 Shape.call(this); //call super constructor.
}

Rectangle.prototype = Object.create(Shape.prototype);

var rect = new Rectangle();

rect instanceof Rectangle //true.
rect instanceof Shape //true.

rect.move(1, 1); //Outputs, "Shape moved."

Rufen Sie die initialisierten Eigenschaften und Methoden über den Aufruf ab und rufen Sie die Eigenschaften und Methoden des Prototypobjekts über Object.create ab

Iteration

ES5 verfügt über viele Iterationsfunktionen, wie z. B. Zuordnen, Filtern, Einige, Alle, Reduzieren usw.

Array

Die spezifische API wird hier ausführlich vorgestellt.
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Glob...
Hier ein paar Worte:
Beitreten, Pop, Push, Reverse, Shift, Sort, Splice, Unshift ändert das ursprüngliche Array

concat,indexOf,lastIndexOf,slice,toString ändert das ursprüngliche Array nicht

Iterationsmethoden wie Map, Filter, Some, Every, Reduce und ForEach ändern das ursprüngliche Array nicht

Ein paar Punkte, die Sie beachten sollten:

1 Schicht, Pop gibt das gelöschte Element zurück
2 Spleiß gibt ein Array zurück, das aus gelöschten Elementen besteht, oder ein leeres Array
3x Drücken gibt die neue Array-Länge zurück
4 einige Stopps, wenn wahr
5 bei jedem Stopp, wenn ein Fehler vorliegt
6 Die obige Iterationsmethode kann am Ende einen Parameter thisArg anhängen, der beim Ausführen des Rückrufs den Wert this angibt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

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