Questions d'entretien JS (à lire absolument pour les entretiens)

1.Quels types de données sont renvoyés par typeof en javascript ?

  alert(typeof [1, 2]); //object 
    alert(typeof 'leipeng'); //string 
    var i = true;  
    alert(typeof i); //boolean 
    alert(typeof 1); //number 
    var a;  
    alert(typeof a); //undefined
    function a(){};
    alert(typeof a) //function

2. Donnez des exemples de 3 conversions de type forcées et de 2 conversions de type implicites ?
Forçage (parseInt(). , parseFloat(),Number())
Implicit (==, !!)

3. La différence entre split() et join()
Le premier est découpé dans un tableau, le dernier Il s'agit de convertir le tableau en chaîne

4. Méthode de tableau pop() push() unshift() shift()
Push() ajoute une queue pop() pour supprimer
Unshift( ) head Ajoutez l'en-tête shift() et supprimez

5. Quelle est la différence entre la liaison d'événement et les événements ordinaires
Méthode ordinaire d'ajout d'événements :

var btn = document.getElementById("hello");
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}

Exécuter ? le code ci-dessus uniquement Les événements seront ajoutés à l'aide de la méthode de liaison d'événement d'alerte 2
 :

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
alert(1);
},false);
btn.addEventListener("click",function(){
alert(2);
},false);

L'exécution du code ci-dessus alertera d'abord 1, puis alertera 2
La méthode normale de l'ajout d'événements ne prend pas en charge l'ajout de plusieurs événements, l'événement du bas écrasera celui du haut et plusieurs événements peuvent être ajoutés par liaison d'événement (addEventListener).
addEventListener n'est pas compatible avec les versions inférieures d'IE
Les événements ordinaires ne peuvent pas être annulés
addEventListener prend également en charge le bouillonnement d'événements + la capture d'événements

6 La différence entre les flux d'événements IE et DOM
1. Ordre d'exécution différent,
2. Les paramètres sont différents
3. Ajouter un événement activé ou non
4. Cela renvoie à la question

7. Quelles sont les méthodes d'écriture de compatibilité entre IE. et normes

var ev = ev || window.event 
document.documentElement.clientWidth || document.body.clientWidth 
var target = ev.srcElement||ev.target

8. La différence entre appeler et appliquer
méthode d'appel :
Syntaxe : call(thisObj, Object1,Object2...)
Définition : Appel une méthode d'un objet, remplace l'objet actuel par un autre objet.
Remarque :
La méthode call peut être utilisée pour appeler une méthode à la place d'un autre objet. La méthode d'appel modifie le contexte d'objet d'une fonction du contexte initial au nouvel objet spécifié par thisObj.
Si le paramètre thisObj n'est pas fourni, l'objet Global est utilisé comme thisObj.

Méthode apply :
Syntaxe : apply(thisObj, [argArray])
Définition : Appliquer une méthode d'un objet et remplacer l'objet actuel par un autre objet.
Remarque :
Si argArray n'est pas un tableau valide ou n'est pas un objet arguments, une TypeError sera provoquée.
Si ni argArray ni thisObj ne sont fournis, l'objet Global sera utilisé comme thisObj et aucun paramètre ne pourra être transmis.

9.b Hériter de la méthode d'un

