2018年中高级前端面试题目小结
前言
关于前端面试，及面试题目，我之前有很多文章总结过，可以在右侧搜索面试，进行查找。其实面试中可以问的问题很多，最近几年，我也面试过很多工作2-4年的前端，我一般会抓住他们做的项目，进行更详细的追问。所以，初中级前端面试的时候，除了掌握基础知识之外，项目中用到的技术要理清楚，假如你项目中用到的技术，问的时候却一问三不知，那么，基本上就会pass掉了。针对比较资深或者高级的前端面试，可能和初中级面试会有些不一样，当然，针对资深的前端，可能聊得东西更深，更广一些！这篇文章简单聊聊针对中高级前端我们要聊的话题。
一、前端工程化
关于前端工程化，是一个很大的命题，你在知乎上搜索前端工程化，会有一些文章，这些文章可以帮助你理解前端工程化。
说一下我理解的前端工程化吧，前端工程化不单单包括前端的模块化、组件化、自动化，还包括前端性能优化，前端目录规划，前端规范化，自动化测试，发布等等一系列知识。这里我就不一 一介绍了，感兴趣的也可以去读读张云龙的文章：
https://github.com/fouber/blog/issues/3
https://github.com/fouber/blog/issues/10
二、 前端设计模式
其实这里可以作为一篇文章来书写了，不过，假如你不了解，可以网上搜了一下前端设计模式，关于设计模式也是有不少文章的。
三、 前端安全性问题
当然，这个是老的话题，有的在初中级前端面试中也会提及到。但是在中高级面试的时候，你要说出前端安全性问题防御，及前端常见安全性问题的攻击原理是什么。
1、xss跨站脚本攻击（原理、如何进行的、防御手段是什么，要说清楚）
2、CSRF跨站请求伪造（如何伪造法？怎么防御？等等都要说清楚）
3、sql脚本注入（注入方式，防御方式）
4、上传漏洞 （防御方式）
1 跨站脚本攻击(XSS攻击)
XSS(Cross Site Scripting)，跨站脚本攻击。XSS是常见的Web攻击技术之一.所谓的跨站脚本攻击指得是:恶意攻击者往Web页面里注入恶意Script代码，用户浏览这些网页时，就会执行其中的恶意代码，可对用户进行盗取cookie信息、会话劫持等各种攻击.
解决方案:
(1) 输入过滤。永远不要相信用户的输入，对用户输入的数据做一定的过滤。如输入的数据是否符合预期的格式，比如日期格式，Email格式，电话号
码格式等等。这样可以初步对XSS漏洞进行防御。上面的措施只在web端做了限制，攻击者通抓包工具如Fiddler还是可以绕过前端输入的限制，修改请求注入攻击脚本。
因此，后台服务器需要在接收到用户输入的数据后，对特殊危险字符进行过滤或者转义处理，然后再存储到数据库中。(2) 输出编码。服务器端输出到浏览器的数据，
可以使用系统的安全函数来进行编码或转义来防范XSS攻击。在PHP中，有htmlentities()和htmlspecialchars()两个函数可以满足安全要求。相应的JavaScript的编
码方式可以使用JavascriptEncode。(3) 安全编码。开发需尽量避免Web客户端文档重写、重定向或其他敏感操作，同时要避免使用客户端数据，这些操作需尽量在服
务器端使用动态页面来实现。(4) HttpOnly Cookie。预防XSS攻击窃取用户cookie最有效的防御手段。Web应用程序在设置cookie时，将其属性设为HttpOnly，
就可以避免该网页的cookie被客户端恶意JavaScript窃取，保护用户cookie信息。(5)WAF(Web Application Firewall)，Web应用防火墙，主要的功能是防范诸如网页木马、
XSS以及CSRF等常见的Web漏洞攻击。由第三方公司开发，在企业环境中深受欢迎。
2 跨站请求伪造(CSRF攻击)
CSRF(Cross Site Request Forgery)，即跨站请求伪造，是一种常见的Web攻击，但很多开发者对它很陌生。CSRF也是Web安全中最容易被忽略的一种 网站攻击
CSRF攻击的原理:CSRF攻击过程的受害者用户登录网站A，输入个人信息，在本地保存服务器生成的cookie。然后在A网站点击由攻击者构建一条恶意链接跳转到
B网站,然后B网站携带着的用户cookie信息去访问B网站.让A网站造成是用户自己访问的假相,从而来进行一些列的操作,常见的就是转账.
解决方案:
(1) 验证码。应用程序和用户进行交互过程中，特别是账户交易这种核心步骤，强制用户输入验证码，才能完成最终请求。在通常情况下，验证码够很好地遏制
CSRF攻击。但增加验证码降低了用户的体验，网站不能给所有的操作都加上验证码。所以只能将验证码作为一种辅助手段，在关键业务点设置验证码。(2) Referer Check。
HTTP Referer是header的一部分，当浏览器向web服务器发送请求时，一般会带上Referer信息告诉服务器是从哪个页面链接过来的，服务器籍此可以获得一些信息用于处
理。可以通过检查请求的来源来防御CSRF攻击。正常请求的referer具有一定规律，如在提交表单的referer必定是在该页面发起的请求。所以通过检查http包头referer的值
是不是这个页面，来判断是不是CSRF攻击。但在某些情况下如从https跳转到http，浏览器处于安全考虑，不会发送referer，服务器就无法进行check了。若与该网站同域的
其他网站有XSS漏洞，那么攻击者可以在其他网站注入恶意脚本，受害者进入了此类同域的网址，也会遭受攻击。出于以上原因，无法完全依赖Referer Check作为防御CSRF
的主要手段。但是可以通过Referer Check来监控CSRF攻击的发生。(3) Anti CSRF Token。目前比较完善的解决方案是加入Anti-CSRF-Token，即发送请求时在HTTP 请
求中以参数的形式加入一个随机产生的token，并在服务器建立一个拦截器来验证这个token。服务器读取浏览器当前域cookie中这个token值，会进行校验该请求当中的token
和cookie当中的token值是否都存在且相等，才认为这是合法的请求。否则认为这次请求是违法的，拒绝该次服务。这种方法相比Referer检查要安全很多，token可以在用户
登陆后产生并放于session或cookie中，然后在每次请求时服务器把token从session或cookie中拿出，与本次请求中的token 进行比对。由于token的存在，攻击者无法再构造
出一个完整的URL实施CSRF攻击。但在处理多个页面共存问题时，当某个页面消耗掉token后，其他页面的表单保存的还是被消耗掉的那个token，其他页面的表单提交时会出
现token错误。
3 SQL注入攻击
SQL注入(SQL Injection)，应用程序在向后台数据库传递SQL(Structured Query Language，结构化查询语言)时，攻击者将SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令.
解决方案:
(1) 防止系统敏感信息泄露。设置php.ini选项display_errors=off，防止php脚本出错之后，在web页面输出敏感信息错误，让攻击者有机可乘。(2) 数据转义。设置php.ini选项magic_quotes_gpc=on，它会将提交的变量中所有的’(单引号)，”(双引号)，\(反斜杠)，空白字符等都在前面自动加上\。或者采用mysql_real_escape()函数或addslashes()函数进行输入参数的转义。(3) 增加黑名单或者白名单验证。白名单验证一般指，检查用户输入是否是符合预期的类型、长度、数值范围或者其他格式标准。黑名单验证是指，若在用户输入中，包含明显的恶意内容则拒绝该条用户请求。在使用白名单验证时，一般会配合黑名单验证。
4 文件上传漏洞
上传漏洞在DVBBS6.0时代被黑客们利用的最为猖獗，利用上传漏洞可以直接得到WEBSHELL，危害等级超级高，现在的入侵中上传漏洞也是常见的漏洞。该漏洞允许用户上传任意文件可能会让攻击者注入危险内容或恶意代码，并在服务器上运行。 文件上传漏洞的原理：由于文件上传功能实现代码没有严格限制用户上传的文件后缀以及文件类型，导致允许攻击者向某个可通过 Web 访问的目录上传任意PHP文件，并能够将这些文件传递给 PHP 解释器，就可以在远程服务器上执行任意PHP脚本。
解决方案：
(1)检查服务器是否判断了上传文件类型及后缀。 (2) 定义上传文件类型白名单，即只允许白名单里面类型的文件上传。 (3) 文件上传目录禁止执行脚本解析，避免攻击者进行二次攻击。 Info漏洞 Info漏洞就是CGI把输入的参数原样输出到页面，攻击者通过修改输入参数而达到欺骗用户的目的。
四、 跨域问题的处理
关于跨域，我前面很多文章也提及了，浏览器跨域访问解决方案，这篇文章可以看一下。
另外，面试官可能会问及 cookie跨域及localStorage跨域问题，关于这一点，也可以看我之前刚刚写的文章：http://www.haorooms.com/post/kuayu_localstorage_cookie
五、前端数据加密
关于前端加密方式及前端加密，这个我在项目中实际用的也不多，微信小程序中可能会用到，我很久很久之前也写过类似的文章，请看：javascript用户密码加密,js密码加密
六、http相关问题
这个可能涉及的东西也蛮多，可以看我前段时间总结的系列文章：
http://www.haorooms.com/post/long_lianjie_websocket
七、 知识点问题介绍
上面问题可能是前端通用问题吧，下面的问题可能都是相关知识点的，下面简单总结一下：
1、 webpack相关
这个考察你对webpack的理解是使用程度。
例如可能考察如下知识点：
1、hash（contenthash, chunkhash）
2、多页面配置
3、发布上线流程
4、如何加快打包速度，减少打包体积
5、和其他工具的区别（grunt,glup,rollup,parcel,Browserify）
2、状态管理器相关
主要是flux、redux、vuex等
主要问题如下：
一、flux、redux、vuex数据流向，(例如：点击按钮触发到状态更改，数据是如何流向的？)
例如flux：
1、用户访问 View
2、View 发出用户的 Action
3、Dispatcher 收到 Action，要求 Store 进行相应的更新
4、Store 更新后，发出一个"change"事件
5、View 收到"change"事件后，更新页面二、vuex和redux区别
三、vuex数据流？为什么要遵循这个数据流？假如在页面中直接修改state,而不是通过mutation 的commit方式修改，会怎么样？
3、 vue相关
vue相关的问题有很多。仅举例：
1、vue-router如何做历史返回提示？
2、vue-router如何做用户登录权限等？
3、vue生命周期
4、vue组件通信
5、vue服务器渲染
6、vue性能优化4、 nodejs相关
1、nodejs常用模块
2、nodejs爬虫
3、nodejs 流
4、nodejs请求如何返回大文件5、 es6相关
1、generate和async await
...
6、算法
1、冒泡排序
2、数据去重方法
3、取1000个数字里面的质数7、模块化
1、amd,cmd及commonjs区别
2、import、require区别
8、其他
1、自动化测试相关
2、mock数据相关
3、pwa相关
4、nginx相关
5、微信小程序相关
6、敏捷开发等
前言
之前在兴安得力的时候，我也出过前端的面试题。那么前端人员在外面面试的时候，一般技术人员都会考察我们那些地方呢？我在这里不妨总结一下！（PS：有点小邪恶，这个公开之后，对于面试者来说是方便了。但是，假如你是公司技术人员，是面试官，您不妨修改一下题目，变通一下！）
javascript常见题目
一、您对js的原型是如何理解的？您对js的继承是如何理解的？能否举例说明js的继承？
关于这个题目，我之前的一篇文章 http://www.haorooms.com/post/js_constructor_pro ，您可以看一下。理解一下原型prototype，关于继承，那主要是js原型链的继承。关于继承的理解及举例（我这里就不详细介绍了，简单介绍之后，你即使背过了，也不一定理解，对于公司也是不公平的）。我还是推荐面试者看一本书《[JavaScript高级程序设计(第3版)]》，这本书对js讲的很详细。关于这个题目，您可以阅读其第六章就可以了！认真阅读之后，相信你能理解，也能够简单的说出来！
关于js的继承，确实是重点和难点，我写过两篇博客，大家可以看下：http://www.haorooms.com/post/js_lei_jicheng
http://www.haorooms.com/post/js_jc_lei2
二、js闭包？举例并说明其主要的作用！
关于闭包，其实是指有权访问另一个函数作用域中变量的函数。具体我之前也写过一篇文章，可以看一看！
javascript闭包的理解 http://www.haorooms.com/post/js_bb
javascript闭包入门理解（二）：http://www.haorooms.com/post/js_bbtwo
三、js数组主要有哪些方法？主要参数你了解吗？
具体你可以查一下，常用的一般有如下：
1 、shift():删除数组的第一个元素,返回删除的值。这里是0
2 、unshift(3,4):把参数加载数组的前面，返回数组的长度。现在list:中是3,4,0,1,2
3、pop():删除数组的最后一个元素，返回删除的值。这里是2.
4、push(3):将参数加载到数组的最后，返回数组的长度，现在List中时：0,1,2,3
5、concat(3,4):把两个数组拼接起来。
6、splice(start,deleteCount,val1,val2,...)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,...
7、reverse：将数组反序
var a = [1,2,3,4,5]; var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1]8、sort(orderfunction)：按指定的参数对数组进行排序 var a = [1,2,3,4,5]; var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5]
9、slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组
var a = [1,2,3,4,5]; var b = a.slice(2,5); //a：[1,2,3,4,5] b：[3,4,5]
四、js迭代的方法
every() 、fliter()、forEach()、map()、some()具体大家可以查一下！
五、js数组去重和排序
具体我就不详细描述了。
六、js正则表达式
关于正则：http://www.haorooms.com/post/js_regex_refuse ，这篇文章应对面试足够了！
让你写个简单的正则，去掉字符串左右空格。具体看看我之前的文章http://www.haorooms.com/post/js_kong_ge
关于正则，你可以去了解一下！
七、纯js的ajax请求原理
可以查询，了解一下！看下这几篇文章http://www.haorooms.com/post/js_ajax_chun 和http://www.haorooms.com/post/js_shixian_jquery 最后关于js实现ajax的，最新出了js的fetch方法，很不错的！
八、js模块化
可以看下我之前的文章：http://www.haorooms.com/post/js_require_zz
九、双等号隐性转换
具体看文章：http://www.haorooms.com/post/js_yinxingleixing
十、js操作符，字符串截取等
具体请看：http://www.haorooms.com/post/js_czf_mst
字符串截取，substr 、substring等的区别
十一、js中继承中call和apply（）的区别
用法差不多，传递参数不同。具体你可以网上查查，也可以看下我的文章 http://www.haorooms.com/post/js_constructor_pro
十二、类数组转换为数组的方法
Array.prototype.slice.call(arguments);十三、cookie 不设置过期时间，默认过期时间是多少？
关闭浏览器就结束了
十四、改变数组长度的方法有哪些？
shift、unshift、pop、push
十五、js事件循环 event loop
请看文章：http://www.haorooms.com/post/js_xiancheng
十六、require 和 import的区别
看文章：http://blog.csdn.net/qq_28702545/article/details/54892562
jquery常见题目
一、jquery源码研究过没有？
二、jquery插件写过没有，一般如何写？
可以看我之前的一篇文章：http://www.haorooms.com/post/js_jquery_chajian
三、jquery的bind(),live(),delegate(),on() 区别
网上可以搜索一下，看一下！
前端常见题目
一、如何处理跨域？
jsonp等，可以看下我写的 浏览器跨域访问解决方案
二、如何处理缓存？如何清除缓存。
ajax随机数、ajax参数、meta中设置等。可以看下我写的 js清除浏览器缓存的几种方法
三、http请求问题，HTTP请求信息由那3部分组成？
1、请求方法URI协议/版本 （例如：GET/haorooms.jspHTTP/1.1）
2、请求头(Request Header)（例如：Accept:image/gif.image/jpeg.*/* Accept-Language:zh-cn Connection:Keep-Alive Host:localhost等等）
3、请求正文 关于图片的请求，可以看我之前的一篇文章 http://www.haorooms.com/post/web_http_request
四、前端性能优化问题，你是如何处理前端性能问题的？
看我之前的一篇文章：http://www.haorooms.com/post/web_xnyh_jscss 及 前端性能优化补充篇
五、网站js和css如何压缩？有哪些方法？
ant+yuicompressor具体可以看看我之前的一篇文章：http://www.haorooms.com/post/ant_yuicom
ant:http://www.haorooms.com/tools/ant_book/
SASS等 可以对css进行自动压缩！
也可以用Grunt构建工具进行。可以看下 前端js和css的压缩合并之grunt
六、用到哪些css插件？
bootstrap，animate.css 等
七、让你自己搭建一个网站，你是如何做架构的？
考察前端架构能力。
八、一些状态码你了解吗？
200成功类、300重定向类、400客户端类、500服务器端类。具体可以网上查一下！
九、如何用浏览器进行代码调试？
谷歌浏览器、火狐、IE等。（不明白的同学具体网上可以查一下）
十、json字符串转为json的方法
具体请看：http://www.haorooms.com/post/js_jsons_h
http://www.haorooms.com/post/json_object_json_string
html+css+html5+css3 常见题目
一、假如一个页面，左侧固定，右侧自适应，你是如何做到的？
方法很多，一般是margin和浮动，具体可以网上查一下。很简单。
二、html5新的标签和特性有哪些？
html5标签有很多，你可以网上查一下。
三、你常用的css3有哪些？说出你记得的。
哈哈哈，这个很多，你要再复习一下css3包括其动画等等。
四、如何处理浏览器兼容性问题？
请看：http://www.haorooms.com/post/IE_jianrong
五、如何用css美化radio、checkbox等按钮样式？
具体可以看我的一篇文章：http://www.haorooms.com/post/css_mh_ck_radio
web touch常见题目
一、做手机网站长见的兼容问题有哪些？
看下手机网站相关文章。
二、网站如何自适应的？响应式网站一般如何制作？
可以随便聊聊。可以看下http://www.haorooms.com/post/css3media
三、zepto.js使用过程中有哪些问题？jquerymobile用过吗？会有哪些问题？
用过的话，可以随便聊一下！
加分项
例如，你们聊到数据库，数一下如何用mongo做分页等等，包括mysql数据库等等。
聊到inux系统，linux常用的命令。
聊到angularjs，vue.js、angularjs的指令，双向数据绑定。MVVM模式和mvc模式的区别及mvp模式。
聊到前端架构，及百度fits的jello等。
聊到常用的版本控制工具git或者SVN，讲讲git常用的命令，git回滚到某个版本怎么做（ $ git reset --hard 某个版本号）
人事面试
人事面试和技术面试是有区别的，人事一般问一些概况总结方面的问题，我下面举一些列子吧！
一、你做了这么多项目，让你感受最深，印象最深的是哪个项目？你从中学到了什么？为什么会感受最深？
二、做前端开发这么多年来？说下你的感受吧！
三、简单自我介绍一下自己。
四、你对公司有什么需要了解的？
五、谈到薪资，谈到离职原因，谈到未来几年的规划等等，我在这里就不具体说了。
上面是我面试过程中最常见的一些问题。注意：面试的时候千万要真诚，不要撒谎，是什么就是什么，我列举上面题目的原因是有些前端人员可能技术很好，但是面试的时候紧张，没有准备。这样你简单准备了之后，就能发挥自己正常水平！广大朋友们，加油吧！
分享几个前端干货，面试经常提
2016年3月29日 22470次浏览
前言
我前面的文章，也有几篇讲过面试的，不过都没有很细致的讲，例如：总结前端面试过程中最容易出现的问题，等等。还有一些文章，也是面试中可能提问的。今天，分享几个小知识，算是干货吧！前端面试中也经常会问及，不过问及的几率相对较少。我个人认为，面试中你把基础的知识打好，就可以无敌！哪些基础知识呢？例如：js的继承、js函数等等，万变不离其宗，都是这些的扩展及应用。这些知识理解透彻了，再加一些面试技巧就可以了！
一、怎么让Chrome支持小于12px 的文字？
这个我们在做移动端的时候，设计师图片上的文字假如是10px，我们实现在网页上之后。往往设计师回来找我们，这个字体能小一些吗？我设计的是10px？为啥是12px?其实我们都知道，谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢？
我们的做法是：
针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放！
<style>
p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}
</style>
<p><span>haorooms博客测试10px</span></p>二、IOS手机浏览器字体齿轮
修改-webkit-font-smoothing属性，结果是：
-webkit-font-smoothing: none: 无抗锯齿
-webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑三、如何修改chrome记住密码后自动填充表单的黄色背景？
大体可以通过input : -webkit-autofill来进行修改！
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}四、谷歌浏览器运行下面代码，并解释！
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })运行上面代码之后，会发现HTML层都被使用不同的颜色添加了一个高亮的边框。为什么会这样呢？
首先我们来看
[].forEach.call()，关于call()和apply()，我前面有文章也写过，具体可以看http://www.haorooms.com/post/js_constructor_pro
[].forEach.call()等价于Array.prototype.forEach.call()
其次我们来看$$("*")
你可以在你的Chrome浏览器控制台中输入$$('a')，然后你就能得到一个当前页面中所有锚元素的列表。
$$函数是许多现代浏览器命令行API中的一个部分，它等价于document.querySelectorAll,你可以将一个CSS选择器作为这个函数的参数，然后你就能够获得当前页面中所有匹配这个CSS选择器的元素列表。如果你在浏览器控制台以外的地方，你可以使用document.querySelectorAll('')来代替$$('')
为元素添加颜色
为了让元素都有一个漂亮的边框，我们在上面的代码中使用了CSS属性outline。outline属性位于CSS盒模型之外，因此它并不影响元素的属性或者元素在布局中的位置，这对于我们来说非常有用。这个属性和修改border属性非常类似，因此下面的代码应该不会很难理解：
a.style.outline="1px solid #" + color真正有趣的地方在于定义颜色部分：
（~~(Math.random()*(1<<24))).toString(16)~~的作用相当于parseInt，和我前面讲解的“|”功能类似，关于运算符“I” ，可以去看看！
通过上面代码可以获取到一个随机的颜色值！
五、input [type=search] 搜索框右侧小图标如何美化？
美化效果如下图：
右侧默认的比较难看的按钮，美化成右侧效果。
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none;height: 15px; width: 15px;border-radius: 8px;background:url("images/searchicon.png") no-repeat 0 0;background-size: 15px 15px;}用到的是伪元素::-webkit-search-cancel-button，关于什么是伪类和为元素，请看：http://www.haorooms.com/post/css_wl_wys
六、iOS safari 如何阻止“橡皮筋效果”？
可以参考一下知乎上的回答 https://www.zhihu.com/question/22256539 。
但是，我们遇到的问题不是这样，我是要解决弹跳导致弹出层（position:absolute）的覆盖层高度小于100%;
针对这个问题，我想到的解决方案如下：
方法一： 把position:absolute改成position:fixed，并在弹出层之后，设置body的高度是100%；overflow是hidden。
方法二：
思路是获取苹果浏览器导航栏的高度。然后滚动的时候，重新获取其高度。在导航栏高度变小的时候，给弹出层增加高度的百分比！
代码如下：
//ios safari 伸缩判断
var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
$(window).scroll(function () {
if(agent.indexOf("iPhone")!=-1 || agent.indexOf("iPad")!=-1){
var topbarHeightNow=window.outerHeight-window.innerHeight;
if(topbarHeightNow<topbarHeight){
globleflag=false
//此处写处理逻辑
}else{
globleflag=true
//此处写处理逻辑
}
}
});七、实现点击文字，文字后面radio选中效果
这个效果是前端很经常用到和遇到的效果了，实现这个效果的方式也很多，很多朋友用js和jquery来实现，但是最简单的，我们可以直接用lable标签的 for 属性来实现。
看下下面例子：
<form> <label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br /> <label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>label 的for属性后面跟着input的id,就可以点击label，来触发input效果了，大家可以试一试！
八、网站中，图片文件（jpg，png,gif），如何点击下载？而非点击预览？
我们平时在网站中的图片，假如我们要下载，如下写：
<a href="haorooms博客.jpg">下载</a>我们点击下载按钮，只会预览“haorooms博客.jpg”这张图片，并不会出现下载框，另存为那种？那么我们如何做呢？
我们只需要如下写
<a href="haorooms博客.jpg" download >下载</a>就可以下载了。点击如下进行尝试吧！下载
不但如次，我们还可以指定文件名称，如下写法：
<a href="haorooms博客.jpg" download="haoroom前端博客图片下载" >下载</a>测试如下：下载
上面就是指定下载的写法！
九、Math.min()比Math.max()大
Math.min() < Math.max() // false
Math.min() > Math.max() // true因为Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。
十、经典面试题目
const Greeters = []
for (var i = 0 ; i < 10 ; i++) {
Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 10
Greeters[1]() // 10
Greeters[2]() // 10把 var 改成 let试试！
const Greeters = []
for (let i = 0 ; i < 10 ; i++) {
Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 0
Greeters[1]() // 1
Greeters[2]() // 2十一、数组对象全等比较
// 这些可以
'abc' === 'abc' // true
1 === 1 // true
// 然而这些不行
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1} // false
{} === {} // false因为[1,2,3]和[1,2,3]是两个不同的数组，只是它们的元素碰巧相同。因此，不能简单的通过===来判断。
十二、关于数字和点号
3.toString()
3..toString()
3...toString()这个题也挺逗, 答案是
error, '3', error你如果换一个写法就更费解了
var a = 3;
a.toString()这个答案就是 '3';
为啥呢?
因为在 js 中 1.1, 1., .1 都是合法的数字. 那么在解析 3.toString 的时候这个 . 到底是属于这个数字还是函数调用呢? 只能是数字, 因为3.合法啊!
十三、变量提升
如下题目
var name = 'World!';
(function () {
if (typeof name === 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();理解这个，我们可以先看下面的题目：
var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2;相当于：
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y变量提升了！
所以上面的自调用函数可以如下理解：
var name = 'World!';
(function () {
var name;
if (typeof name === 'undefined') {
name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();name在scope里面，因此，先找里面，里面找到了name,因此执行的结果是
'Goodbye Jack'十四、局部变量和全局变量
(function(){
var x = y = 1;
})();
console.log(y);
console.log(x);输出：
1, errory 被赋值到全局。x 是局部变量，全局中获取不到。所以打印 x 的时候会报 ReferenceError
十五、正则表达式字面一致也不相等
var a = /123/,
b = /123/;
a == b
a === b即使正则的字面量一致, 他们也不相等.
答案 false, false
十六、函数名称不可改变
function foo() { }
var oldName = foo.name;
foo.name = "bar";
[oldName, foo.name]答案
['foo', 'foo']例如：
function doSomething() {}
doSomething.name; // "doSomething"
var f = function() {};
var object = {
someMethod: function() {}
};
console.log(f.name); // "f"
console.log(object.someMethod.name); // "someMethod"函数的名字是不可以改变的。
十七、写出最简单的去重方式
1、es6的new Set()方式，具体请看：http://www.haorooms.com/post/js_map_set
例如：
let array=[0,3,4,5,3,4,7,8,2,2,5,4,6,7,8,0,2,0,90];
[...new Set(array)]或者直接
[...new Set([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]2、es5的Array filter()
[1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0].filter(function(elem,index,Array){
return index === Array.indexOf(elem);
})