24 questions d'entretien JavaScript

De nos jours, de plus en plus de gens choisissent le secteur des programmeurs. Lorsque nous aurons terminé nos études, nous sortirons pour trouver un emploi, donc certaines personnes seront forcément très nerveuses lors de l'entretien. et timide. Lors d'un entretien avec un programmeur, en plus de l'intervieweur, il y a également des questions d'entretien spécialement conçues pour évaluer vos capacités, donc cet article porte sur 24 questions d'entretien JavaScript. Maintenant, mes amis, il y a un avantage, alors dépêchez-vous et obtenez-le !

Articles connexes recommandés : La collection la plus complète de questions d'entretien js en 2020 (dernière)

1. Il y a certains inconvénients potentiels à utiliser typeof bar === "object" pour déterminer si bar est un objet ? Comment éviter cet inconvénient ?

let obj = {};let arr = [];console.log(typeof obj === 'object');  //trueconsole.log(typeof arr === 'object');  //trueconsole.log(typeof null === 'object');  //tru

Comme le montre la sortie ci-dessus, typeof bar === "object" ne peut pas déterminer avec précision que la barre est un objet. Vous pouvez éviter cet inconvénient en Object.prototype.toString.call(bar) === "[object Object]":

let obj = {};let arr = [];console.log(Object.prototype.toString.call(obj));
  //[object Object]console.log(Object.prototype.toString.call(arr));  //[object Array]console.log(Object.prototype.toString.call(null));  //[object Null]

2. Le code suivant affichera-t-il un problème sur la console ? Pourquoi?

(function(){
  var a = b = 3;})();console.log("a defined? " + (typeof a !== 'undefined'));   console.log("b defined? " + (typeof b !== 'undefined'));

Ceci est lié à la portée de la variable. Le résultat est modifié comme suit :

console.log(b); //3console,log(typeof a); //undefined

Démontez l'affectation de la variable dans la fonction auto-exécutable :

b = 3;var a = b;

Donc b devient une variable globale et a est une variable locale de la fonction auto-exécutable.

3. Que le code suivant affichera-t-il sur la console ? Pourquoi?

var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log("outer func:  this.foo = " + this.foo);
        console.log("outer func:  self.foo = " + self.foo);
        (function() {
            console.log("inner func:  this.foo = " + this.foo);
            console.log("inner func:  self.foo = " + self.foo);
        }());
    }};myObject.func();

Les première et deuxième sorties ne sont pas difficiles à juger. Avant ES6, JavaScript n'avait qu'une portée fonctionnelle, donc l'IIFE dans func avait sa propre portée indépendante et pouvait accéder à l'extérieur. scope, donc la troisième sortie signalera une erreur car celle-ci n'est pas définie dans la portée accessible, et la quatrième sortie est bar. Si vous connaissez les fermetures, c'est facile à résoudre :