function A( age, name ){ 
this.age = age;
this.name = name;
A.prototype.show = function(){
alert('父级方法');
}
function B(age,name,job){
A.apply( this, arguments );
this.job = job;
B.prototype = new A();
var b = new A(14,'侠客行');
var a = new B(15,'狼侠','侠客');

10 Comment empêcher la propagation d'événements et les événements par défaut

canceBubble()只支持IE,return false,stopPropagation()

11. Ajoutez Supprimer et remplacez la méthode insérée dans un certain point de contact

obj.appendChid() 
obj.insertBefore()
obj.replaceChild()
obj.removeChild()

12 Les objets locaux, les objets intégrés et les objets hôtes de JavaScript
Les objets locaux sont des expressions rationnelles d'obj de tableau, etc. peut être instancié avec new
Les objets intégrés sont des objets Load Math et d'autres objets qui ne peuvent pas être instanciés
L'hôte est le document, la fenêtre, etc. fourni avec le navigateur

13. différence entre window.onload et document ready
window.onload est dans le dom Une fois l'arborescence des documents chargée et tous les fichiers chargés, une fonction Document.ready est exécutée. L'espèce native n'a pas cette méthode. ().ready(function) dans jquery. Une fois l'arborescence des documents dom chargée, une fonction est exécutée (notez que l'achèvement du chargement de l'arborescence des documents ne signifie pas que tous les fichiers ont été chargés).
$(document).ready est exécuté avant window.onload. window.onload ne peut apparaître qu'une seule fois, $(document).ready peut apparaître plusieurs fois

14."==" et "== ="
Le premier convertira automatiquement le type, tandis que le second ne le fera pas

15. Politique de même origine de JavaScript
Un script ne peut lire que les propriétés des fenêtres et des documents provenant de la même source. La même source fait référence ici à la combinaison du nom d'hôte, du protocole et du numéro de port

16. Quel type de langage est JavaScript et quelles sont ses caractéristiques ?
Il n’y a pas de réponse standard.
javaScript est un langage de script littéral. Il s'agit d'un langage basé sur un prototype à typage dynamique, faiblement typé, avec prise en charge intégrée des types. Son interpréteur s'appelle le moteur JavaScript, qui fait partie du navigateur et est largement utilisé dans les langages de script côté client. Il a été utilisé pour la première fois sur les pages Web HTML pour ajouter des fonctions dynamiques aux pages Web HTML. JavaScript est compatible avec la norme ECMA, c'est pourquoi il est également appelé ECMAScript.
Fonctionnalités de base
1. C'est un langage de script interprété (le code n'est pas précompilé).
2． Il est principalement utilisé pour ajouter des comportements interactifs aux pages HTML (une application sous Standard Universal Markup Language).
3. Il peut être directement intégré dans des pages HTML, mais son écriture sous forme de fichier js distinct facilite la séparation de la structure et du comportement.
4． Fonctionnalité multiplateforme, avec la prise en charge de la plupart des navigateurs, il peut fonctionner sur plusieurs plates-formes (telles que Windows, Linux, Mac, Android, iOS, etc.).

17.Quels sont les types de données de JavaScript ?
Types de données de base : String, boolean, Number, Undefined, Null
Type de données de référence : Object(Array,Date,RegExp,Function)
Ensuite, la question est de savoir comment déterminer si une variable est un tableau type de données ?
Méthode 1. Déterminez s'il possède des "propriétés de tableau", telles que la méthode slice(). Vous pouvez définir vous-même la méthode slice pour la variable, elle échoue donc parfois
Méthode 2.obj instanceof Array est incorrecte dans certaines versions d'IE
Méthode 3. Les deux méthodes 1 et 2 ont des failles et une nouvelle est définie dans la méthode ECMA Script5 Array.isArray(), pour garantir sa compatibilité, la meilleure méthode est la suivante :

if(typeof Array.isArray==="undefined")
{
  Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    }; 
}

18. Zone de saisie avec un ID connu, vous souhaitez obtenir la valeur d'entrée de cette zone de saisie, comment faire ? (N'utilise pas de frameworks tiers)

document.getElementById(“ID”).value

19.希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’) 
var checkBoxList = []; 
var len = domList.length;　　//缓存到局部变量 
while (len--) {　　//使用while的效率会比for循环更高 
if (domList[len].type == ‘checkbox’) { 
    　　checkBoxList.push(domList[len]); 
} 
}

20.设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)

var dom = document.getElementById(“ID”); 
dom.innerHTML = “xxxx”
dom.style.color = “#000”

21.当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
直接在DOM里绑定事件：b28bc9950e24daa5d8431db20bacf9ca94b3e26ee717c64999d7867364b1b4a3
在JS里通过onclick绑定：xxx.onclick = test 
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test) 
那么问题来了，Javascript的事件流模型都有什么？ 
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播 
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的 
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

22.看下列代码输出为何？解释原因。
var a;
alert(typeof a); // undefined
alert(b); // 报错
解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

23.看下列代码,输出什么？解释原因。
var a = null; 
alert(typeof a); //object 
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

24.看下列代码,输出什么？解释原因。

var undefined; 
undefined == null; // true 
1 == true;   // true 
2 == true;   // false 
0 == false;  // true 
0 == '';     // true 
NaN == NaN;  // false 
[] == false; // true 
[] == ![];   // true

