JavaScript面试代码片段问题及答案

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

1.使用typeof bar === "object"来确定bar是否是对象的潜在陷阱是什么？如何避免这个陷阱？

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

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

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

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

console.log((bar !== null) && (typeof bar === "object") && (! $.isArray(bar)));

2.下面的代码将输出什么到控制台，为什么？

(function(){
  var a = b = 3;
})();

console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));

var b = 3;
var a = b;

b = 3;
var a = b;

a defined? false
b defined? true

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 = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar

4.封装JavaScript源文件的全部内容到一个 函数块有什么意义及理由？

(function($) { /* jQuery plugin code referencing $ */ } )(jQuery);

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

使调试更加容易。那些被忽略或默默失败了的代码错误，会产生错误或抛出异常，因此尽早提醒你代码中的问题，你才能更快地指引到它们的源代码。
防止意外的全局变量。如果没有严格模式，将值分配给一个未声明的变量会自动创建该名称的全局变量。这是JavaScript中最常见的错误之一。在严格模式下，这样做的话会抛出错误。
消除this强制。如果没有严格模式，引用null或未定义的值到this值会自动强制到全局变量。这可能会导致许多令人头痛的问题和让人恨不得拔自己头发的bug。在严格模式下，引用 null或未定义的this值会抛出错误。
不允许重复的属性名称或参数值。当检测到对象（例如，var object = {foo: "bar",foo: "baz"};）中重复命名的属性，或检测到函数中（例如，function foo(val1,val2,val1){}）重复命名的参数时，严格模式会抛出错误，因此捕捉几乎可以肯定是代码中的bug可以避免浪费大量的跟踪时间。
使eval()更安全。在严格模式和非严格模式下，eval()的行为方式有所不同。最显而易见的是，在严格模式下，变量和声明在eval()语句内部的函数不会在包含范围内创建（它们会在非严格模式下的包含范围中被创建，这也是一个常见的问题源）。
在delete使用无效时抛出错误。delete操作符（用于从对象中删除属性）不能用在对象不可配置的属性上。当试图删除一个不可配置的属性时，非严格代码将默默地失败，而严格模式将在这样的情况下抛出异常。

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:
Object {bar: "hello"}
foo2 returns:
undefined

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

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

console.log(NaN === NaN);  // logs "false"

8.下列代码将输出什么？并解释原因。

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

0.30000000000000004
false

9.讨论写函数isInteger(x)的可能方法，用于确定x是否是整数。

function isInteger(x) { return (x^0) === x; }

function isInteger(x) { return Math.round(x) === x; }

function isInteger(x) { return (typeof x === 'number') && (x % 1 === 0);

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

> String(1000000000000000000000)
'1e+21'

> parseInt(1000000000000000000000,10)
1

> parseInt(1000000000000000000000,10) === 1000000000000000000000
false

10.下列代码行1-4如何排序，使之能够在执行代码时输出到控制台？为什么？

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

1和4之所以放在前面，是因为它们是通过简单调用console.log()而没有任何延迟输出的
2之所以放在3的后面，是因为2是延迟了1000毫秒（即，1秒）之后输出的，而3是延迟了0毫秒之后输出的。

11.写一个简单的函数（少于80个字符），要求返回一个布尔值指明字符串是否为回文结构。

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

console.log(ispalindrome("level"));                   // logs 'true'
console.log(ispalindrome("levels"));                  // logs 'false'
console.log(ispalindrome("A car,a man,a maraca"));  // logs 'true'

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

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

function sum(x,y) {
  if (y !== undefined) {
    return x + y;
  } else {
    return function(y) { return x + y; };
  }
}

13.请看下面的代码片段：

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click',function(){ console.log(i); });
  document.body.appendChild(btn);
}

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click',(function(i) {
    return function() { console.log(i); };
  })(i));
  document.body.appendChild(btn);
}

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  (function (i) {
    btn.addEventListener('click',function() { console.log(i); });
  })(i);
  document.body.appendChild(btn);
}

['a','b','c','d','e'].forEach(function (value,i) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click',function() { console.log(i); });
  document.body.appendChild(btn);
});

14.下面的代码将输出什么到控制台，为什么？

var arr1 = "john".split('');
var arr2 = arr1.reverse();
var arr3 = "jones".split('');
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));

"array 1: length=5 last=j,o,n,e,s"
"array 2: length=5 last=j,s"

