24 JavaScript-Interviewfragen

Heutzutage entscheiden sich immer mehr Menschen für die Programmierbranche. Wenn wir unser Studium beenden, werden wir bei Vorstellungsgesprächen unweigerlich sehr nervös sein und schüchtern. Während eines Programmiererinterviews gibt es zusätzlich zum Interviewer auch Interviewfragen, die speziell darauf ausgelegt sind, Ihre Fähigkeiten zu beurteilen. In diesem Artikel geht es also um 24 JavaScript-Interviewfragen. Nun, Freunde, es gibt einen Vorteil, also beeilen Sie sich und holen Sie sich!

Empfohlene verwandte Artikel: Die umfassendste Sammlung von js-Interviewfragen im Jahr 2020 (aktuell)

1. Gibt es einige potenzielle Nachteile bei der Verwendung von typeof bar === „object“, um festzustellen, ob bar ein Objekt ist? Wie kann dieser Nachteil vermieden werden?

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

Wie aus der obigen Ausgabe ersichtlich ist, kann typeof bar === "object" nicht genau bestimmen, dass bar ein Objekt ist. Sie können diesen Nachteil vermeiden, indem Sie Object.prototype.toString.call(bar) === "[object Object]" verwenden:

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 Wird der folgende Code etwas Falsches auf der Konsole ausgeben? Warum?

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

Dies hängt mit dem Variablenbereich zusammen. Die Ausgabe wird wie folgt geändert:

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

Disassemblieren Sie die Variablenzuweisung in der selbstausführenden Funktion:

b = 3;var a = b;

So wird b zu einer globalen Variablen und a ist eine lokale Variable der selbstausführenden Funktion.

3. Was wird der folgende Code auf der Konsole ausgeben? Warum?

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();

Die ersten und zweiten Ausgaben sind nicht schwer zu beurteilen. Vor ES6 hatte JavaScript nur einen Funktionsbereich, sodass das IIFE in func seinen eigenen unabhängigen Bereich hatte und auf das äußere Selbst zugreifen konnte Daher meldet die dritte Ausgabe einen Fehler, da dies im zugänglichen Bereich nicht definiert ist, und die vierte Ausgabe ist bar. Wenn Sie Verschlüsse kennen, ist es leicht zu lösen:

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

Wenn Sie mit Verschlüssen nicht vertraut sind, können Sie hier klicken: Apropos Verschlüsse aus der Scope-Kette

4. Setzen Sie die JavaScript-Code Was bedeutet es, ihn in einen Funktionsblock einzubinden? Warum das tun?

Mit anderen Worten, warum sollten Sie einen sofort aufgerufenen Funktionsausdruck verwenden?

IIFE verfügt über zwei klassische Verwendungsszenarien: eines ähnelt der regelmäßigen Ausgabe von Datenelementen in einer Schleife und das andere ähnelt der JQuery/Node-Plug-In- und Modulentwicklung.

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

Die obige Ausgabe ist nicht 0, 1, 2, 3, 4, wie Sie dachten, sondern die gesamte Ausgabe ist 5, dann kann IIFE nützlich sein:

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

In Die Entwicklung von JQuery/Node-Plug-Ins und -Modulen ist ebenfalls ein großes IIFE, um eine variable Verschmutzung zu vermeiden:

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

5. Es gibt Vorteile bei der JavaScript-Entwicklung im strikten Modus („strikte Verwendung“) ') Pferdevorteile?

Beseitigen Sie einige unangemessene und ungenaue Aspekte der Javascript-Syntax und reduzieren Sie einige seltsame Verhaltensweisen.

Beseitigen Sie einige unsichere Aspekte der Codeausführung und gewährleisten Sie die Sicherheit der Codeausführung.

Verbessern Sie den Compiler Effizienz und Erhöhung der Laufgeschwindigkeit;

ebnen Sie den Weg für neue Versionen von Javascript in der Zukunft.

6. Sind die Rückgabewerte der folgenden beiden Funktionen gleich? Warum?

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

In Programmiersprachen werden Semikolons (;) grundsätzlich zum Trennen von Anweisungen verwendet, was die Lesbarkeit und Übersichtlichkeit des Codes verbessern kann. Wenn in JS jede Anweisung eine separate Zeile einnimmt, können Sie normalerweise das Semikolon (;) zwischen den Anweisungen weglassen. Der JS-Parser entscheidet, ob das Semikolon automatisch ausgefüllt wird, basierend darauf, ob es normal kompiliert werden kann:

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

In der obigen Situation wird das Semikolon nicht automatisch ausgefüllt, um den Code korrekt zu analysieren. Bei Return-, Break-, Continue- und anderen Anweisungen wird der Parser jedoch automatisch ausgefüllt, wenn unmittelbar darauf eine neue Zeile folgt im Semikolon (;) am Ende, sodass die zweite Funktion oben wie folgt aussieht:

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

Die zweite Funktion gibt also undefiniert zurück.

7. Ist Shenma NaN? Wie teste ich, ob ein Wert gleich NaN ist?

NaN ist die Abkürzung für Not a Number, ein spezieller numerischer Wert in JavaScript. Sein Typ ist Number. Sie können isNaN(param) verwenden, um zu bestimmen, ob ein Wert vorliegt ist 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. Erklären Sie die Ausgabe des folgenden Codes

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

Der Zahlentyp in JavaScript ist Gleitkommazahl in JavaScript übernimmt IEEE-754 Dies ist eine Binärdarstellung, die Brüche wie 1/2, 1/8, 1/1024 genau darstellen kann. Jede Gleitkommazahl belegt 64 Bit. Die Darstellung binärer Gleitkommazahlen kann jedoch einfache Zahlen wie 0,1 nicht genau darstellen und es treten Rundungsfehler auf.

Aufgrund des Binärsystems kann JavaScript Brüche wie 1/10, 1/2 usw. nur eingeschränkt ausdrücken. Binär wird 1/10 (0,1) als 0,00110011001100110011 dargestellt... Beachten Sie, dass 0011 unendlich wiederholt wird, was durch Rundungsfehler verursacht wird. Daher werden bei Operationen wie 0,1 + 0,2 die Operanden zuerst in Binärwerte konvertiert und dann Neu berechnen:

0,1 => 0,0001 1001 1001 1001… (Endlosschleife)
0,2 => 0,0011 0011 0011 0011… (Endlosschleife)

Dezimalzahl der Gleitkommazahl mit doppelter Genauigkeit Teil unterstützt bis zu 52 Bit, also erhalten wir nach der Addition der beiden eine Zeichenfolge von 0,0100110011001100110011001100110011001100... Eine Binärzahl, die aufgrund der Beschränkung der Dezimalstellen in Gleitkommazahlen abgeschnitten wird .

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

一是先升幂再降幂：

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面试题中笔试题目的汇总

Das obige ist der detaillierte Inhalt von24 JavaScript-Interviewfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!