原文: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); //

  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中可能导致内存泄露)

  为什么要使用闭包?

  引用文档:

  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

    

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

  1. [译]前端JS面试题汇总 Part 1(事件委托/this关键字/原型链/AMD与CommonJS/自执行函数)

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

  2. 前端JS面试题汇总 Part 3 (宿主对象与原生对象/函数调用方式/call与apply/bind/document.write)

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

  3. 2016 JS 笔试题汇总:

    1 1 1 CS&S(中软国际): 1 JavaScript 循环表达式: 2  JavaScript表达式boolean返回值: 3 网页中的事件/HTML 事件属性/JavaScript ...

  4. WEB前端常见面试题汇总:(一)

    1.JS找字符串中出现最多的字符 例如:求字符串'nininihaoa'中出现次数最多字符 方法一: var str = "nininihaoa"; var o = {}; for ...

  5. 一道常被人轻视的前端JS面试题

    前言 年前刚刚离职了,分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多 ...

  6. 一道常被人轻视的前端JS面试题(转)

    分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多难只是因为大多面试者过 ...

  7. 前端JS面试题

    题目如下: function Foo() { getName = function () { alert (1); }; return this; } Foo.getName = function ( ...

  8. JS中判断一个对象是否为null、undefined、0

    1.判断undefined: var tmp = undefined; if (typeof(tmp) == "undefined"){ alert("undefined ...

  9. web前端常见面试题汇总

    一.理论知识 1.1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务器端响应http请求,浏览器 ...

随机推荐

  1. 读《你不知道的JavaScript(上卷)》后感-浅谈JavaScript作用域(一)

    原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们,也入手看看这 ...

  2. HTML中padding和margin的区别和用法

     margin(外边距) 定义:margin是用来隔开元素与元素的间距,发生在元素本身的外部,margin用于布局分开元素使元素与元素互不相干. 提示:margin: top right bottom ...

  3. mybatis中@Param的用法和作用

    用注解来简化xml配置的时候,@Param注解的作用是给参数命名,参数命名后就能根据名字得到参数值,正确的将参数传入sql语句中 我们先来看Mapper接口中的@Select方法 package Ma ...

  4. 【SqlServer系列】浅谈SQL Server事务与锁(上篇)

    一  概述 在数据库方面,对于非DBA的程序员来说,事务与锁是一大难点,针对该难点,本篇文章视图采用图文的方式来与大家一起探讨. “浅谈SQL Server 事务与锁”这个专题共分两篇,上篇主讲事务及 ...

  5. SpringMVC实现PUT请求上传文件

    在JQuery中,我们可以进行REST ful中delete和put的请求,但是在java EE标准中,默认只有在POST请求的时候,servlet 才会通过getparameter()方法取得请求体 ...

  6. MonogoDB 练习一

    1.解析文件,仅处理 FIELDS 字典中作为键的字段,并返回清理后的值字典列表 需求: 1.根据 FIELDS 字典中的映射更改字典的键 2.删掉"rdf-schema#label&quo ...

  7. 深入理解JAVA虚拟机之JVM性能篇---基础知识点(运行时数据区域)

    一. 运行数据区域划分 各个数据区域功能如下: 1. 程序计数器: 较小的一块内存空间,可以看做是当前线程所执行的字节码的行号指示器,每条线程都有一个独立的程序计数器,各条线程之间计数器互不影响,独立 ...

  8. CSS核心内容之浮动

    1.浮动涉及到左浮动,右浮动,清除浮动. 2.浮点的特点: 1.向指定的方向浮动,并且让出空间 2.如果后面的元素也是浮动的,那么后面的元素就会在碰到前面的浮动的元素或者边框时,就定位在那里 3.如果 ...

  9. 小白学Docker之Compose

    承接上篇文章:小白学Docker之基础篇,自学网站来源于https://docs.docker.com/get-started 概念 Compose是一个编排和运行多容器Docker应用的工具,主要是 ...

  10. 《Python网络编程》学习笔记--从例子中收获的计算机网络相关知识

    从之前笔记的四个程序中(http://www.cnblogs.com/take-fetter/p/8278864.html),我们可以看出分别使用了谷歌地理编码API(对URL表示地理信息查询和如何获 ...