undefined与null相等，但不恒等（===） 
一个是number一个是string时，会尝试将string转换为number 
尝试将boolean转换为number，0或1 
尝试将Object转换成number或string，取决于另外一个对比量的类型 
所以，对于0、空字符串的判断，建议使用 “===” 。“===”会先判断两边的值类型，类型不匹配时为false。 
那么问题来了，看下面的代码，输出什么，foo的值为什么？ 
var foo = "11"+2-"1"; 
console.log(foo); 
console.log(typeof foo); 
执行完后foo的值为111，foo的类型为String。

25.看代码给答案。

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);

答案：2（考察引用数据类型细节）

26.已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。
答案：alert(stringArray.join(“”))

27.已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

function combo(msg){
    var arr=msg.split("-");
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    return msg;
}

(考察基础API)
28.var numberArray = [3,6,2,4,1,5]; （考察基础API）
1) 实现对该数组的倒排，输出[5,1,4,2,6,3] 
numberArray.reverse()
2) 实现对该数组的降序排列，输出[6,5,4,3,2,1]
numberArray.sort(function(a,b){return b-a})

29.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26
var d = new Date(); 
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month 3c042d0e6e5459de3fc2dcef52724b93b6c5a531a458a2e790c1fd6421739d1c{$id}b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c{$name}b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）
答案："a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c{$id}b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c{$id}_{$name}b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5".replace(/{\$id}/g, '10').replace(/{\$name}/g, 'Tony');

31.为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将95ec6993dc754240360e28e0de8de30a, &, “进行转义

function escapeHtml(str) { 
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
                   case “<”:
                      return “<”;
                   case “>”:
                      return “>”;
                   case “&”:
                      return “&”;
                   case “\””:
                      return “"”;
      }
  });
}

32.foo = foo||bar ，这行代码是什么意思？为什么要这样写？
答案：if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

33.看下列代码，将会输出什么?(变量声明提升)

var foo = 1; 
(function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
})()
答案：输出undefined 和 2。上面代码相当于：
var foo = 1;
(function(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2; 
  })()

函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。

34.用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

function randomNub(aArray, len, min, max) {
  if (len >= (max - min)) {
  return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';
  }
  if (aArray.length >= len) {
  aArray.sort(function(a, b) {
  return a - b
  });
  return aArray;
  }
  var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
  for (var j = 0; j < aArray.length; j++) {
  if (nowNub == aArray[j]) {
  randomNub(aArray, len, min, max);
  return;
  }
  }
  aArray.push(nowNub);
  randomNub(aArray, len, min, max);
  return aArray;
  }
  var arr=[];
  randomNub(arr,10,10,100);

35.把两个数组合并，并删除第二个元素。

var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

36.怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
1）创建新节点

createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入

appendChild()      //添加
removeChild()      //移除
replaceChild()      //替换
insertBefore()      //插入

3）查找

getElementsByTagName()    //通过标签名称
getElementsByName()     //通过元素的Name属性的值
getElementById()        //通过元素Id，唯一性

37.有这样一个URL：，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
答案： 

function serilizeUrl(url) { 
var urlObject = {}; 
if (/\?/.test(url)) { 
var urlString = url.substring(url.indexOf("?") + 1); 
var urlArray = urlString.split("&"); 
for (var i = 0, len = urlArray.length; i < len; i++) { 
var urlItem = urlArray[i]; 
var item = urlItem.split("="); 
urlObject[item[0]] = item[1]; 
} 
return urlObject; 
} 
return null; }

38.正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？
答案：当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高。 
邮箱的正则匹配：

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

39.看下面代码，给出输出结果。

for(var i=1;i<=3;i++){ 
  setTimeout(function(){
      console.log(i);  
    },0); 
};

答案：4 4 4。

原因：Javascript事件处理器在线程空闲之前不会运行。追问，如何让上述代码输出1 2 3？

for(var i=1;i<=3;i++){
   setTimeout((function(a){  //改成立即执行函数
       console.log(a);   
   })(i),0); 
};

40.写一个function，清除字符串前后的空格。（兼容所有浏览器）
使用自带接口trim()，考虑兼容性： 

if (!String.prototype.trim) {
 String.prototype.trim = function() {
 return this.replace(/^\s+/, "").replace(/\s+$/,"");
 }
}
  // test the function
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!