(function(test) {console.log("inner func:  this.foo = " + test.foo);  //'bar'console.log("inner func:  self.foo = " + self.foo);}(self));

Si vous n'êtes pas familier avec les fermetures, vous pouvez cliquer ici : Parler des fermetures de la chaîne de portée

4. Mettez le Code JavaScript Que signifie l'inclure dans un bloc fonction ? Pourquoi faire ça ?

En d’autres termes, pourquoi utiliser l’expression de fonction immédiatement invoquée ?

IIFE propose deux scénarios d'utilisation classiques, l'un est similaire à la sortie régulière d'éléments de données en boucle, et l'autre est similaire au développement de plug-ins et de modules JQuery/Node.

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

La sortie ci-dessus n'est pas 0, 1, 2, 3, 4 comme vous le pensiez, mais toute la sortie est 5, alors IIFE peut être utile :

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

Dans le développement de plug-ins et modules JQuery/Node, afin d'éviter la pollution variable, c'est aussi un gros IIFE :

(function($) { 
        //代码
 } )(jQuery);

5. Il y a des avantages à développer JavaScript en mode strict ('use strict). ') Des bienfaits pour le cheval ?

Éliminer certains aspects déraisonnables et imprécis de la syntaxe Javascript et réduire certains comportements étranges ;

Éliminer certains aspects dangereux de l'exécution du code et assurer la sécurité de l'exécution du code

Améliorer le compilateur ; l'efficacité et augmenter la vitesse d'exécution

ouvrir la voie à de nouvelles versions de Javascript à l'avenir.

6. Les valeurs de retour des deux fonctions suivantes sont-elles les mêmes ? Pourquoi?

function foo1(){
  return {
      bar: "hello"
  };}function foo2(){
  return
  {
      bar: "hello"
  };}

Dans les langages de programmation, les points-virgules (;) sont essentiellement utilisés pour séparer les instructions, ce qui peut augmenter la lisibilité et la netteté du code. En JS, si chaque instruction occupe une ligne distincte, vous pouvez généralement omettre le point-virgule (;) entre les instructions. L'analyseur JS décidera s'il doit remplir automatiquement le point-virgule selon qu'il peut être compilé normalement :

var test = 1 + 2console.log(test);  //3

Dans la situation ci-dessus, afin d'analyser correctement le code, le point-virgule ne sera pas automatiquement rempli. Cependant, pour les instructions return, break, continue et autres, s'il y a une nouvelle ligne immédiatement après, l'analyseur remplira automatiquement dans le point-virgule (;) à la fin, donc La deuxième fonction ci-dessus devient comme ceci :

function foo2(){return;{bar: "hello"};}

Donc la deuxième fonction renvoie undéfini.

7. Shenma est NaN. Est-ce que son type est Shenma ? Comment tester si une valeur est égale à NaN ?

NaN est l'abréviation de Not a Number, une valeur numérique spéciale en JavaScript. Son type est Number Vous pouvez utiliser isNaN(param) pour déterminer si une valeur. est NaN :

console.log(isNaN(NaN)); //trueconsole.log(isNaN(23));
 //falseconsole.log(isNaN('ds')); //trueconsole.log(isNaN('32131sdasd'));
  //trueconsole.log(NaN === NaN); //falseconsole.log(NaN === undefined); 
  //falseconsole.log(undefined === undefined); //falseconsole.log(typeof NaN);
   //numberconsole.log(Object.prototype.toString.call(NaN)); 
   //[object Number]ES6 中，isNaN() 成为了 Number 的静态方法：Number.isNaN().

8. Expliquez le résultat du code suivant

console.log(0.1 + 0.2);   //0.30000000000000004console.log(0.1 + 0.2 == 0.3);  //false

Le type de nombre en JavaScript est à virgule flottante Le nombre à virgule flottante en JavaScript adopte l'IEEE-754. format. Il s'agit d'une règle. Une représentation binaire qui peut représenter avec précision des fractions, telles que 1/2, 1/8, 1/1024, chaque nombre à virgule flottante occupe 64 bits. Cependant, la représentation des nombres binaires à virgule flottante ne peut pas représenter avec précision des nombres simples comme 0,1, et il y aura des erreurs d'arrondi.

En raison du système binaire, JavaScript ne peut pas exprimer des fractions telles que 1/10, 1/2, etc. de manière limitée. En binaire, 1/10 (0,1) est représenté par 0,00110011001100110011... Notez que 0011 est répété à l'infini, ce qui est dû à des erreurs d'arrondi, donc pour des opérations telles que 0,1 + 0,2, les opérandes seront d'abord convertis en binaire, puis Recalculer :

0.1 => 0.0001 1001 1001 1001… (boucle infinie)
0.2 => 0.0011 0011 0011 0011… (boucle infinie)

Décimal d'un nombre à virgule flottante double précision Supports de pièces jusqu'à 52 bits, donc après avoir ajouté les deux, nous obtenons une chaîne de 0,0100110011001100110011001100110011001100... Un nombre binaire qui est tronqué en raison de la limitation des décimales dans les nombres à virgule flottante. À ce stade, convertissez-le en décimal et il devient 0,300000000000000004. .

对于保证浮点数计算的正确性，有两种常见方式。

一是先升幂再降幂：

function add(num1, num2){
  let r1, r2, m;
  r1 = (''+num1).split('.')[1].length;
  r2 = (''+num2).split('.')[1].length;
  m = Math.pow(10,Math.max(r1,r2));
  return (num1 * m + num2 * m) / m;}console.log(add(0.1,0.2));   //0.3console.log(add(0.15,0.2256)); //0.3756

二是是使用内置的 toPrecision() 和 toFixed() 方法，注意，方法的返回值字符串。

function add(x, y) {
    return x.toPrecision() + y.toPrecision()}console.log(add(0.1,0.2));  //"0.10.2"

9、实现函数 isInteger(x) 来判断 x 是否是整数

可以将 x 转换成10进制，判断和本身是不是相等即可：

function isInteger(x) { return parseInt(x, 10) === x; }

ES6 对数值进行了扩展，提供了静态方法 isInteger() 来判断参数是否是整数：

Number.isInteger(25) // trueNumber.isInteger(25.0) // trueNumber.isInteger(25.1) // falseNumber.isInteger("15") // falseNumber.isInteger(true) // false

JavaScript能够准确表示的整数范围在 -2^53 到 2^53 之间（不含两个端点），超过这个范围，无法精确表示这个值。ES6 引入了Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限，并提供了 Number.isSafeInteger() 来判断整数是否是安全型整数。

10、在下面的代码中，数字 1-4 会以什么顺序输出？为什么会这样输出？

(function() {
    console.log(1); 
    setTimeout(function(){console.log(2)}, 1000); 
    setTimeout(function(){console.log(3)}, 0); 
    console.log(4);})();

这个就不多解释了，主要是 JavaScript 的定时机制和时间循环，不要忘了，JavaScript 是单线程的。

11、写一个少于 80 字符的函数，判断一个字符串是不是回文字符串

function isPalindrome(str) {
    str = str.replace(/\W/g, '').toLowerCase();
    return (str == str.split('').reverse().join(''));}

12、写一个按照下面方式调用都能正常工作的 sum 方法

console.log(sum(2,3));   // Outputs 5console.log(sum(2)(3));  // Outputs 5

针对这个题，可以判断参数个数来实现：

function sum() {var fir = arguments[0];if(arguments.length === 2) {return arguments[0] + arguments[1]} else {return function(sec) {return fir + sec;}}}

13、下面的代码会输出什么？为什么？

var arr1 = "john".split(''); j o h nvar arr2 = arr1.reverse(); n h o jvar arr3 = "jones".split(''); j o n e s
arr2.push(arr3);console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));

