前端JS面试题汇总 Part 2 (null与undefined/闭包/foreach与map/匿名函数/代码组织)
最近将持续翻译JavaScript面试题,希望对各位有所帮助。
(文章中斜体字部分为译者添加)
目录:
Part 1(事件委托/this关键字/原型链/AMD与CommonJS/自执行函数)
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中可能导致内存泄露)
为什么要使用闭包?
- 私有数据/使用闭包模拟私有函数。其他应用场景可以参考: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
5、如何进行代码组织?(组件模式还是传统的继承?)
以前,我用Backbone来创建我的数据模型,它鼓励使用面向对象的思想,先创建Backbone模型,然后在把方法加上去。
虽然组件模式仍然很棒,但时至今日,我开始使用基于React/Redux的Flux架构,这是一种鼓励单向数据流动的函数式编程方式。我将使用普通对象来作为model层,然后写一些纯工具类的方法来管理这些对象。和其他的Redux程序一样,State通过actions和reducers来进行维护,
另外我会尽量避免使用传统的继承。如果非要用,我也会遵循以下规则:these rules
前端JS面试题汇总 Part 2 (null与undefined/闭包/foreach与map/匿名函数/代码组织)的更多相关文章
- [译]前端JS面试题汇总 Part 1(事件委托/this关键字/原型链/AMD与CommonJS/自执行函数)
原文:https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questio ...
- 前端JS面试题汇总 Part 3 (宿主对象与原生对象/函数调用方式/call与apply/bind/document.write)
原文:https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questio ...
- 2016 JS 笔试题汇总:
1 1 1 CS&S(中软国际): 1 JavaScript 循环表达式: 2 JavaScript表达式boolean返回值: 3 网页中的事件/HTML 事件属性/JavaScript ...
- WEB前端常见面试题汇总:(一)
1.JS找字符串中出现最多的字符 例如:求字符串'nininihaoa'中出现次数最多字符 方法一: var str = "nininihaoa"; var o = {}; for ...
- 一道常被人轻视的前端JS面试题
前言 年前刚刚离职了,分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多 ...
- 一道常被人轻视的前端JS面试题(转)
分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多难只是因为大多面试者过 ...
- 前端JS面试题
题目如下: function Foo() { getName = function () { alert (1); }; return this; } Foo.getName = function ( ...
- JS中判断一个对象是否为null、undefined、0
1.判断undefined: var tmp = undefined; if (typeof(tmp) == "undefined"){ alert("undefined ...
- web前端常见面试题汇总
一.理论知识 1.1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务器端响应http请求,浏览器 ...
随机推荐
- js_7_dom文本
dom编程核心? 绑定事件 找到标签(innerText找标签里文本内容,innerHTML找标签里所有内容) 特殊的标签:input,select,textarea ,通过.value来获取值 3. ...
- Certificate downloaded from cloudexpress:11443 is invalid
问题描述: CertificateManagement : Server is not trusted.Received fatal alert: handshake_failure. Now ins ...
- java里程碑之泛型--使用泛型
现在重新整理下泛型,前面的整理好多的底层的东西理解不深.泛型很重要的,作为java的一个程碑式的改进,还是很有必要认真的理解下人家的JDK的良苦用心的. 1,什么是泛型?为什么要使用泛型? 一定要记住 ...
- 《.NET 设计规范》第 9 章:常用的设计模式
第 9 章:常用的设计模式 9.1 聚合组件 考虑为常用的特性域提供聚合组件. 要用聚合组件来对高层的概念(物理对象)进行建模,而不是对系统级的任务进行建模. 要让聚合组件的名字与众所周知的系统实体相 ...
- 在线生成PDF的网站-HTML 转 PDF 在线
http://pdf.df5d.com/ (服务器问题,演示暂停了,但是 下面介绍的组件还是可以使用的) 将前面用到的wkhtmltopdf用一个服务器程序集成在一起,接受一个URL参数,在生成一 ...
- angular js $post,$get请求传值
困扰了我好几天的问题!!! 刚开始学play框架,在向后台传值时,一直不成功! 当你用$POST传递一个参数时: HTML: <button ng-click=test()>测试</ ...
- ABP官方文档翻译 3.4 领域服务
领域服务 介绍 IDomainService接口和DomainService类 示例 创建接口 服务实现 使用应用服务 一些探讨 为什么只有应用服务? 如何强制使用领域服务? 介绍 领域服务(或者在D ...
- MySQL学习笔记(二)
连接与断开服务器 应该以下面的方式连接MySQL服务器,而不是将密码以明文方式输入连接. C:\> mysql -h host -u user -pEnter password: ******* ...
- BZOJ 3456: 城市规划 [多项式求逆元 DP]
题意: 求出n个点的简单(无重边无自环)无向连通图数目.方案数mod 1004535809(479 * 2 ^ 21 + 1)即可. n<=130000 DP求方案 g(n) n个点所有图的方案 ...
- transform复习之图片的旋转木马效果
效果示意图 <!DOCTYPE><html><head><meta http-equiv="Content-Type" content=& ...