Weitere Fragen wurden von mir den ganzen Weg gesammelt, und es gibt auch frühere Jahre. Es ist nicht garantiert, dass die Antworten korrekt sind. Wenn es Fehler oder bessere Lösungen gibt, korrigieren Sie diese bitte.
Angehörte den zweiten Artikel: 2014 Front-End-Testinterviewfragen für BAT- und große Internetunternehmen-HTML, CSS
Die vorherigen Fragen werden sehr einfach sein und je mehr Sie gehen, desto mehr werden Sie desto mehr werden Sie ausführlich sein.
Junior JavaScript:
1. Welche Art von Sprache ist JavaScript und was sind ihre Merkmale?
Es gibt keine Standardantwort.
2.Was sind die Datentypen von JavaScript?
Grundlegende Datentypen: String, Boolesche, Nummer, undefiniert, NULL
Referenzdatentyp: Objekt (Array, Datum, Regexp, Funktion)
Die Frage ist also, wie Sie feststellen können, ob eine Variable ein Array -Datentyp ist.
• Methode 1. Bestimmen Sie, ob es "Array -Eigenschaften" wie die Slice () -Methode hat. Sie können die Slice -Methode für diese Variable selbst definieren, damit sie manchmal fehlschlägt
• Methode 2.OBJ Instance of Array ist in einigen IE -Versionen falsch
• Methode 3. Es gibt Schwachstellen in beiden Methoden. Das neue Methodenarray.IsArray () ist in ECMA -Skript5 definiert, um seine Kompatibilität zu gewährleisten. Die beste Methode ist wie folgt
if (typeof array.isArray === "undefined") {array.isarray = function (arg) {return object.prototype.toString.call (arg) === "[Objektarray]"}; }3. In dem Eingangs -Eingangsfeld mit einer bekannten ID hoffe ich, den Eingangswert dieses Eingangsfelds zu erhalten. Wie macht ich das? (Kein Rahmen von Drittanbietern)
Die Codekopie lautet wie folgt: Dokument.GetElementById ("ID"). Wert
4. Wie kann ich alle Kontrollkästchen auf der Seite bekommen? (Kein Rahmen von Drittanbietern)
var domlist = document.getElementsByTagName ('input') var CheckBoxList = []; var len = domlist.length; // Cache zu lokaler Variable, während (len--) {// verwenden, während die Schleife effizienter ist als für die Schleife if (Domlist [len] .Type == 'CheckBox') {CheckBoxList.push (Domlist [len]); }}5. Stellen Sie den HTML-Inhalt einer DIV mit einer bekannten ID auf XXXX ein, und die Schriftfarbe ist auf schwarz eingestellt (keine Rahmen von Drittanbietern).
Die Codekopie lautet wie folgt:
var dom = document.getElementById ("id");
Dom.innerhtml = "xxxx"
Dom.Style.color = "#000"
6. Wenn ein DOM -Knoten angeklickt wird, hoffen wir, eine Funktion ausführen zu können. Was sollen wir tun?
• Binden Sie Ereignisse direkt im DOM: <div onclick = ”test ()”> </div>
• Bindung durch Onclick in JS: xxx.onclick = Test
• Bindung nach Ereigniseradung: AddEventListener (xxx, "klicken", testen)
Die Frage ist also, was sind die Event -Stream -Modelle von JavaScript?
• "Ereignisblase": Die Ereignisse werden von den spezifischsten Elementen akzeptiert und dann Schritt für Schritt nach oben verbreiten
• "Ereigniserfassung": Ereignisse werden zuerst vom am wenigsten spezifischen Knoten empfangen und dann Schritt für Schritt bis zum spezifischsten Abfall ab.
• "DOM Event Flow": Drei Phasen: Ereigniserfassung, Zielbühne, Ereignisblase
7. Was sind Ajax und Json, ihre Vor- und Nachteile.
AJAX ist asynchrones JavaScript und XML zur Implementierung einer asynchronen Dateninteraktion auf Webseiten.
Vorteil:
• Kann die Seite lokale Inhalte laden, ohne alle Inhalte zu überladen, wodurch die Menge der Datenübertragung verringert wird?
• Vermeiden Sie die Benutzer ständig erfrischend oder springen Seiten, um die Benutzererfahrung zu verbessern
Mangel:
• Nicht freundlich zu Suchmaschinen (
• Die Kosten für die Implementierung der Vorder- und Rückfunktionen unter Ajax sind hoch
• Kann zu einer Erhöhung der Anzahl der Anfragen führen
• Cross-Domänen-Problembeschränkungen
JSON ist ein leichtes Datenaustauschformat, eine Untergruppe von ECMA
Vorteile: Leicht, leicht zu lesen und zu schreiben von Personen, einfach von Maschinen (JavaScript) und unterstützt zusammengesetzte Datentypen (Arrays, Objekte, Zeichenfolgen, Zahlen).
8. Sehen Sie, wie hoch die Ausgabe des folgenden Code ist? Erklären Sie den Grund.
Die Codekopie lautet wie folgt:
var a;
alarm (typeof a); // undefiniert
Alarm (b); // einen Fehler melden
Erläuterung: Undefiniert ist ein Datentyp mit nur einem Wert. Dieser Wert ist "undefiniert". Wenn eine Variable mit Var deklariert wird, ihre Zuordnung jedoch nicht initialisiert wird, ist der Wert dieser Variablen undefiniert. Und B wird einen Fehler melden, weil er nicht deklariert wird. Beachten Sie, dass sich nicht deklarierte Variablen von denen unterscheiden, die nicht zugewiesen wurden.
9. Sehen Sie sich den folgenden Code an, welche Ausgaben? Erklären Sie den Grund.
Die Codekopie lautet wie folgt:
var a = null;
alarm (typeof a); //Objekt
Erläuterung: Null ist ein Datentyp mit nur einem Wert, und dieser Wert ist NULL. Es zeigt an, dass ein Nullzeiger gezielt wird. Die Verwendung der TypeOF -Erkennung gibt daher "Objekt" zurück.
10. Sehen Sie sich den folgenden Code an, welche Ausgaben? Erklären Sie den Grund.
var undefiniert; undefiniert == null; // true1 == true; // true2 == true; // false0 == false; // true0 == ''; // Truenan == Nan; // false [] == false; // true [] ==! []; // WAHR
• Undefiniert ist gleich Null, aber nicht identisch (===)
• Wenn eine Nummer ist und der andere String ist, versucht es, die Zeichenfolge in die Nummer zu konvertieren
• Versuchen Sie, den Booleschen in die Nummer, 0 oder 1 zu konvertieren
• Versuchen Sie, das Objekt in die Anzahl oder Zeichenfolge umzuwandeln, abhängig vom Typ einer anderen Vergleichsmenge
• Daher wird für das Urteil von 0 und leeren Zeichenfolgen empfohlen, "===" zu verwenden. "===" bestimmt zunächst die Werttypen auf beiden Seiten, und es ist falsch, wenn die Typen nicht übereinstimmen.
Die Frage ist also, schauen Sie sich den folgenden Code an, welche Ausgabe ist und warum ist die Art von Foo?
Die Codekopie lautet wie folgt:
var foo = "11"+2- "1";
console.log (foo);
console.log (typeof foo);
Nach der Ausführung beträgt der Wert von FOO 111 und die Art der Foo ist die Zahl.
Die Codekopie lautet wie folgt:
var foo = "11" +2+ "1"; // Erleben Sie den Unterschied zwischen dem Hinzufügen einer Zeichenfolge '1' und dem Subtrahieren einer String '1'
console.log (foo);
console.log (typeof foo); Nach der Ausführung beträgt der Wert von Foo 1121 (hier ist String -Spleißen) und die Art der Foo ist Zeichenfolge.
11. Schauen Sie sich den Code an, um die Antwort zu geben.
Die Codekopie lautet wie folgt:
var a = neues Objekt ();
A. value = 1;
B = a;
B. value = 2;
Alarm (A.Value);
Antwort: 2 (Untersuchen Sie die Details des zitierten Datentyps)
12. Das Array var stringarray = ["this", "ist", "baidu", "campus"] ist bekannt und Alarmausgänge "Dies ist Baidu Campus".
Antwort: Alert (StringArray.Join (""))
Dann ist das Problem, dass der String foo = "Get-Element-by-id" eine Funktion zum Umwandeln in eine Kamelnotation "GetElementById".
Funktion combo (msg) {var arr = msg.split ("-"); var len = arr.length; // Speichern arr.length in einer lokalen Variablen kann die für die Schleifeneffizienz für (var i = 1; i <len; i ++) {arr [i] = arr [i] .charat (0) .touppercase ()+arr [i] .Substr (1, arr [i] .Length-1) verbessern; } msg = arr.join (""); MSG zurückgeben;}(Untersuchen Sie die grundlegende API)
13.var numberArray = [3,6,2,4,1,5]; (Untersuchen Sie die grundlegende API)
1) Implementieren Sie die inverse Reihenfolge dieses Arrays und Ausgangs [5,1,4,2,6,3]
2) Implementieren Sie die Abstammungsanordnung des Arrays und der Ausgabe [6,5,4,3,2,1]
var numberArray = [3,6,2,4,1,5]; numberArray.reverse (); // 5,1,4,2,6,3Numberarray.sort (Funktion (a, b) {// 6,5,4,3,2,1 Return Ba;})14. Ausgabe heute in Form von Yyyy-Mm-DD. Zum Beispiel ist heute der 26. September 2014, dann die Ausgabe 2014-09-26
var d = neuer Datum (); // Erhalten Sie das Jahr, GetFriyear () gibt eine 4-Grad-Zahl Var Jahr = d.sgetingvoll (); // den Monat erhalten, der Monat ist etwas Besonderes, 0 ist Januar und 11 ist Dezember var monat = d.getMonth () + 1; // werden zweistelligem Monat = Monat <10? '0' + Monat: Monat; // den Tag var tag = d.getDate (); Tag = Tag <10? '0' + Tag: Tag; alert (Jahr + '-' + Monat + '-' + Tag);
15. Ersetzen Sie {$ id} in der String "<tr> <td> {$ id} </td> <td> {$ name} </td> </tr>" mit 10 und {$ name} mit Tony (unter Verwendung regulärer Ausdrücke)
Antwort: "<tr> <td> {$ id} </td> <td> {$ id} _ {$ name} </td> </tr>". Ersetzen (/{/$ id}/g, '10').
16. Um die Sicherheit der Seitenausgabe zu gewährleisten, müssen wir häufig einigen Sonderzeichen entkommen. Bitte schreiben Sie eine Funktion Escapehtml und Escape <,>, &, "
Funktion EscapeHtml (str) {return Str.Replace (/[<> "&]/g, Funktion (Match) {Switch (Match) {case" <": return" <"; case"> ": return"> "; case" & ": return" & "; case"/": return" ";}});});});});});17.foo = foo || bar, was bedeutet diese Codezeile? Warum schreibe ich so?
Antwort: if (! Foo) foo = bar; // Wenn foo existiert, bleibt der Wert unverändert, andernfalls wird der Wert der Bar Foo zugeordnet.
Kurzschlussausdruck: Als Operandenausdrücke der "&&" und "||" Operatoren, wenn diese Ausdrücke bewertet werden, endet der Bewertungsprozess so lange, wie das Endergebnis als wahr oder falsch bestimmt werden kann. Dies wird als Kurzschlussbewertung bezeichnet.
18. Was wird ausgegeben? (Verbesserung der variablen Deklaration)
Die Codekopie lautet wie folgt:
var foo = 1;
Funktion(){
console.log (foo);
var foo = 2;
console.log (foo);
}
Antwort: Ausgabe undefinierter und 2. Der obige Code entspricht:
var foo = 1; function () {var foo; console.log (foo); // undefined foo = 2; console.log (foo); // 2; }Funktionserklärungen und variable Deklarationen werden implizit durch die JavaScript -Engine an die Spitze des aktuellen Bereichs gefördert, aber nur die Förderung des Namens fördert den Zuweisungsteil nicht.
19. Verwenden Sie JS, um 10 Zahlen zwischen 10 und 100 zufällig auszuwählen, sie in ein Array zu speichern und zu sortieren.
var iarray = []; Funktion getrandom (start, iend) {var iChoice = isStart - iend +1; return math.floor (math.random () * Ichoice+isStart;} für (var i = 0; i <10; i ++) {iarray.push (getrandom (10.100));} iarray.sort ();20. Kombinieren Sie die beiden Zahlen und löschen Sie das zweite Element.
Die Codekopie lautet wie folgt:
var array1 = ['a', 'b', 'c'];
var barray = ['d', 'e', 'f'];
var carray = array1.concat (Barray);
Carray.SPLICE (1,1);
21. So fügen, entfernen, verschieben, kopieren, erstellen und suchen Sie Knoten (native JS, echte Grundlagen, kein detailliertes Schreiben jedes Schritts)
1) Erstellen Sie einen neuen Knoten
CreatecumentFragment () // ein DOM -Fragment erstellen
CreateLement () // Erstellen Sie ein bestimmtes Element
createTextNode () // einen Textknoten erstellen
2) Fügen, entfernen, ersetzen, einfügen
appendChild () // hinzufügen
removechild () // entfernen
ersetztEchild () // ersetzen
InsertBefore () // einfügen
3) Suche
GetElementsByTagName () // unter dem Tag -Namen
GetElementsByName () // Der Wert der Namenseigenschaft des Elements wird übergeben
getElementById () // über Element ID, Einzigartigkeit, Einzigartigkeit
22. Es gibt eine solche URL: http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e. Bitte schreiben Sie ein JS-Programm, um jeden GET-Parameter in der URL zu extrahieren (der Parametername und die Anzahl der Parameter sind ungewiss) und senden Sie ihn in eine JSON-Struktur in Form eines Schlüsselwerts wie {a: '1', b: '2', c: '', d: 'xxx', E: Undefinierte} zurück.
Antwort:
Funktion serilizeurl (url) {var result = {}; url = url.split ("?") [1]; var map = url.split ("&"); für (var i = 0, len = map.length; i <len; i ++) {result [map [i] .Split ("=") [0]] = map [i] .Split ("=") [1]; } Rückgabeergebnis;}23. Was ist der Unterschied zwischen dem regulären Expressionskonstruktor var reg = neuer regexp ("xxx") und dem regulären Ausdruck wörtlich var reg = //? Regelmäßiger Ausdruck Matching Mailbox?
Antwort: Wenn Sie den Regexp () -Konstruktor verwenden, müssen Sie nicht nur den Zitaten entkommen (d. H. /"Means"), sondern Sie müssen auch auch einen doppelten Backslash verdoppeln (d. H. // bedeutet a /). Die Verwendung von Literalen der regulären Ausdrucks ist effizienter.
Regelmäßige Anpassung von E -Mails:
Die Codekopie lautet wie folgt: var Regmail = /^(?? -Za-Z0-9_- weibliches)+@(;[a-Za-Z0-9_- weibliche )+((
24. Schauen Sie sich den folgenden Code an und geben Sie das Ausgabeergebnis an.
Die Codekopie lautet wie folgt:
für (var i = 1; i <= 3; i ++) {
setTimeout (function () {
console.log (i);
}, 0);
};
Antwort: 4 4 4.
Ursache: Der JavaScript -Ereignisprozessor wird erst ausgeführt, wenn der Thread im Leerlauf ist. Die Frage ist also, wie die obige Code ausgibt 1 2 3?
für (var i = 1; i <= 3; i ++) {setTimeout ((Funktion (a) {// Die Funktionskonsole sofort ausführen. }; 1 // Ausgabe 2325. Schreiben Sie eine Funktion, um die Leerzeichen vor und nach der Zeichenfolge zu löschen. (Kompatibel mit allen Browsern)
Verwenden Sie die integrierte Schnittstellen-Trim () unter Berücksichtigung der Kompatibilität:
if (! string.prototype.trim) {string.prototype.trim = function () {return this.replace (/^/s+/, "") .Replace (// s+$/, ""); }} // testen Sie die Funktion var str = " /t /n test string" .trim (); alert (str == "Test String"); // alarmiert "wahr"26. Was sind die Rollen von Callee und Anrufer in JavaScript?
Antwort:
Anrufer gibt einen Verweis auf die Funktion zurück, die die aktuelle Funktion aufruft.
Callee gibt die ausführende Funktionsfunktion zurück, dh den Körper des angegebenen Funktionsobjekts.
Die Frage ist also? Wenn ein Paar Kaninchen jeden Monat zwei Kaninchen zur Welt bringen; Ein Paar neuer Kaninchen wird ab dem zweiten Monat Kaninchen zur Welt bringen; Unter der Annahme, dass jedes Kaninchenpaar ein weibliches und ein Mann ist, wie viele Kaninchen können sich im nmonat ein Paar Kaninchen einsetzen? (Verwenden Sie Callee, um zu vervollständigen)
var result = []; Funktion fn (n) {// die typische Fibonacci -Sequenz if (n == 1) {return 1; } else if (n == 2) {return 1; } else {if (result [n]) {return Ergebnis [n]; } else {//argument.callee () bedeutet fn () result [n] = argumente.callee (n-1)+argumente.callee (n-2); Rückgabeergebnis [n]; }}}Intermediate JavaScript:
1. Implementieren Sie einen Funktionsklon, mit dem die 5 Hauptdatentypen in JavaScript kopiert werden können (einschließlich Nummer, String, Objekt, Array, Boolescher)
• Suchpunkt 1: Ist klar, ob der Unterschied zwischen dem grundlegenden Datentyp und dem Referenzdatentyp im Speicher gespeichert ist?
• Suchpunkt 2: Wissen Sie, wie Sie bestimmen können, welche Art einer Variablen ist?
• Inspektionspunkt 3: Entwurf eines rekursiven Algorithmus
// Methode 1: Object.Prototype.clone = function () {var o = this.constructor === Array? []: {}; für (var e in diesem) {o [e] = typeof this [e] === "Objekt"? this [e] .clone (): this [e]; } return o;} // Methode 2:/** * Klon ein Objekt * @param obj * @returns */Funktion Clone (obj) {var buf; if (obj Instance von Array) {buf = []; // Erstellen Sie ein leeres Array var i = obj.length; während (i--) {buf [i] = klon (obj [i]); } return buf; } else if (obj instanceof object) {buf = {}; // Erstellen Sie ein leeres Objekt für (var k in obj) {// Fügen Sie diesem Objekt diesem Objekt BUF [k] = klon hinzu (obj [k]); } return buf; } else {// gewöhnliche Variablen zuweisen direkt Rückgabe obj; }}2. Wie kann man doppelte Elemente in einem Array beseitigen?
var arr = [1,2,3,3,4,4,5,5,6,1,9,3,25,4]; Funktion Derpeat () {var newarr = []; var obj = {}; var index = 0; var l = arr.length; für (var i = 0; i <l; i ++) {if (obj [arr [i]] == undefined) {obj [arr [i]] = 1; newarr [index ++] = arr [i]; } else if (obj [arr [i]] == 1) Weiter; } return Newarr; } var newarr2 = DerePeat (arr); Alarm (newarr2); // Ausgabe von 1,2,3,4,5,6,9,253. Xiaoxian ist ein süßer Welpe (Hund) und seine Schreie sind sehr schön. Jedes Mal, wenn er seinen Besitzer sieht, wird er schreien (jammern). Aus dieser Beschreibung können Sie die folgenden Objekte erhalten:
Funktion Dog () {this.WOW = function () {alert ('wow'); } this.yelp = function () {this.wow (); }}Wie Xiaoxian erwies sich Xiaomang als ein süßer Welpe, aber plötzlich wurde er eines Tages verrückt (Maddog), und als er jemanden sah, schrie er (wow) und rief jede halbe Sekunde immer wieder (jelp). Bitte verwenden Sie den Code, um es gemäß der Beschreibung zu implementieren. (Vererbung, Prototyp, setInterval)
Antwort:
Funktion maddog () {this.yelp = function () {var self = this; setInterval (function () {self.wow ();}, 500); }} Maddog.prototype = new Dog (); // für testvar hunde = neuer hunde (); hunde.yelp (); var maddog = new Maddog (); Maddog.yelp ();4. Die folgenden UL, wie kann man seinen Index beim Klicken auf jede Spalte alarmieren? (Schließung)
Die Codekopie lautet wie folgt:
<ul id = ”test”>
<li> Dies ist das erste </li>
<li> Dies ist der zweite </li>
<li> Dies ist der dritte Artikel </li>
</ul>
Antwort:
// Methode 1: var lis = document.getElementById ('2223'). GetElementsByTagName ('li'); für (var i = 0; i <3; i ++) {lis [i] .Index = i; lis [i] .onclick = function () {alert (this.index); };} // Methode 2: var lis = document.getElementById ('2223'). lis [i] .onclick = (Funktion (a) {return function () {alert (a);}}) (i);}5. Schreiben Sie eine JavaScript -Funktion und geben Sie einen Selektor des angegebenen Typs ein (nur drei einfache CSS -Selektoren: ID, Klasse und TagName, und es sind keine kompatiblen Kombinationsauswahl erforderlich), um übereinstimmende Dom -Knoten zurückzugeben, die die Kompatibilität und Leistung von Browser in Betracht ziehen müssen.
/*** @param Selector {String} Der eingehende CSS -Selektor. * @return {array}*/
Antwort: (Zu lange klicken Sie, um zu öffnen)
var query = function (selector) {var reg = /^(#)?(/)?(//w+)$/img; var regresult = reg.exec (selektor); var result = []; // Wenn es sich um einen ID -Selektor if (regresult [1]) {if (regresult [3]) {if (typeof document.querySelector === "function") {result.push (document.querySelector (regresult [3])); } else {result.push (document.getElementById (regresult [3])); }}} // Wenn es sich um einen Klassenauswahl handelt, wenn (regresult [2]) {if (regresult [3]) {if (typeof document.GetElements byclassName === 'function') {var document = document.getElements byclassName (Regesult [3]); if (doms) {result = convertoArray (DOMS); }} // Wenn die Funktion von GetElementsByClassName nicht unterstützt wird {var alldoms = document.getElementsByTagName ("*"); für (var i = 0, len = alldoms.length; i <len; i ++) {if (alldoms [i] .className.search (neuer regexp (regexp (regresktult [2]))> -1) {result.push.push (alldoms [i]); }}}}}}} // Wenn es sich um einen Tag -Selektor handelt, wenn (regresult [3]) {var document = document.GetElementsByTagName (regresult [3] .ToLowerCase ()); if (doms) {result = convertoArray (DOMS); }} Rückgabeergebnis; } Funktion convertToArray (Knoten) {var array = null; try {array = array.prototype.slice.call (Knoten, 0); // für Nicht-I-Browser} catch (ex) {array = new array (); für (var i = 0, len = nodes.length; i <len; i ++) {array.push (Knoten [i])}} return Array; }6. Bitte bewerten Sie den folgenden Code und geben Sie Verbesserungsvorschläge.
if (window.adDeVentListener) {var addlistener = function (el, type, listener, usecapture) {el.addeventListener (Typ, Hörer, usecapture); };} else if (document.all) {addierener = function (el, type, louser) {el.attachEvent ("on"+type, function () {listener.apply (el);}); }}auswerten:
• Die Funktion addListener sollte nicht in den IF -Anweisungen deklariert werden, sondern zuerst deklariert werden.
• Es ist nicht erforderlich, das Fenster zu verwenden.
• Da AttachEvent dieses Zeigeproblem im IE hat, muss es beim Aufrufen behandelt werden
Verbesserungen sind wie folgt:
Funktion addEvent (Elem, Typ, Handler) {if (Elem.AddeventListener) {Elem.AdDeVentListener (Typ, Handler, Falsch); } ele if (Elem.attacheAvent) {Elem ['temp' + Typ + Handler] = Handler; Elem [Typ + Handler] = function () {Elem ['temp' + Typ + Handler] .Apply (Elem); }; Elem.attacheAvent ('on' + Typ, Elem [Typ + Handler]); } else {elem ['on' + type] = Handler; }}7. Fügen Sie dem String -Objekt eine Methode hinzu, geben Sie einen String -Typ -Parameter ein und geben Sie den Preisraum zwischen jedem Zeichen der Zeichenfolge zurück, zum Beispiel:
addspace ("Hallo Welt") // -> 'HelloWorld D'
Die Codekopie lautet wie folgt:
String.prototype.spacify = function () {
Gibt dies zurück.
};
Beantworten Sie dann die oben genannten Fragen, dann ist die Frage
1) Ist es sicher, Methoden direkt zum Prototyp des Objekts hinzuzufügen? Vor allem bei Objektobjekten. (Ich kann das nicht beantworten? Ich hoffe, ich werde dir sagen, was ich weiß.)
2) Was ist der Unterschied zwischen Funktionserklärung und Funktionsausdruck?
Antwort: In JavaScript behandelt der Parser Daten in die Ausführungsumgebung, sondern behandelt Funktionserklärungen und Funktionsausdrücke nicht gleichermaßen. Der Parser ist der erste, der die Funktionserklärungen liest und sie zur Verfügung stellt (zugänglich), bevor Code ausgeführt wird. Was den Funktionsausdruck betrifft, müssen Sie warten, bis der Parser in die Codezeile ausgeführt wird, in der er sich befindet, bevor er analysiert und ausgeführt wird. (Funktionserklärung Promotion)
8. Definieren Sie eine Protokollmethode, damit sie die Methoden von Proxy Console.Log.Log können.
Eine praktikable Methode:
Die Codekopie lautet wie folgt:
Funktion log (msg) {
console.log (msg);
}
Log ("Hallo Welt!") // Hallo Welt!
Was ist, wenn Sie mehrere Parameter übergeben möchten? Offensichtlich kann die obige Methode die Anforderungen nicht erfüllen, daher ist eine bessere Methode:
Die Codekopie lautet wie folgt:
Funktion log () {
console.log.apply (Konsole, Argumente);
};
Die Frage ist also, was sind die Ähnlichkeiten und Unterschiede zwischen Anwendungs- und Anrufmethoden?
Antwort:
Die beiden Funktionen von Anwendung und Aufruf sind gleich, dh eine Methode eines Objekts aufzurufen und das aktuelle Objekt durch ein anderes Objekt zu ersetzen. Ändert den Objektkontext einer Funktion aus dem anfänglichen Kontext in das von ThisOBJ angegebene neue Objekt.
Es gibt jedoch einen Unterschied in den Parametern zwischen den beiden. Die Bedeutung des ersten Parameters ist gleich, aber für den zweiten Parameter: Anwendung wird in einem Array von Parametern übergeben, das heißt, mehrere Parameter in ein Array zu kombinieren, und der Aufruf wird als Parameter des Anrufs übergeben (ab dem zweiten Parameter). Beispielsweise lautet die entsprechende Anwendungsschreibmethode für func.call (Func1, var1, var2, var3): func.apply (func1, [var1, var2, var3]).
9.Was ist ein Pseudo-Array in JavaScript? Wie konvertiere ich ein Pseudo-Array in ein Standard-Array?
Antwort:
Pseudo-Array (Klassenarray): Sie können Array-Methoden nicht direkt aufrufen oder ein spezielles Verhalten von Längenattributen erwarten, aber Sie können sie dennoch mit realen Array-Traversal-Methoden durchqueren. Typischerweise werden die Argumentparameter der Funktion auch als GetElementsByTagName, document.childnodes usw. bezeichnet, und alle geben Nodelist-Objekte zurück, die zu Pseudo-Arrays gehören. Arrays können unter Verwendung von Array.Prototype.slice.call (Fakearray) in reale Array -Objekte konvertiert werden.
Angenommen, wir folgen dem achten Fragenstamm, wir müssen jeder Protokollmethode ein "(App)" -Präfix hinzufügen, wie z. B. "Hallo Welt!" -> '(App) Hallo Welt!'. Die Methode lautet wie folgt:
Funktion log () {var args = array.prototype.slice.call (Argumente); // Um die Unschuh -Array -Methode zu verwenden, konvertieren Sie Argument in reales Array args.unshift ('(App)'); console.log.apply (Konsole, args); };10. Sehen Sie den folgenden Code an: zum Verständnis des Kontextes des Umfangskontexts:
var user = {count: 1, getCount: function () {return this.count; }}; console.log (user.getCount ()); // Was? var func = user.getCount; console.log (func ()); // Was?Was sind die Ausgaben von zwei Konsolen? Warum?
Die Antwort ist 1 und undefiniert.
Func wird im Kontext von Winodw ausgeführt, sodass auf die Count -Eigenschaft nicht zugegriffen werden kann.
Dann ist die Frage, wie Sie sicherstellen, dass UESR immer auf den Kontext von Func zugreifen kann, dh 1 kehren Sie richtig zurück.
ANTWORT: Die korrekte Art und Weise ist die Verwendung von Funktion.Prototype.bind. Kompatibel mit dem vollständigen Code jedes Browsers ist wie folgt:
Function.prototype.bind = function.prototype.bind || Funktion (Kontext) {var self = this; return function () {return self.apply (Kontext, Argumente); };} var func = user.getCount.bind (user); console.log (func ());11. Was ist der Unterschied zwischen dem Fenster von Native JS. So implementieren Sie die Ready -Methode von JQ mit nativem JS?
Die Methode von window.onload () muss warten, bis alle Elemente einschließlich des Bildes auf der Seite vor der Ausführung geladen sind.
$ (Dokument) .Ready () wird ausgeführt, nachdem die DOM -Struktur gezogen wurde, und es müssen nicht warten, bis sie geladen ist.
/ * * Übergeben Sie die Funktion an wobei Handler (e) {if (rede) return; // Für den Fall, dass der Anruf dieser Funktionen dazu führen kann, dass mehr Funktionen für (var i = 0; i <funcs.length; i ++) {funcs [i] .Call (Dokument) registriert werden; funcs = null; } // Registrieren Sie den Handler für eine Ereignis, die empfangen wird, wenn (document.addeventListener) {document.addeventListener ('DomContentled', Handler, False); document.addeventListener ('ReadyStatechange', Handler, Falsch); // IE9+ window.adDeVentListener ('Load', Handler, False); } else if (document.attachEvent) {document.attachEvent ('onReadyStatechange', Handler); window.attachEvent ('Onload', Handler); } // return whready () function return function wante } else {funcs.push (fn); }}}) ();Wenn der obige Code sehr schwer zu verstehen ist, ist die folgende vereinfachte Version:
Funktion Ready (fn) {if (document.addeventListener) {// Standard -Browser -Dokument.AdDeventListener ('DomContentLoded', Funktion () {// Anmeldung Ereignis, um wiederholtes Auslösen von documents.removeventListListener ('DomcontentLoaded', Argumente auszulösen. } else if (document.attachEvent) {// ie document.attachEvent ('onReadyStatechange', function () {if (document.readystate == 'complete') {document.detacheEvent ('onReadyStatechange', Argumente.Callee); }};12. (Entwurfsfrage) Möchten Sie einen Zug auf einen bestimmten Knoten der Seite implementieren? Wie macht ich das? (Verwenden Sie native JS)
Beantworten Sie einfach das Konzept, hier sind einige wichtige Punkte
1. Binden Sie Mousedown, Mousemove, Mausup -Ereignisse an Knoten, die gezogen werden müssen
2. Nachdem das Mouedown -Ereignis ausgelöst wurde, schleppt und schleppt
3. Wenn Mousemove die Drag -Position über Event.ClientX und Clienty erhalten und die Position in Echtzeit aktualisieren.
4. Wenn Mausup endet, endet Drag und Drop
5. Achten Sie auf die Browsergrenzen
13.
Funktionsetcookie (Name, Wert, Tage) {// Cookie var exp = new Date () eine Zeitvariable hinzufügen; exp.settime (exp.getTime () + days*24*60*60*1000); // Setzen Sie die Ablaufzeit bis Tage dokument.cookie = name + "=" + Escape (value) + "; expires =" + exp.togmtstring (); } Funktion getcookie (name) {var result = ""; var mycookie = ""+document.cookie+";"; var searchName = "+name+" = "; var startOfcookie (name) {var result =" "; var mycookie =" "+document.cookie+"; "; var searchName ="+name+"="; var startofcookie = mycookie.indexof (SearchName); var endofcookie; if (satrtofcookie! = -1) {startOfcookie += searchName.length; endofcookie = mycookie.indexof (";", startofcookie); result = (mycookie.substring (startofcookie, endofcookie)); } return Ergebnis;} (function () {var otips = document.getElementById ('Tipps'); // Angenommen, die ID der Tipps ist Tipps var page = {{prüft: function () {// Überprüfen Sie, ob das Tipps von Tipps existiert und die Anzeige von Var Tips = Getcookie ('Tipps'). if (tips == "ever_show_again") return false; Angenommen, Tipps sind Elemente auf Zeilenebene}, init: function () {var _this = this; page.init ();}) ();14. Sagen Sie, was ist die Funktion der folgenden Funktionen? Was sollte im leeren Bereich gefüllt werden?
// Define (Funktion (Fenster) {Funktion fn (str) {this.str = str;} fn.prototype.format = function () {var arg = ______; return this.str.Replace (_____, Funktion (a, b) {return arg [b] ||;}); fn ('<p> <a href = "{0}"> {1} </a> <span> {2} </span> </p>');Antwort: Der Zweck des Zugriffs auf Funktionen besteht darin, die Formatfunktion zu verwenden, um die Parameter der Funktion wie {0} zu ersetzen und ein formatiertes Ergebnis zurückzugeben:
Das erste leere ist: Argumente
Das zweite leere ist: // {(/d+)/}/ig
15. Verwenden Sie objektorientiertes JavaScript, um sich vorzustellen. (Keine Antwort, bitte versuchen Sie es selbst)
Antwort: Objekt oder JSON ist eine gute Wahl.
16. Erklären Sie das Prinzip der Umsetzung von AJAX durch einheimische JS.
Der vollständige Name von Ajax ist asynchroner JavaScript und XML. Asynchron bedeutet unter ihnen asynchron, was sich von der in der traditionellen Webentwicklung verwendeten Synchronisationsmethode unterscheidet.
Das Prinzip von AJAX besteht einfach darin, das XMLHTTPREquest -Objekt zu verwenden, um asynchrone Anforderungen an den Server zu senden, Daten vom Server zu erhalten und dann JavaScript zu verwenden, um die DOM zu bedienen, um die Seite zu aktualisieren.
Xmlhttprequest ist der Kernmechanismus von Ajax. Es wurde erstmals in IE5 eingeführt und ist eine Technologie, die asynchrone Anfragen unterstützt. Einfach ausgedrückt kann JavaScript umgehend Anfragen stellen und Antworten auf den Server verarbeiten, ohne den Benutzer zu blockieren. Erhalten Sie keinen Refresh -Effekt.
Die Eigenschaften des XMLHTTPrequest -Objekts sind:
• OnreadyStatechang Der Ereignishandler für das Ereignis, das durch jede Zustandsänderung ausgelöst wird.
• ResponTeText gibt die Zeichenfolgenform von Daten aus dem Serverprozess zurück.
• reACTURXML DOM-COMPATIBLE-Dokumentdatenobjekt, das aus dem Serverprozess zurückgegeben wurde.
• Status numerische Codes, die vom Server zurückgegeben wurden, z. B. Common 404 (nicht gefunden) und 200 (bereit)
• Status -Text -Zeichenfolge Informationen begleitet vom Statuscode
• ReadyState -Objektzustandsstatuswert
• 0 (nicht initialisiert) Das Objekt wurde festgelegt, wurde jedoch nicht initialisiert (die offene Methode wurde nicht genannt)
• 1 (Initialisierung) Das Objekt wurde festgelegt und die Sendmethode wurde noch nicht aufgerufen
• 2 (Daten senden) Die Send -Methode wurde aufgerufen, der aktuelle Status und der HTTP -Header sind jedoch unbekannt
• 3 (Datenübertragung) Einige Daten wurden empfangen, da die Antwort und die HTTP -Header unvollständig sind. Ein Fehler tritt auf, wenn ein Antwortkörper und ein ResponseText erhalten werden.
• 4 (vollständig) Die Daten werden empfangen, und die vollständigen Antwortdaten können über ResponsexML und Responsext erhalten werden.
Das Folgende ist eine einfache Verkapselung einer Funktion: (etwas lang klicken Sie, um zu öffnen).
ajax ({url: "./testxhr.aspx", // Anfrage Adresstyp: "post", // Anforderungsmethodendaten: {Name: "Super", Alter: 20}, // Anforderungsparameterdatenatyp: "JSON", Erfolg: Funktion (Antwort, xml) {// code nach erfolgreicher Platzierung}, fehlgeschlagen: Funktion (Status) {// // code ausgeführt nach dem Versagen, das nach der Placement -Placement}}}}}}); Funktion Ajax (Optionen) {Optionen = Optionen || {}; options.type = (options.type || "get"). touppercase (); options.datatype = options.datatype || "Json"; var params = formatparams (options.data); // create - nicht ie6 - Schritt 1 if (window.xmlhttpRequest) {var xhr = new xmlhttpRequest (); } else {// IE6 und unterhalb der Browser var xhr = new ActiveXObject ('microsoft.xmlhttp'); } // empfangen - Schritt 3 xhr.onReadyStatechange = function () {if (xhr.readyState == 4) {var status = xhr.status; if (status> = 200 && Status <300) {options.success && options.success (xhr.responsetext, xhr.responsexml); } else {options.fail && options.fail (Status); }}} // Verbinden und senden - Schritt 2 if (options.type == "get") {xhr.open ("get", options.url + "?" + Params, true); xhr.send (null); } else if (options.type == "post") {xhr.open ("post", options.url, true); // Setzen Sie den Inhaltstyp beim Senden des Formulars xhr.setRequestheader ("Inhaltstyp", "Anwendung/x-www-form-urlencoded"); xhr.send (params); }} // Formatparameterfunktion Formatparams (Daten) {var arr = []; für (var name in data) {arr.push (codericomponent (name) + "=" + codouricomponent (Daten [Name])); } arr.push (("v =" + math.random ()). ersetzen (".")); return arr.join ("&"); }Der obige Code beschreibt den AJAX -Prozess grob und die Erklärung wird von Ihnen selbst gegoogelt. Die Frage ist noch nicht fertig. Wissen Sie, was JSONP und PJAX sind?
Antwort:
JSONP: (JSON mit Polsterung) ist eine Cross-Domain-Anforderungsmethode. Das Hauptprinzip besteht darin, die Funktionen zu nutzen, die Skript -Tags in den Domänen angefordert werden können. Das SRC -Attribut sendet die Anforderung an den Server, der Server gibt den JS -Code zurück, die Webseite akzeptiert die Antwort und führt sie dann direkt aus. Dies ist das gleiche wie das Prinzip der Referenzierung externer Dateien über Skript -Tags. JSONP besteht aus zwei Teilen: Rückruffunktion und Daten. Die Rückruffunktion wird im Allgemeinen von der Webseite gesteuert und als Parameter an die Serverseite gesendet. Die Serverseite schreibt die Funktion und Daten in eine Zeichenfolge und gibt zurück.
PJAX: PJAX ist eine neue Technologie, die auf ajax+history.pusstate basiert. This technology can change the content of a page without refresh and can change the URL of the page. (Keypoint: It can implement back functions that cannot be achieved by ajax) pjax is an encapsulation of ajax+pushState, and supports local storage, animation and other functions. Currently, it supports various versions such as jquery, qwrap, kissy, etc.
觉得题目还ok的亲点个推荐哦，题量会不断增加。
你可能会感兴趣：BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
暂且贴出我做出答案的部分。有时间把未做出答案也贴出来。针对文中各题，如有更好的解决方法或者错误之处，各位亲务必告知我，误人子弟实乃罪过。
原文：http://www.cnblogs.com/coco1s/p/4029708.html