会输出什么呢？你运行下就知道了，可能会在你的意料之外。

MDN 上对于 reverse() 的描述是酱紫的：

>DescriptionThe reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array.>reverse()

会改变数组本身，并返回原数组的引用。>slice 的用法请参考：slice

14、下面的代码会输出什么？为什么？

console.log(1 +  "2" + "2");console.log(1 +  +"2" + "2");console.log(1 +  -"1" + "2");console.log(+"1" +  "1" + "2");console.log( "A" - "B" + "2");console.log( "A" - "B" + 2);

输出什么，自己去运行吧，需要注意三个点：

多个数字和数字字符串混合运算时，跟操作数的位置有关

console.log(2 + 1 + '3'); / /‘33’console.log('3' + 2 + 1); //'321'

数字字符串之前存在数字中的正负号(+/-)时，会被转换成数字

console.log(typeof '3');   // stringconsole.log(typeof +'3');  //number

同样，可以在数字前添加 ''，将数字转为字符串

console.log(typeof 3);   // numberconsole.log(typeof (''+3));  //string

对于运算结果不能转换成数字的，将返回 NaN

console.log('a' * 'sd');   //NaNconsole.log('A' - 'B');  // NaN

这张图是运算转换的规则

15、如果 list 很大，下面的这段递归代码会造成堆栈溢出。如果在不改变递归模式的前提下修善这段代码？

var list = readHugeList();var nextListItem = function() {
    var item = list.pop();
    if (item) {
        // process the list item...
        nextListItem();
    }};

原文上的解决方式是加个定时器：

var list = readHugeList();var nextListItem = function() {
    var item = list.pop();
    if (item) {
        // process the list item...
        setTimeout( nextListItem, 0);
    }};

解决方式的原理请参考第10题。

16、什么是闭包？举例说明

可以参考此篇：从作用域链谈闭包(去看看)

17、下面的代码会输出什么？为啥？

