js常见面试题(一)

1、使用typeof bar ===“object”来确定bar是否是一个对象时有什么潜在的缺陷?这个陷阱如何避免?

尽管typeof bar ===“object”是检查bar是否是对象的可靠方法,但JavaScript中令人惊讶的问题是null也被认为是一个对象!

因此,对于大多数开发人员来说,下面的代码会将真实(而不是错误)记录到控制台:

var bar = null;
console.log(typeof bar === "object"); // true

只要知道这一点,就可以通过检查bar是否为空来轻松避免该问题:

console.log((bar !== null) && (typeof bar === "object")); // false

为了在我们的答案更加的完整,还有两件事值得注意:

首先,如果bar是一个函数,上面的解决方案将返回false。在大多数情况下,这是所期望的行为,但是在您希望函数返回true的情况下,您可以将上述解决方案修改为:

console.log((bar !== null) && ((typeof bar === "object") || (typeof bar === "function")));

其次,如果bar是数组,则上述解决方案将返回true(例如,如果var bar = [];)。在大多数情况下,这是所希望的行为,因为数组确实是对象,但是在您想要对数组也是false的情况下,可以将上述解决方案修改为:

console.log((bar !== null) && (typeof bar === "object") && (toString.call(bar) !== "[object Array]"));

但是,还有一个替代方法对空值,数组和函数返回false,但对于对象则为true:

console.log((bar !== null) && (bar.constructor === Object));

isArray使得数组的情况非常简单,包括它自己的空检查:

console.log(Array.isArray(bar));

2、下面的代码将输出到控制台的是什么,为什么?

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

由于a和b都在函数的封闭范围内定义,并且由于它们所在的行以var关键字开头,因此大多数JavaScript开发人员会希望typeof a和typeof b在上面的示例中都未定义。

但是,情况并非如此。这里的问题是大多数开发人员错误地理解语句var a = b = 3;以下简写为

var b = 3;var a = b;

但实际上,var a = b = 3;其实是速记:

b = 3;var a = b;

因此(如果您不使用严格模式),代码片段的输出将为:

a defined? false
b defined? true

但是如何在封闭函数的范围之外定义b?那么,因为声明var a = b = 3;是语句b = 3的简写;并且var a = b; b最终成为一个全局变量(因为它不在var关键字后面),因此它仍然在作用域内,即使在封闭函数之外。

注意,在严格模式下(即,使用strict),语句var a = b = 3;会产生一个ReferenceError的运行时错误:b没有定义,从而避免了可能导致的任何头headfakes/bugs。 (这就是为什么你应该在你的代码中使用strict,一个重要的例子!)

3、下面的代码将输出到控制台的是什么?,为什么?

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

以上代码将输出到控制台:

outer func:  this.foo = barouter func:  
self.foo = barinner func:  
this.foo = undefinedinner func: 
self.foo = bar

在外部函数中,this和self都引用myObject,因此都可以正确地引用和访问foo。

但在内部函数中,这不再指向myObject。因此,this.foo在内部函数中是未定义的,而对局部变量self的引用仍然在范围内并且可以在那里访问。

4、在功能块中封装JavaScript源文件的全部内容的重要性和原因是什么?

这是一种日益普遍的做法,被许多流行的JavaScript库(jQuery,Node.js等)所采用。这种技术在文件的全部内容周围创建一个闭包,这可能最重要的是创建一个私有名称空间,从而有助于避免不同JavaScript模块和库之间的潜在名称冲突。

这种技术的另一个特点是为全局变量提供一个容易引用(可能更短)的别名。

5、在JavaScript源文件的开头包含'use strict'的意义和有什么好处?

这里最简单也是最重要的答案是use strict是一种在运行时自动执行更严格的JavaScript代码解析和错误处理的方法。

如果代码错误被忽略或失败,将会产生错误或抛出异常。总的来说,这是一个很好的做法。

严格模式的一些主要优点包括:

  • 使调试更容易 如果代码错误本来会被忽略或失败,那么现在将会产生错误或抛出异常,从而更快地发现代码中的问题,并更快地指引它们的源代码。
  • 防止意外全局 如果没有严格模式,将值赋给未声明的变量会自动创建一个具有该名称的全局变量。这是JavaScript中最常见的错误之一。在严格模式下,尝试这样做会引发错误。
  • 消除隐藏威胁 在没有严格模式的情况下,对null或undefined的这个值的引用会自动强制到全局。这可能会导致许多headfakes和pull-out-your-hair类型的错误。在严格模式下,引用null或undefined的这个值会引发错误。
  • 不允许重复的参数值 严格模式在检测到函数的重复命名参数(例如,函数foo(val1,val2,val1){})时会引发错误,从而捕获代码中几乎可以肯定存在的错误,否则您可能会浪费大量的时间追踪。
  • 使eval()更安全 eval()在严格模式和非严格模式下的行为方式有些不同。最重要的是,在严格模式下,在eval()语句内部声明的变量和函数不会在包含范围中创建(它们是以非严格模式在包含范围中创建的,这也可能是问题的常见来源)。
  • 抛出无效的使用错误的删除符 删除操作符(用于从对象中删除属性)不能用于对象的不可配置属性。当试图删除一个不可配置的属性时,非严格代码将自动失败,而在这种情况下,严格模式会引发错误

