Plus de questions ont été collectées par moi tout le long, et il y a aussi des années précédentes. Les réponses ne sont pas garanties pour être correctes. S'il y a des erreurs ou de meilleures solutions, veuillez les corriger.
J'ai joint le deuxième article: les questions d'entrevue de test écrite avant 2014 pour les chauves-souris et les grandes sociétés Internet - HTML, CSS
Les questions précédentes seront très basiques et plus vous allez, plus vous serez, plus vous serez en profondeur.
Javascript junior:
1. Quel type de langue est JavaScript et quelles sont ses caractéristiques?
Il n'y a pas de réponse standard.
2. Quels sont les types de données de JavaScript?
Types de données de base: chaîne, booléen, numéro, indéfini, nul
Type de données de référence: objet (tableau, date, regexp, fonction)
La question est donc de savoir comment déterminer si une variable est un type de données de tableau?
• Méthode 1. Déterminez s'il a des "propriétés de tableau", telles que la méthode Slice (). Vous pouvez définir la méthode Slice pour cette variable vous-même, donc il échoue parfois
• Méthode 2.Obj Instructionof Le tableau est incorrect dans certaines versions IE
• Méthode 3. Il existe des vulnérabilités dans les deux méthodes. La nouvelle méthode array.isArray () est définie dans ECMA Script5 pour assurer sa compatibilité. La meilleure méthode est la suivante
if (typeof array.isArray === "Undefined") {array.isArray = function (arg) {return object.prototype.tostring.call (arg) === "[Array d'objet]"}; }3. Dans la zone d'entrée d'entrée avec un ID connu, j'espère obtenir la valeur d'entrée de cette zone d'entrée. Comment faire? (Pas de cadre tiers)
La copie de code est la suivante: document.getElementById ("id"). Valeur
4. Comment obtenir toutes les cases à cocher sur la page? (Pas de cadre tiers)
var domList = document.getElementsByTagName ('entrée') var CheckboxList = []; var len = domList.length; // Cache vers la variable locale while (len--) {// Utiliser tandis que sera plus efficace que pour Loop if (Domlist [Len] .Type == 'Checkbox') {CheckboxList.push (Domlist [Len]); }}5. Définissez le contenu HTML d'une div avec un identifiant connu sur xxxx, et la couleur de la police est définie sur noir (pas de cadres tiers)
La copie de code est la suivante:
var dom = document.getElementById ("id");
dom.innerhtml = "xxxx"
dom.style.color = "# 000"
6. Lorsqu'un nœud DOM est cliqué, nous espérons pouvoir exécuter une fonction. Que devons-nous faire?
• lier les événements directement dans le dom: <div onclick = ”test ()”> </div>
• Liaison via onclick dans js: xxx.onclick = test
• Liaison par ajout d'événement: AddeventListener (xxx, «cliquez», test)
La question est donc de savoir quels sont les modèles de flux d'événements de JavaScript?
• "Bubble d'événement": les événements commencent à être acceptés par les éléments les plus spécifiques, puis se propagent étape par étape
• "Capture des événements": les événements sont reçus d'abord par le nœud le moins spécifique, puis en bas étape par étape, jusqu'à la moindre spécifique
• "Dom Event Flow": trois étapes: capture d'événements, étape cible, bulle d'événement
7. Que sont Ajax et Json, leurs avantages et leurs inconvénients.
AJAX est JavaScript asynchrone et XML pour implémenter l'interaction des données asynchrones dans les pages Web.
avantage:
• La page peut-elle charger du contenu local sans surcharger tout le contenu, en réduisant la quantité de transmission de données
• Évitez les utilisateurs constamment rafraîchissants ou sautant pour améliorer l'expérience utilisateur
défaut:
• Pas amical pour les moteurs de recherche (
• Le coût de la mise en œuvre des fonctions avant et arrière sous Ajax est élevé
• Peut entraîner une augmentation du nombre de demandes
• Restrictions de problèmes croisés
JSON est un format d'échange de données léger, un sous-ensemble d'ECMA
Avantages: léger, facile à lire et à écrire par des personnes, facile à analyser par machines (javascript), et prend en charge les types de données composites (tableaux, objets, chaînes, numéros)
8. Voir quelle est la sortie du code suivant? Expliquez la raison.
La copie de code est la suivante:
var a;
alerte (type de a); // indéfini
alerte (b); // signaler une erreur
Explication: Undefined est un type de données avec une seule valeur. Cette valeur est "non définie". Lorsqu'une variable est déclarée en utilisant VAR mais que son affectation n'est pas initialisée, la valeur de cette variable n'est pas définie. Et B rapportera une erreur car elle n'est pas déclarée. Notez que les variables non déclarées sont différentes de celles déclarées non attribuées.
9. Regardez le code suivant, quelles sorties? Expliquez la raison.
La copie de code est la suivante:
var a = null;
alerte (type de a); //objet
Explication: Null est un type de données avec une seule valeur, et cette valeur est nul. Il indique qu'un pointeur nul est ciblé, donc l'utilisation de la détection de typeof renvoie "objet".
10. Regardez le code suivant, quelles sorties? Expliquez la raison.
var non défini; Undefined == null; // true1 == true; // true2 == true; // false0 == false; // true0 == ''; // truenan == nan; // false [] == false; // true [] ==! []; // vrai
• Undefined est égal à Null, mais pas identique (===)
• Quand l'un est le numéro et l'autre est une chaîne, il essaiera de convertir la chaîne en numéro
• Essayez de convertir le booléen en numéro, 0 ou 1
• Essayez de convertir l'objet en nombre ou en chaîne, en fonction du type d'une autre quantité de comparaison
• Par conséquent, pour le jugement de 0 et des chaînes vides, il est recommandé d'utiliser "===". "===" déterminera d'abord les types de valeur des deux côtés, et ce sera faux si les types ne correspondent pas.
La question est donc de voir le code suivant, quelle est la sortie et pourquoi est le type de FOO?
La copie de code est la suivante:
var foo = "11" + 2- "1";
console.log (foo);
console.log (typeof foo);
Après l'exécution, la valeur de FOO est 111 et le type de FOO est le nombre.
La copie de code est la suivante:
var foo = "11" +2+ "1"; // Découvrez la différence entre l'ajout d'une chaîne «1» et la soustraction d'une chaîne «1»
console.log (foo);
console.log (typeof foo); Après l'exécution, la valeur de FOO est 1121 (voici l'épissage de chaîne), et le type de FOO est la chaîne.
11. Regardez le code pour donner la réponse.
La copie de code est la suivante:
var a = nouveau objet ();
a.value = 1;
b = a;
B.Value = 2;
alerte (a.value);
Réponse: 2 (examiner les détails du type de données cité)
12. Le tableau var stringarray = ["this", "est", "baidu", "campus"] est connu, et les sorties d'alerte "Ceci est le campus de Baidu".
Réponse: alert (stringarray.join (""))
Ensuite, le problème est qu'il est connu que la chaîne foo = "get-element-by-id", écrivez une fonction pour la convertir en notation de camel "getElementByid".
Fonction combo (msg) {var arr = msg.split ("-"); var len = arr.length; // Stockage Arr.Length dans une variable locale peut améliorer l'efficacité de la boucle pour (var i = 1; i <len; i ++) {arr [i] = arr [i] .charat (0) .toupperase () + arr [i] .substr (1, arr [i] .length-1); } msg = arr.join (""); retour msg;}(Étudier l'API de base)
13.var NumberArray = [3,6,2,4,1,5]; (Étudier l'API de base)
1) Implémentez l'ordre inverse de ce tableau et de cette sortie [5,1,4,2,6,3]
2) Implémenter la disposition des ordonnances descendante du tableau et de la sortie [6,5,4,3,2,1]
var nombreArray = [3,6,2,4,1,5]; NumberArray.reverse (); // 5,1,4,2,6,3NumberArray.sort (fonction (a, b) {// 6,5,4,3,2,1 retour ba;})14. Sortie de la date d'aujourd'hui, sous la forme de Yyyy-mm-dd. Par exemple, aujourd'hui est le 26 septembre 2014, puis la sortie 2014-09-26
var d = new Date (); // Get the Year, Gettillyear () Renvoie un numéro à 4 chiffres var année = D. Getsultiflyar (); // Obtenez le mois, le mois est assez spécial, 0 est janvier, et 11 est décembre var mois = D.GetMonth () + 1; // Devenez un mois à deux chiffres = mois <10? '0' + mois: mois; // Get the Day var day = d.getDate (); jour = jour <10? '0' + jour: jour; alerte (année + '-' + mois + '-' + jour);
15. Remplacer {$ id} dans la chaîne "<tr> <td> {$ id} </td> <td> {$ name} </td> </tr>" avec 10, et {$ name} avec Tony (en utilisant des expressions régulières)
Réponse: "<tr> <td> {$ id} </td> <td> {$ id} _ {$ name} </td> </tr>". Remplace (/ {/ $ id} / g, '10'). Remplace (/ {/ $ name} / g, 'Tony');
16. Afin d'assurer la sécurité de la sortie de la page, nous devons souvent échapper à certains caractères spéciaux. Veuillez écrire une fonction EscapeHtml et Escape <,>, &, "
function EscapeHtml (str) {return str.replace (/ [<> "&] / g, fonction (match) {switch (correspond) {case" <": return" <"; case"> ": return"> "; cas" & ": return" & "; case" / ": return" ";}});}17.foo = Foo || Bar, que signifie cette ligne de code? Pourquoi est-ce que j'écris de cette façon?
Réponse: if (! Foo) foo = bar; // Si FOO existe, la valeur reste inchangée, sinon la valeur de la barre est affectée à FOO.
Expression de court-circuit: comme expressions d'opérande des "&&" et "||" Les opérateurs, lorsque ces expressions sont évaluées, le processus d'évaluation se terminera tant que le résultat final peut être déterminé comme vrai ou faux. C'est ce qu'on appelle l'évaluation du court-circuit.
18. En regardant le code suivant, que sera la sortie? (Amélioration de la déclaration variable)
La copie de code est la suivante:
var foo = 1;
fonction(){
console.log (foo);
var foo = 2;
console.log (foo);
}
Réponse: Sortie non définie et 2. Le code ci-dessus est équivalent à:
var foo = 1; function () {var foo; console.log (foo); // Foo non défini = 2; console.log (foo); // 2; }Les déclarations de fonction et les déclarations variables sont implicitement promues en haut de la portée actuelle par le moteur JavaScript, mais la promotion du nom ne fait pas la promotion de la partie d'affectation.
19. Utilisez JS pour sélectionner au hasard 10 nombres entre 10 et 100, les stocker dans un tableau et les trier.
var iarray = []; fonction getrandom (start, iend) {var ichoice = isStart - iend +1; return math.floor (math.random () * ichoice + isStart;} pour (var i = 0; i <10; i ++) {iarray.push (getrandom (10,100));} iarray.sort ();20. Combinez les deux nombres et supprimez le deuxième élément.
La copie de code est la suivante:
var array1 = ['a', 'b', 'c'];
var barray = ['d', 'e', 'f'];
var carray = array1.concat (barray);
carray.splice (1,1);
21. Comment ajouter, supprimer, déplacer, copier, créer et trouver des nœuds (JS natif, de vraies bases, pas d'écriture détaillée de chaque étape)
1) Créer un nouveau nœud
CreatedocumentFragment () // Créer un fragment DOM
createElement () // Créez un élément spécifique
createTextNode () // Créer un nœud de texte
2) Ajouter, supprimer, remplacer, insérer
appendchild () // ajouter
reposechild () // retirer
remplacechild () // remplacer
insertbeFore () // insérer
3) Rechercher
getElementsByTagName () // par le nom de la balise
getElementsByName () // La valeur de la propriété de nom de l'élément est adoptée
getElementById () // via l'élément ID, l'unicité
22. Il y a une telle URL: http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e. Veuillez écrire un programme JS pour extraire chaque paramètre Get dans l'URL (le nom du paramètre et le nombre de paramètres sont incertains) et le renvoyez dans une structure JSON sous la forme d'une valeur clé, telle que {a: '1', b: '2', c: '', d: 'xxx', e: indéfini}.
Répondre:
fonction SelelizeUrl (url) {var result = {}; url = url.split ("?") [1]; var map = url.split ("&"); for (var i = 0, len = map.length; i <len; i ++) {result [map [i] .split ("=") [0]] = map [i] .split ("=") [1]; } Retour Résultat;}23. Quelle est la différence entre le constructeur d'expression régulière var reg = new regexp ("xxx") et l'expression régulière littérale var reg = //? Expression régulière correspondant à la boîte aux lettres?
Réponse: Lorsque vous utilisez le constructeur regexp (), non seulement vous devez échapper aux citations (c'est-à-dire / "signifie"), mais vous devez également doubler la barre de bar (c'est-à-dire // signifie a /). L'utilisation de littéraux d'expression régulière est plus efficace.
Correspondance régulière de l'e-mail:
La copie de code est la suivante: var regmail = /^(@a-za-z0-9_- :+@ ((_a-za-z0-9_- :+(._a-za-z0-9_-
24. Regardez le code suivant et donnez le résultat de sortie.
La copie de code est la suivante:
pour (var i = 1; i <= 3; i ++) {
setTimeout (function () {
console.log (i);
}, 0);
};
Réponse: 4 4 4.
Cause: le processeur d'événements JavaScript ne s'exécutera pas tant que le thread n'est pas inactif. La question est donc de savoir comment faire la sortie de code ci-dessus 1 2 3?
pour (var i = 1; i <= 3; i ++) {setTimeout ((fonction (a) {// exécuter instantanément la fonction console.log (a);}) (i), 0); }; 1 // sortie 2325. Écrivez une fonction pour effacer les espaces avant et après la chaîne. (Compatible avec tous les navigateurs)
Utilisez l'interface intégrée TRIM (), en considérant la compatibilité:
if (! string.prototype.trim) {string.prototype.trim = function () {return this.replace (/ ^ / s + /, "") .replace (// s + $ /, ""); }} // tester la fonction var str = "/ t / n Test String" .trim (); alert (str == "Test String"); // alerte "vrai"26. Quels sont les rôles de Callee et de l'appelant en JavaScript?
Répondre:
L'appelant renvoie une référence à la fonction qui appelle la fonction actuelle;
Callee renvoie la fonction de fonction exécutée, c'est-à-dire le corps de l'objet de fonction spécifié.
Donc la question est? Si une paire de lapins donne naissance à une paire de lapins chaque mois; Une paire de nouveaux lapins donnera naissance aux lapins du deuxième mois; En supposant que chaque paire de lapins est une femme et un mâle, combien de paires de lapins peuvent-elles se reproduire dans le n mois? (Utilisez Callee pour terminer)
var result = []; fonction fn (n) {// la séquence de fibonacci typique if (n == 1) {return 1; } else if (n == 2) {return 1; } else {if (result [n]) {return result [n]; } else {//argument.callee () signifie fn () résultat [n] = arguments.callee (n-1) + arguments.callee (n-2); Retour Résultat [n]; }}}JavaScript intermédiaire:
1. Implémentez un clone de fonction qui peut copier les 5 principaux types de données en JavaScript (y compris le numéro, la chaîne, l'objet, le tableau, booléen)
• Point de recherche 1: est-il clair si la différence entre le type de données de base et le type de données de référence est stockée en mémoire?
• Point de recherche 2: savez-vous comment déterminer quel type de variable est?
• Point d'inspection 3: conception de l'algorithme récursif
// Méthode 1: object.prototype.clone = fonction () {var o = this.constructor === array? []: {}; pour (var e dans ceci) {o [e] = type de ce [e] === "objet"? this [e] .clone (): this [e]; } return o;} // Méthode 2: / ** * clone un objet * @param obj * @returns * / function clone (obj) {var buf; if (obj instanceof array) {buf = []; // Créer un tableau vide var i = obj.length; while (i--) {buf [i] = clone (obj [i]); } return buf; } else if (obj instanceof objet) {buf = {}; // Créer un objet vide pour (var k dans obj) {// Ajouter un nouvel attribut à cet objet buf [k] = clone (obj [k]); } return buf; } else {// Les variables ordinaires attribuent directement RETOUR OBJ; }}2. Comment éliminer les éléments en double dans un tableau?
var arr = [1,2,3,3,4,4,5,5,6,1,9,3,25,4]; fonction derepeat () {var newarr = []; var obj = {}; var index = 0; var l = arr.length; pour (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) continuer; } return newarr; } var newarr2 = derepeat (arr); alerte (newarr2); // Sortie 1,2,3,4,5,6,9,253. Xiaoxian est un joli chiot (chien), et ses cris sont très beaux. Chaque fois qu'il voit son propriétaire, il criera (Yelp). À partir de cette description, vous pouvez obtenir les objets suivants:
function dog () {this.wow = function () {alert ('wow'); } this.yelp = function () {this.wow (); }}Comme Xiaoxian, Xiaomang s'est avéré être un chiot mignon, mais soudain, un jour, il est devenu fou (Maddog), et quand il a vu quelqu'un, il criait (wow) et continuait d'appeler (yelp) toutes les demi-secondes. Veuillez utiliser le code pour l'implémenter en fonction de la description. (Héritage, prototype, setInterval)
Répondre:
fonction maddog () {this.yelp = function () {var self = this; setInterval (function () {self.wow ();}, 500); }} Maddog.prototype = new dog (); // pour testvar dog = new dog (); dog.yelp (); var maddog = new maddog (); maddog.yelp ();4. L'UL suivant, comment alerter son index lorsque vous cliquez sur chaque colonne? (fermeture)
La copie de code est la suivante:
<ul id = ”test”>
<li> C'est le premier </li>
<li> C'est le deuxième </li>
<li> Il s'agit du troisième élément </li>
</ul>
Répondre:
// Méthode 1: var lis = document.getElementById ('2223'). GetElementsByTagName ('li'); for (var i = 0; i <3; i ++) {lis [i] .index = i; lis [i] .onclick = function () {alert (this.index); };} // Méthode 2: var lis = document.getElementById ('2223'). GetElementsByTagName ('li'); for (var i = 0; i <3; i ++) {lis [i] .index = i; lis [i] .onclick = (fonction (a) {return function () {alert (a);}}) (i);}5. Écrivez une fonction JavaScript et entrez un sélecteur du type spécifié (seuls trois sélecteurs CSS simples: id, classe et tagname, et aucun sélecteur de combinaison compatible n'est requis) pour renvoyer les nœuds DOM correspondants, qui doivent envisager la compatibilité et les performances du navigateur.
/ *** @param sélecteur {String} Le sélecteur CSS entrant. * @return {array} * /
Réponse: (trop longtemps, cliquez pour ouvrir)
var query = function (sélecteur) {var reg = /^(#)?(/.)?(/w+)$/IMG; var RegResult = reg.exec (sélecteur); var result = []; // Si c'est un sélecteur d'ID if (RegResult [1]) {if (RegResult [3]) {if (typeof document.QuerySelector === "function") {result.push (document.QuerySelector (RegResult [3])); } else {result.push (document.getElementById (RegResult [3])); }}} // Si c'est un sélecteur de classe else if (RegResult [2]) {if (RegResult [3]) {if (typeof document.getElementsByClassName === 'function') {var doms = document.getElementsByClassName (RegResult [3]); if (doms) {result = convertoArray (doms); }} // Si la fonction GetElementsByClassName n'est pas prise en charge else {var allDoms = document.getElementsByTagName ("*"); for (var i = 0, len = alldoms.length; i <len; i ++) {if (alldoms [i] .classname.search (new regexp (regrsult [2]))> -1) {result.push (alldoms [i]); }}}}}}} // Si c'est un sélecteur de balise else if (RegResult [3]) {var doms = document.getElementsByTagName (RegResult [3] .tolowerCase ()); if (doms) {result = converttoArray (doms); }} Retour Résultat; } fonction converttoArray (nœuds) {var array = null; try {array = array.prototype.slice.call (nœuds, 0); // pour les navigateurs non IE} catch (ex) {array = new Array (); pour (var i = 0, len = nœuds.length; i <len; i ++) {array.push (nœuds [i])}} return array; }6. Veuillez évaluer le code suivant et donner des suggestions d'amélioration.
if (window.addeventListener) {var addListener = function (el, type, écouteur, useCapture) {el.addeventListener (type, écouteur, useCapture); };} else if (document.all) {addListener = function (el, type, écouteur) {el.attachevent ("on" + type, function () {écouteur.apply (el);}); }}évaluer:
• La fonction AddListener ne doit pas être déclarée dans les instructions if et else, elle doit être déclarée en premier;
• Pas besoin d'utiliser Window.AddeventListener ou Document. Tout pour détecter le navigateur, la détection des capacités doit être utilisée;
• Étant donné que attachEvent a ce problème de pointage dans IE, il doit être géré lors de l'appel
Les améliorations sont les suivantes:
Fonction Addevent (elem, type, Handler) {if (elem.addeventListener) {elem.addeventListener (Type, Handler, false); } else if (elem.attachevent) {elem ['temp' + type + handler] = handler; elem [type + handler] = function () {elem ['temp' + type + handler] .Apply (elem); }; elem.attachevent ('on' + type, elem [type + handler]); } else {elem ['on' + type] = handler; }}7. Ajoutez une méthode à l'objet String, passez dans un paramètre de type de chaîne, puis retournez l'espace de prix entre chaque caractère de la chaîne, par exemple:
AddSpace ("Hello World") // -> 'Helloworld D'
La copie de code est la suivante:
String.prototype.spacify = function () {
retourner this.split (''). join ('');
};
Puis répondez aux questions ci-dessus, alors la question est
1) Est-il sûr d'ajouter des méthodes directement au prototype de l'objet? Surtout sur les objets d'objet. (Je ne peux pas répondre à cela? J'espère que je vais vous dire ce que je sais.)
2) Quelle est la différence entre la déclaration de fonction et l'expression de la fonction?
Réponse: En JavaScript, lorsque l'analyseur charge les données dans l'environnement d'exécution, il ne traite pas également les déclarations de fonctions et les expressions de fonction. L'analyseur sera le premier à lire les déclarations de fonction et à les rendre disponibles (accessibles) avant d'exécuter un code. Quant à l'expression de la fonction, vous devez attendre que l'analyseur s'exécute à la ligne de code où il est situé avant qu'il ne soit analysé et exécuté. (Promotion de la déclaration de fonction)
8. Définissez une méthode de journal afin qu'il puisse proxy Console.log Méthodes.
Une méthode réalisable:
La copie de code est la suivante:
Fonction Log (msg) {
console.log (msg);
}
Log ("Hello World!") // Hello World!
Et si vous souhaitez passer plusieurs paramètres? De toute évidence, la méthode ci-dessus ne peut pas répondre aux exigences, donc une meilleure méthode est:
La copie de code est la suivante:
Fonction Log () {
console.log.apply (console, arguments);
};
La question est donc de savoir quelles sont les similitudes et les différences entre les méthodes d'application et d'appel?
Répondre:
Les deux fonctions de l'application et de l'appel sont les mêmes, c'est-à-dire en appelant une méthode d'un objet et en remplaçant l'objet actuel par un autre objet. Modifie le contexte de l'objet d'une fonction du contexte initial au nouvel objet spécifié par ThisOBJ.
Mais il y a une différence de paramètres entre les deux. La signification du premier paramètre est la même, mais pour le deuxième paramètre: Appliquer est passé dans un tableau de paramètres, c'est-à-dire combinant plusieurs paramètres dans un tableau, et l'appel est passé en tant que paramètre de l'appel (à partir du deuxième paramètre). Par exemple, la méthode d'écriture d'application correspondante pour Func.Call (Func1, Var1, Var2, Var3) est: Func.Apply (Func1, [Var1, Var2, Var3]).
9.Quelle est un pseudo-array en javascript? Comment convertir un pseudo-array en un tableau standard?
Répondre:
Pseudo-array (tableau de classe): Vous ne pouvez pas appeler directement des méthodes de tableau ou vous attendre à tout comportement spécial des attributs de longueur, mais vous pouvez toujours les traverser sur de véritables méthodes de traversée de tableau. En règle générale, les paramètres d'argument de la fonction sont également appelés getElementsByTagName, document.childNodes, etc., et ils renvoient tous des objets nodelist qui appartiennent aux pseudo-arrayons. Les tableaux peuvent être convertis en objets de tableau réels en utilisant array.prototype.slice.call (fakEArray).
Supposons que nous suivons la huitième tige de question, nous devons ajouter un préfixe "(app)" à chaque méthode de journal, comme "Hello World!" -> '(App) Hello World!'. La méthode est la suivante:
fonction log () {var args = array.prototype.slice.call (arguments); // Afin d'utiliser la méthode du tableau de décalage, convertit l'argument en réel args.unshift ('(app)'); console.log.apply (console, args); };10. Pour comprendre le contexte de la portée et ceci, voir le code suivant:
var user = {count: 1, getCount: function () {return this.Count; }}; console.log (user.getCount ()); // quoi? var func = user.getCount; console.log (func ()); // quoi?Quelles sont les sorties de deux consoles? Pourquoi?
La réponse est 1 et non définie.
Func est exécuté dans le contexte de Winodw, de sorte que la propriété Count ne peut pas être accessible.
La question est alors de savoir comment s'assurer que l'UESR peut toujours accéder au contexte de la FUNC, c'est-à-dire, rendez-vous correctement.
Réponse: La bonne façon consiste à utiliser function.prototype.bind. Compatible avec le code complet de chaque navigateur est le suivant:
Function.prototype.bind = function.prototype.bind || function (context) {var self = this; return function () {return self.apply (contexte, arguments); };} var func = user.getCount.bind (user); console.log (func ());11. Quelle est la différence entre la fenêtre de JS native.onload et $ (document) .ready (function () {})? Comment implémenter la méthode Ready de JQ à l'aide de JS native?
La méthode Window.onLoad () doit attendre que tous les éléments, y compris l'image de la page, soient chargés avant l'exécution.
$ (document) .ready () est exécuté une fois la structure DOM dessinée, et il n'est pas nécessaire d'attendre qu'il soit chargé.
/ * * Passez la fonction à WhenReady () * Lorsque le document est analysé et prêt pour l'opération, la fonction est appelée comme la méthode du document * / var quandréady = (function () {// Cette fonction renvoie lorsque la fonction est exécutée var Ready) Handler (e) {if (Ready) return; // Dans le cas où l'appel de ces fonctions peut entraîner l'enregistrement de plus de fonctions pour (var i = 0; i <funcs.length; i ++) {funcs [i] .call (document);} // Le gestionnaire d'événements est exécuté en totalité, changez l'état prêt et supprimez toutes les fonctions Ready = true; funcs = null; } // Enregistrez le gestionnaire pour tout événement reçu if (document.addeventListener) {document.addeventListener ('DomContentloaded', Handler, False); Document.AddeventListener ('ReadyStateChange', Handler, False); // IE9 + Window.AddeventListener ('Load', Handler, False); } else if (document.attachevent) {document.attachevent ('onreadystatechange', handler); window.attachevent ('onload', gestionnaire); } // return whenReady () function return function whenReady (fn) {if (ready) {fn.call (document); } else {funcs.push (fn); }}}) ();Si le code ci-dessus est très difficile à comprendre, la version simplifiée suivante:
fonction ready (fn) {if (document.addeventListener) {// standard du navigateur document.addeventListener ('DomContentOaded', fonction () {// l'événement de connexion pour éviter le déclenchement répété de document.reMoveEventListener ('DomContentSloadd', arguments.callee, false); fn (); // exécuter la fonction}, false); } else if (document.attachevent) {// ie document.attachevent ('onreadystatechange', function () {if (document.readystate == 'complete') {document.detachevent ('onreadystatechange', arguments.callee); fn (); // fonction exécution}})); }};12. (Question de conception) Vous souhaitez implémenter une traînée sur un certain nœud de la page? Comment faire? (Utilisez JS natif)
Répondez simplement au concept, voici quelques points clés
1. Bind Mousedown, Mousemove, Mouseup Events aux nœuds qui doivent être traînés
2. Après le déclenchement de l'événement Mousedown, commencez à traîner et à traîner
3. Lorsque MouseMove, vous devez obtenir la position de traînée via Event.Clientx et Clienty, et mettre à jour la position en temps réel.
4. Lorsque vous souris, faites glisser et dépose des extrémités
5. Faites attention aux limites du navigateur
13
fonction setcookie (nom, valeur, jours) {// ajouter une variable de temps à cookie var exp = new Date (); exp.setTime (exp.getTime () + jours * 24 * 60 * 60 * 1000); // Définissez le temps d'expiration sur Documents Document.cookie = name + "=" + Escape (valeur) + "; Expires =" + Exp.TogMtString (); } fonction 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)); } Retour Résultat;} (function () {var otips = document.getElementById ('Tips'); // Supposons que l'ID de TIPS est Tips var Page = {Check: Function () {// Vérifiez si le cookie «Cookie existe et permettez l'affichage de var Tips = Getcookie ('TIPS'); if (! if (TIPS == "Never_show_again") return false; En supposant que les conseils sont des éléments de niveau de ligne}, init: function () {var _This = this; page.init ();}) ();14. Dites quelle est la fonction des fonctions suivantes? Que devrait être rempli dans la zone vide?
// définir (fonction (fenêtre) {fonction fn (str) {this.str = str;} fn.prototype.format = function () {var arg = ______; return this.str.replace (_____, fonction (a, b) {return arg [b] || ";});} window.fn = fn;}) (window fn ('<p> <a href = "{0}"> {1} </a> <span> {2} </span> </p>');Réponse: Le but d'accès aux fonctions est d'utiliser la fonction de format pour remplacer les paramètres de la fonction comme {0} et renvoyer un résultat formaté:
Le premier vide est: arguments
Le deuxième vide est: // {(/ d +) /} / ig
15. Utilisez JavaScript orienté objet pour vous présenter. (Pas de réponse, essayez-le vous-même)
Réponse: Objet ou JSON est un bon choix.
16. Expliquez le principe de la mise en œuvre de l'Ajax par JS.
Le nom complet d'Ajax est JavaScript asynchrone et XML. Parmi eux, asynchrone signifie asynchrone, qui est différente de la méthode de synchronisation utilisée dans le développement Web traditionnel.
Le principe d'Ajax est simplement d'utiliser l'objet XMLHTTPRequest pour envoyer des demandes asynchrones au serveur, d'obtenir des données du serveur, puis d'utiliser JavaScript pour utiliser le DOM pour mettre à jour la page.
XMLHttpRequest est le mécanisme central de l'Ajax. Il a d'abord été introduit dans IE5 et est une technologie qui prend en charge les demandes asynchrones. En termes simples, JavaScript peut rapidement faire des demandes et traiter les réponses au serveur sans bloquer l'utilisateur. N'obtenez aucun effet de rafraîchissement.
Les propriétés de l'objet XMLHttpRequest sont:
• OnReadyStateChang le gestionnaire d'événements pour l'événement déclenché par chaque changement d'état.
• ResponseText renvoie la forme de chaîne des données du processus du serveur.
• Réponsexml objet de données de document compatible DOM compatible renvoyé du processus du serveur.
• Les codes numériques d'état renvoyés du serveur, tels que commun 404 (non trouvé) et 200 (prêt)
• Informations sur la chaîne de texte d'état accompagnée du code d'état
• Valeur d'état d'objet prêt à l'emploi
• 0 (non initialisé) L'objet a été établi, mais n'a pas été initialisé (la méthode ouverte n'a pas été appelée)
• 1 (initialisation) L'objet a été établi et la méthode d'envoi n'a pas encore été appelée
• 2 (données d'envoi) La méthode d'envoi a été appelée, mais l'état actuel et l'en-tête HTTP sont inconnus
• 3 (Transmission de données) Certaines données ont été reçues, car la réponse et les en-têtes HTTP sont incomplètes, une erreur se produira lorsqu'une réponse et ResponseText est obtenue.
• 4 (complet) Les données sont reçues et les données de réponse complètes peuvent être obtenues via ResponseXML et ResponseText.
Ce qui suit est une encapsulation simple d'une fonction: (légèrement long, cliquez pour ouvrir)
ajax ({URL: "./testxhr.aspx", // Type d'adresse de demande: "Post", // Données de méthode de demande: {nom: "Super", âge: 20}, // Demande de dataType de paramètre: "JSON", fonction: fonction (statut) {// code exécuté après le placement de défaillance}); fonction ajax (options) {options = options || {}; options.type = (options.Type || "get"). ToupperCase (); options.datatype = options.datatype || "JSON"; var params = formatParams (options.data); // Create - non Ie6 - Étape 1 if (window.xmlHttpRequest) {var xhr = new XmlHttpRequest (); } else {// ie6 et sous les navigateurs var xhr = new activeXObject ('Microsoft.xmlhttp'); } // reçoit - étape 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); }}} // connecter et envoyer - étape 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); // Définissez le type de contenu lors de la soumission du formulaire xhr.setRequestHeader ("Content-Type", "Application / X-WWW-Form-Urlencoded"); xhr.send (params); }} // Format Fonction Paramètre FormatParams (données) {var arr = []; for (var name in data) {arr.push (encodeuRIComponent (name) + "=" + EncodeuRIComponent (data [name])); } arr.push (("v =" + math.random ()). remplacer (".")); return arr.join ("&"); }Le code ci-dessus décrit grossièrement le processus Ajax, et l'explication est googlée par vous-même. La question n'est pas terminée. Savez-vous ce que sont JSONP et PJAX?
Répondre:
JSONP: (JSON avec padding) est une méthode de demande de domaine croisé. Le principe principal est de profiter de la fonctionnalité que les balises de script peuvent être demandées entre les domaines. L'attribut SRC envoie la demande au serveur, le serveur renvoie le code JS, la page Web accepte la réponse, puis l'exécute directement. C'est la même chose que le principe de référence à des fichiers externes via des balises de script. JSONP se compose de deux parties: fonction et données de rappel. La fonction de rappel est généralement contrôlée par la page Web et envoyée du côté serveur sous forme de paramètres. Le côté serveur épelle la fonction et les données dans une chaîne et revient.
PJAX: PJAX est une nouvelle technologie basée sur Ajax + History.pushstate. 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