for (var i = 0; i < 5; i++) {
  setTimeout(function() { console.log(i); }, i * 1000 );}

请往前面翻，参考第4题，解决方式已经在上面了

18、解释下列代码的输出

console.log("0 || 1 = "+(0 || 1));console.log("1 || 2 = "+(1 || 2));console.log("0 && 1 = "+(0 && 1));console.log("1 && 2 = "+(1 && 2));

逻辑与和逻辑或运算符会返回一个值，并且二者都是短路运算符：

逻辑与返回第一个是 false 的操作数 或者 最后一个是 true的操作数

console.log(1 && 2 && 0);  //0console.log(1 && 0 && 1);  //0console.log(1 && 2 && 3);  //3

如果某个操作数为 false，则该操作数之后的操作数都不会被计算

逻辑或返回第一个是 true 的操作数 或者 最后一个是 false的操作数

console.log(1 || 2 || 0); //1console.log(0 || 2 || 1); //2console.log(0 || 0 || false); //false

如果某个操作数为 true，则该操作数之后的操作数都不会被计算

如果逻辑与和逻辑或作混合运算，则逻辑与的优先级高：

console.log(1 && 2 || 0); //2console.log(0 || 2 && 1); //1console.log(0 && 2 || 1); //1

在 JavaScript，常见的 false 值：

0, '0', +0, -0, false, '',null,undefined,null,NaN

要注意空数组([])和空对象({}):

console.log([] == false) //trueconsole.log({} == false) //falseconsole.log(Boolean([])) //trueconsole.log(Boolean({})) //true

所以在 if 中，[] 和 {} 都表现为 true：

19、解释下面代码的输出

console.log(false == '0')console.log(false === '0')请参考前面第14题运算符转换规则的图。

20、解释下面代码的输出

var a={},
    b={key:'b'},
    c={key:'c'};a[b]=123;a[c]=456;console.log(a[b]);

输出是 456，参考原文的解释：

The reason for this is as follows: When setting an object property, JavaScript will implicitly stringify the parameter value. In this case, since b and c are both objects, they will both be converted to "[object Object]". As a result, a[b] anda[c] are both equivalent to a["[object Object]"] and can be used interchangeably. Therefore, setting or referencing a[c] is precisely the same as setting or referencing a[b].

21、解释下面代码的输出

console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(10));

结果是10的阶乘。这是一个递归调用，为了简化，我初始化 n=5，则调用链和返回链如下：

22、解释下面代码的输出

(function(x) {
    return (function(y) {
        console.log(x);
    })(2)})(1);

输出1，闭包能够访问外部作用域的变量或参数。

23、解释下面代码的输出，并修复存在的问题

var hero = {    _name: 'John Doe',    getSecretIdentity: function (){        return this._name;    }};
var stoleSecretIdentity = hero.getSecretIdentity;console.log(stoleSecretIdentity());console.log(hero.getSecretIdentity());
将 getSecretIdentity 赋给 stoleSecretIdentity，等价于定义了 stoleSecretIdentity 函数：
var stoleSecretIdentity =  function (){return this._name;}

stoleSecretIdentity 的上下文是全局环境，所以第一个输出 undefined。若要输出 John Doe，则要通过 call 、apply 和 bind 等方式改变 stoleSecretIdentity 的this 指向(hero)。

第二个是调用对象的方法，输出 John Doe。

24、给你一个 DOM 元素，创建一个能访问该元素所有子元素的函数，并且要将每个子元素传递给指定的回调函数。

函数接受两个参数：

DOM
指定的回调函数

原文利用 深度优先搜索(Depth-First-Search) 给了一个实现：

function Traverse(p_element,p_callback) {
   p_callback(p_element);
   var list = p_element.children;
   for (var i = 0; i < list.length; i++) {
       Traverse(list[i],p_callback);  // recursive call
   }}

以上就是24个JavaScript的面试题，不管你是不是准备要出去找工作了，我相信这一套题目对大家都很有帮助。

相关推荐：

php初级面试题之简述题（一）

php初级面试题之简述题（二）

关于javascript常见面试题_javascript技巧

最让人容易出错的10道php面试题

php面试题中笔试题目的汇总

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!