6、考虑下面的两个函数。他们都会返回同样的值吗?为什么或者为什么不?

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

令人惊讶的是,这两个函数不会返回相同的结果。而是:

console.log("foo1 returns:");
console.log(foo1());
console.log("foo2 returns:");
console.log(foo2());

会产生:

foo1 returns:{bar: "hello"}
foo2 returns:undefined

这不仅令人惊讶,而且特别令人烦恼的是,foo2()返回未定义而没有引发任何错误。

原因与JavaScript中分号在技术上是可选的事实有关(尽管忽略它们通常是非常糟糕的形式)。因此,在foo2()中遇到包含return语句的行(没有其他内容)时,会在return语句之后立即自动插入分号。

由于代码的其余部分是完全有效的,即使它没有被调用或做任何事情(它只是一个未使用的代码块,它定义了一个属性栏,它等于字符串“hello”),所以不会抛出任何错误。

这种行为也被认为是遵循了在JavaScript中将一行开头大括号放在行尾的约定,而不是在新行的开头。如此处所示,这不仅仅是JavaScript中的一种风格偏好。

7、什么是NaN?它的类型是什么?如何可靠地测试一个值是否等于NaN?

NaN属性表示“不是数字”的值, 这个特殊值是由于一个操作是非数字的(例如 "abc"/4) 或者因为操作的结果是非数组而无法执行的

虽然这看起来很简单,但是NaN有一些令人惊讶的特征,如果开发者们没有意识到这些特征,就会导致bug

虽然NaN的意思是“不是数字”,但它的类型是数字:

console.log(typeof NaN === "number"); // true

此外,NaN相比任何事情,甚至本身 都是false

console.log(NaN === NaN)

测试数字是否等于NaN的半可靠方法是使用内置函数isNaN(),但即使使用isNaN()也不是一个好的解决方案。.

一个更好的解决方案要么是使用value!==值,如果该值等于NaN,那么只会生成true。另外,ES6提供了一个新的Number.isNaN()函数 ,它与旧的全局isNaN()函数不同,也更加可靠。

8、下面的代码输出什么?解释你的答案。

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 == 0.3);

对这个问题的一个有教养的回答是 :"不能确定,它可能打印0.3 和 true ,或者可能不打印,JavaScript中数字全部用浮点精度处理,因此可能不会总是产生预期结果

上面提供的示例是演示此问题的经典案例。令人惊讶的是,它会打印出来:

0.30000000000000004
false

一个典型的解决方案是比较两个数组与特殊常数Number.EPSILON的绝对差值

function areTheNumbersAlmostEqual(num1, num2) {
  return Math.abs(num1 - num2) < Number.EPSILON;
}
console.log(areTheNumbersAlmostEqual(0.1 + 0.2, 0.3));

9、执行下面的代码时,按什么顺序将数字1-4记录到控制台?为什么?

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

这些值将按以下顺序记录:

1
4
2
3

我们先来解释一下这些可能更为明显的部分:

首先显示1和4,因为它们是通过简单调用console.log()而没有任何延迟记录的

在3之后显示,因为在延迟1000毫秒(即1秒)之后记录2,而在0毫秒的延迟之后记录3。

但是,如果在延迟0毫秒后记录3,这是否意味着它正在被立即记录?而且,如果是这样,不应该在4之前记录它,因为4是由后面的代码行记录的吗?

答案与正确理解JavaScript事件和时间有关。 .

浏览器有一个事件循环,它检查事件队列并处理未决事件。例如,如果在浏览器繁忙时(例如,处理onclick)在后台发生事件(例如脚本onload事件),则该事件被附加到队列中。当onclick处理程序完成时,将检查队列并处理该事件(例如,执行onload脚本)。

同样,如果浏览器繁忙,setTimeout()也会将其引用函数的执行放入事件队列中。

当值为零作为setTimeout()的第二个参数传递时,它将尝试“尽快”执行指定的函数。具体来说,函数的执行放置在事件队列中,以在下一个计时器滴答时发生。但请注意,这不是直接的;该功能不会执行,直到下一个滴答声。这就是为什么在上面的例子中,调用console.log(4)发生在调用console.log(3)之前(因为调用console.log(3)是通过setTimeout调用的,所以稍微延迟了一点)。

10、编写一个简单的函数(少于160个字符),返回一个布尔值,指示字符串是否是palindrome。

function isPalindrome(str) {
  let a = str.replace(/\W/g, "");
  console.log(a);
  str = a.toLowerCase();
  return str == str.split("").reverse().join("");
}

例如:

console.log(isPalindrome("level")); // true
console.log(isPalindrome("levels")); // false
console.log(isPalindrome("A car, a man, a maraca")); // true
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容