前端JS面试题汇总 Part 2 (null与undefined/闭包/foreach与map/匿名函数/代码组织)

原文：https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md

最近将持续翻译JavaScript面试题，希望对各位有所帮助。　　

（文章中斜体字部分为译者添加）

目录：

Part 1（事件委托/this关键字/原型链/AMD与CommonJS/自执行函数）

Part 2 (null与undefined/闭包/foreach与map/匿名函数/代码组织)

Part 3 (宿主对象与原生对象/函数调用方式/call与apply/bind/document.write)

　　1、null，undefined，变量未声明有什么区别？如何判断一个变量的值是上述几种情况？

　　变量未声明 是指给一个变量赋值时，没有使用var,let,const关键字对变量进行声明。未声明的变量会被默认定在全局，而非当前作用域中。在严格模式中，试图给一个未声明的变量赋值时，JS会抛出ReferenceError的异常。就像要避免滥用全局变量一样，我们同样要避免操作未声明的变量。可以在操作变量时加入try/catch来捕获未声明的变量异常。

function foo() {
  x = 1; // 在严格模式下将会抛出异常：ReferenceError
}

foo();
console.log(x); // 1

　　undefined变量则是指一个变量被声明，但是未被赋值。这种变量的类型也是 undefined。如果将一个没有返回值的函数执行结果赋值给一个变量的话，这个变量值也会是undefined。如果判断一个变量值是不是undefined呢？可以使用typeof 判断返回值是不是恒等于（===）字符串 "undefined"。这里要注意，不能使用双等号判断变量是否等于undefined，因为用null去判断的话也会返回true。（原文意思是 null == undefined 返回的值也是true）

var foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true

console.log(foo == null); // true.  不能这么去判断，结果不准确

function bar() {}
var baz = bar();
console.log(baz); // undefined

　　null值变量是指一个变量被赋值为null。虽然null的表面意思是空值，但是它和undefined是完全不一样的，因为它已经被赋值过了。如果判断null值？最简单的方法就是用恒等于进行判断。同样要注意的是，这里也不能使用双等号来判断，原因和上面一样，因为undefined判断也会返回true。　

var foo = null;
console.log(foo === null); // true

console.log(foo == undefined); // true.不能这么去判断，结果不准确

　　我有一个个人习惯，就是不会让变量出现未声明或者未赋值的情况。我会在变量声明的同时给它赋值为null，哪怕这个变量后续不再使用。 

　　引用文档：

　　https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables

　　https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined

 

　　2、什么是闭包，为什么/如何去使用闭包？

　　闭包是函数和声明该函数的词法环境的组合。这里的语法实际上是指语法作用域使用一个变量的位置就是声明该变量的位置。闭包函数拥有访问外部函数变量的能力，哪怕外部函数已经执行完毕。（由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露）

　　为什么要使用闭包？

• 私有数据/使用闭包模拟私有函数。其他应用场景可以参考：module pattern
• Partial applications or currying　　　　

　　引用文档：

　　https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

　　https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36

　　

　　3、请阐述forEach与map两个循环方法的差别。如果选择？

　　为了方便理解这两个方法，让我们分别来看这两个方法的功能。

　　forEach

• 遍历数组中的每个元素
• 为每个元素执行一个回调函数
• 不会有任何返回值

• const a = [1, 2, 3];
  const doubled = a.forEach((num, index) => {
    // Do something with num and/or index.
  });
  
  // doubled = undefined

　　

　　map

• 遍历数组中的每个元素
• 为每个元素执行改函数，并对应生成一个新元素，最终返回一个新数组

const a = [1, 2, 3];
const doubled = a.map(num => {
  return num * 2;
});

// doubled = [2, 4, 6]

　　所以这两个方法最主要的区别就在于map会返回一个新数组。如果你需要接收处理结果，并且不修改原始数组，那么map就是最合适的选择。如果你只是希望单独循环一个数组的元素，那么forEach可以胜任。

　　引用文档：

　　https://codeburst.io/javascript-map-vs-foreach-f38111822c0f

　　　　

　　4、匿名函数有哪些典型的应用场景？

　　可以用在自执行函数中。自执行函数包含一些代码在本地作用域中，这样变量就被声明在本地作用域中，而不会污染全局变量。

(function() {
  // Some code here.
})();

　　

　　作为一次性使用的回调函数，不需要在其他地方继续使用该函数。将回调函数定义在代码的右侧，这样的代码看起来整体性与可读性比较好，同时也不用到处去查找函数的实现体。　

setTimeout(function() {
  console.log('Hello world!');
}, 1000);

 

　　作为函数式变成构造器或者Lodash的参数。　

const arr = [1, 2, 3];
const double = arr.map(function(el) {
  return el * 2;
});
console.log(double); // [2, 4, 6]

 

　　引用文档：

　　https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions

　　https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo

 

　　5、如何进行代码组织？（组件模式还是传统的继承？）

　　以前，我用Backbone来创建我的数据模型，它鼓励使用面向对象的思想，先创建Backbone模型，然后在把方法加上去。

　　虽然组件模式仍然很棒，但时至今日，我开始使用基于React/Redux的Flux架构，这是一种鼓励单向数据流动的函数式编程方式。我将使用普通对象来作为model层，然后写一些纯工具类的方法来管理这些对象。和其他的Redux程序一样，State通过actions和reducers来进行维护，

　　另外我会尽量避免使用传统的继承。如果非要用，我也会遵循以下规则：these rules