调用数组对象的reverse()方法并不只返回反顺序的阵列，它也反转了数组本身的顺序（即，在这种情况下，指的是arr1）。
reverse()方法返回一个到数组本身的引用（在这种情况下即，arr1）。其结果为，arr2仅仅是一个到arr1的引用（而不是副本）。因此，当对arr2做了任何事情（即当我们调用arr2.push(arr3);）时，arr1也会受到影响，因为arr1和arr2引用的是同一个对象。

15.下面的代码将输出什么到控制台，为什么？

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

"122"
"32"
"02"
"112"
"NaN2"
NaN

16.下面的递归代码在数组列表偏大的情况下会导致堆栈溢出。在保留递归模式的基础上，你怎么解决这个问题？

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

17.JavaScript中的“闭包”是什么？请举一个例子。

var globalVar = "xyz";

(function outerFunc(outerarg) {
  var outerVar = 'a';

  (function innerFunc(innerArg) {
    var innerVar = 'b';

    console.log(
      "outerarg = " + outerarg + "\n" +
      "innerArg = " + innerArg + "\n" +
      "outerVar = " + outerVar + "\n" +
      "innerVar = " + innerVar + "\n" +
      "globalVar = " + globalVar);

  })(456);
})(123);

outerarg = 123
innerArg = 456
outerVar = a
innerVar = b
globalVar = xyz

18.下面的代码将输出什么：

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

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

19.以下代码行将输出什么到控制台？

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

0 || 1 = 1
1 || 2 = 1
0 && 1 = 0
1 && 2 = 2

20.执行下面的代码时将输出什么？请解释。

console.log(false == '0')
console.log(false === '0')

true
false

21.以下代码将输出什么？并解释你的答案。

var a={},b={key:'b'},c={key:'c'};

a[b]=123;
a[c]=456;

console.log(a[b]);

22.以下代码行将输出什么到控制台？

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

f(1): returns n,which is 1
f(2): returns 2 * f(1),which is 2
f(3): returns 3 * f(2),which is 6
f(4): returns 4 * f(3),which is 24
f(5): returns 5 * f(4),which is 120
f(6): returns 6 * f(5),which is 720
f(7): returns 7 * f(6),which is 5040
f(8): returns 8 * f(7),which is 40320
f(9): returns 9 * f(8),which is 362880
f(10): returns 10 * f(9),which is 3628800

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

24.下面的代码将输出什么到控制台，为什么：

var hero = {
    _name: 'John Doe',getSecretIdentity: function (){
        return this._name;
    }
};

var stoleSecretIdentity = hero.getSecretIdentity;

console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());

undefined
John Doe

var stoleSecretIdentity = hero.getSecretIdentity.bind(hero);

25.创建一个给定页面上的一个DOM元素，就会去访问元素本身及其所有子元素（不只是它的直接子元素）的函数。对于每个被访问的元素，函数应该传递元素到提供的回调函数。

DOM元素
回调函数（将DOM元素作为其参数）

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
   }
}

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

JavaScript面试代码片段问题及答案

1.使用typeof bar === "object"来确定bar是否是对象的潜在陷阱是什么？如何避免这个陷阱？

2.下面的代码将输出什么到控制台，为什么？

3.下面的代码将输出什么到控制台，为什么？

4.封装JavaScript源文件的全部内容到一个函数块有什么意义及理由？

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

6.考虑以下两个函数。它们会返回相同的东西吗？ 为什么相同或为什么不相同？

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

8.下列代码将输出什么？并解释原因。

9.讨论写函数isInteger(x)的可能方法，用于确定x是否是整数。

10.下列代码行1-4如何排序，使之能够在执行代码时输出到控制台？ 为什么？

11.写一个简单的函数（少于80个字符），要求返回一个布尔值指明字符串是否为回文结构。

13.请看下面的代码片段：

14.下面的代码将输出什么到控制台，为什么？

15.下面的代码将输出什么到控制台，为什么？

16.下面的递归代码在数组列表偏大的情况下会导致堆栈溢出。在保留递归模式的基础上，你怎么解决这个问题？

17.JavaScript中的“闭包”是什么？请举一个例子。

18.下面的代码将输出什么：

19.以下代码行将输出什么到控制台？

20.执行下面的代码时将输出什么？请解释。

21.以下代码将输出什么？并解释你的答案。

22.以下代码行将输出什么到控制台？

24.下面的代码将输出什么到控制台，为什么：

25.创建一个给定页面上的一个DOM元素，就会去访问元素本身及其所有子元素（不只是它的直接子元素）的函数。对于每个被访问的元素，函数应该传递元素到提供的回调函数。

相关推荐

6.考虑以下两个函数。它们会返回相同的东西吗？为什么相同或为什么不相同？

10.下列代码行1-4如何排序，使之能够在执行代码时输出到控制台？为什么？