2019前端经典面试题

1. 使⽤用过的koa2中间件
2. koa-body原理理
3. 介绍⾃自⼰己写过的中间件
4. 有没有涉及到Cluster
5. 介绍pm2
6. master挂了了的话pm2怎么处理理
7. 如何和MySQL进⾏行行通信
8. React声明周期及⾃自⼰己的理理解
9. 如何配置React-Router
10. 路路由的动态加载模块
11. 服务端渲染SSR
12. 介绍路路由的history
13. 介绍Redux数据流的流程
14. Redux如何实现多个组件之间的通信，多个组件使⽤用相同状态如何进⾏行行管理理
15. 多个组件之间如何拆分各⾃自的state，每块⼩小的组件有⾃自⼰己的状态，它们之间还有⼀一些公共的状态需要维护，如何思考这块
16. 使⽤用过的Redux中间件
17. 如何解决跨域的问题
18. 常⻅见Http请求头
19. 移动端适配1px的问题
20. 介绍flex布局
21. 其他css⽅方式设置垂直居中
22. 居中为什什么要使⽤用transform（为什什么不不使⽤用marginLeft/Top）
23. 使⽤用过webpack⾥里里⾯面哪些plugin和loader
24. webpack⾥里里⾯面的插件是怎么实现的
25. dev-server是怎么跑起来
26. 项⽬目优化
27. 抽取公共⽂文件是怎么配置的
28. 项⽬目中如何处理理安全问题
29. 怎么实现this对象的深拷⻉贝。

前端面试题及答案20191. HTML5 新增的表单元素有哪些？- 答案： HTML5 新增的表单元素包括：`<date>`、`<email>`、`<month>`、`<number>`、`<range>`、`<search>`、`<tel>`、`<time>`、`<url>`、`<week>`。

2. 请解释 CSS 中的 Flexbox 布局。

- 答案： Flexbox 是一种CSS3布局模式，它允许容器内子元素在不同屏幕和设备上动态地调整大小和位置。

Flexbox 布局通过设置容器的 `display` 属性为 `flex` 来启用。

它提供了两个轴：主轴（main axis）和交叉轴（cross axis），以及多种属性来控制子元素的排列方式。

3. JavaScript 中 `var`、`let` 和 `const` 的区别是什么？- 答案：- `var` 是函数作用域或全局作用域的变量声明关键字，可以被重新声明和赋值。

- `let` 是块级作用域的变量声明关键字，不能被重新声明，但可以重新赋值。

- `const` 也是块级作用域的常量声明关键字，声明后不能被重新赋值或重新声明。

4. 解释 JavaScript 中的闭包是什么？- 答案：闭包是一个函数和声明该函数的词法环境的组合。

即使在其原始作用域之外，闭包也可以访问其作用域链上的变量。

闭包常用于创建私有变量和函数，以及实现模块模式。

5. 如何实现深拷贝和浅拷贝？- 浅拷贝：复制对象的引用，而不是对象本身。

可以使用`Object.assign()` 或展开运算符 `...` 来实现。

- 深拷贝：递归复制对象的属性，包括嵌套的对象。

可以使用`JSON.parse(JSON.stringify(obj))`（但有局限性，例如不能拷贝函数和循环引用），或者使用第三方库如 `lodash` 的`_.cloneDeep()` 方法。

2019年百度前端⼯程师⾯试题（附答案）⼀、单选题（共25题，每题5分）1.该正则可以匹配下列哪个字符串？ /^sjm/A、absjmB、phpsjmC、sjmphpD、phpsimd参考答案：C答案解析：该正则匹配以sjm开头的字符串2.新窗⼝打开⽹页，⽤到以下哪个值（）。

A、_selfB、_blankC、_topD、_parent参考答案：B答案解析：在html中通过标签打开⼀个链接，通过标签的 target 属性规定在何处打开链接⽂档。

如果在标签中写⼊target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的框架或者窗⼝.在target中还存在四个保留的属性值如下，### 属性值值描述\_blank在新窗⼝中打开被链接⽂档。

\_self默认。

在相同的框架中打开被链接⽂档。

\_parent在⽗框架集中打开被链接⽂档。

\_top在整个窗⼝中打开被链接⽂档。

*framename*在指定的框架中打开被链接⽂档。

这些 target 的所有 4 个值都以下划线开始。

任何其他⽤⼀个下划线作为开头的窗⼝或者⽬标都会被浏览器忽略，因此，不要将下划线作为⽂档中定义的任何框架 name 或 id 的第⼀个字符。

上⾯这段出⾃w3c。

3.如果⼀个HTML⽂档内含有阿拉伯⽂，则应该？A、使⽤utf-8编码B、将阿拉伯⽂转为图⽚并嵌⼊到⽂档内C、使⽤GBK编码D、使⽤iso-8859-2编码参考答案：A答案解析：UTF-8（8-bit Unicode Transformation Format）是⼀种针对Unicode的可变长度字符编码，⼜称万国码。

UTF-8⽤1到6个字节编码UNICODE字符。

⽤在⽹页上可以同⼀页⾯显⽰中⽂简体繁体及其它语⾔（如英⽂，⽇⽂，韩⽂）。

GBK是汉字编码，是双字节码，可表⽰繁体字和简体字。

```ISO8859-2 字符集，也称为 Latin-2，收集了东欧字符。

```4.以下哪个选项不是块级元素（）A、divB、spanC、pD、h1参考答案：B答案解析：常见的内联元素：、**、、*、*、**、、、、、` `******常见的块级元素：、、、、、、、、> 、窗体顶端窗体底端常见的内联块级元素：![]()、5.下⾯关于⼆叉树的说法正确的是？A、满⼆叉树就是完全⼆叉树B、满⼆叉树中有可能存在度数为1的节点C、完全⼆叉树就是满⼆叉树D、完全⼆叉树中某个节点可以没有左孩⼦，只有右孩⼦参考答案：A答案解析：满⼆叉树的任意节点，要么度为0，要么度为2.换个说法即要么为叶⼦结点，要么同时具有左右孩⼦。

2019前端⾯试题1.什么是⾯向对象？什么是⾯向过程？1）⾯向对象的重点是对象。

当解决⼀个问题的时候，⾯向对象会把事物抽象成对象，也就是说这个问题包含哪些对象，然后给这些对象赋⼀些属性和⽅法，让每个对象执⾏⾃⼰的⽅法，问题得到解决。

2）⾯向过程的重点是过程。

解决⼀个问题的时候，⾯向过程会把问题拆分成⼀个个的函数和数据（⽅法的参数）。

然后按照⼀定的顺序执⾏这些⽅法，执⾏完这些⽅法，问题得到解决。

2.什么是⾯向对象程序设计？答：将计算机需要处理的问题都抽象成对象，在抽象成类，帮助⼈们实现对现实世界的抽象与数字建模。

⾯向对象的程序设计更加符合⼈的思考逻辑和对事物的处理。

3.什么是对象？什么是类？答：对象是由类实例化出来的，类的实例称为对象。

类是具有相同特征和功能的对象的抽象。

类和对象的关系就好⽐模具和铸件的关系，类的实例化结果就是对象，⽽对象的抽象就是类。

4.什么是继承？在⾯向对象的编程中，当两个类具有相同的特征（属性）和⾏为（⽅法）时，可以将相同的部分抽取出来放到⼀个类中作为⽗类，其他两个类继承这个⽗类。

继承后的⼦类⾃动拥有了⽗类的部分属性和⽅法。

通过继承创建的新类被称为“⼦类”或“派⽣类”被继承的类称为“基类”、“⽗类”或“超类”⽐如：狗{吠；}牧⽺⽝继承狗{放⽺;}上⾯的例⼦中，狗类是⽗类，牧⽺⽝类是⼦类。

牧⽺⽝类通过继承获得狗类的吠的能⼒，同时增加了⾃⼰独有的放⽺的能⼒。

JS中的继承主要是通过原型链实现的每个构造函数(constructor)都有⼀个原型对象(prototype)，原型对象都包含⼀个指向构造函数的指针，⽽实例(instance)都包含⼀个指向原型对象的内部指针如果试图引⽤对象(实例instance)的某个属性，会⾸先在对象内部寻找该属性，直⾄找不到,然后才在该对象的原型(instance.prototype)⾥去找这个属性5.谈谈你对前端性能优化的理解1）请求数量，合并脚本和样式表，拆分初始化负载2）请求带宽，精简JavaScript，移除重复脚本，图像优化，将icon做成字体3）页⾯结构：将样式表放在顶部，将脚本放在底部，尽早刷新⽂档的输出6.为什么使⽤框架？使⽤框架的优势？1）重复应⽤的外部JS：使⽤框架后我们可以把这些⽂件写在⼊⼝⽂件中，⼀劳永逸2）组件化：组件是前端框架⾥⾮常强⼤的功能之⼀，它可以扩展你的HTML，封装可以重⽤的代码块，⽐如你的轮播图、tab切换、页⾯头部、页⾯底部等等。

解析前端⾯试题2019年⼩⽶⼯程师⾯试题（附答案）⼀、单选题（共24题，每题5分）1.关于XSS的说法，错误的是A、script,js,vbscript,flashB、分类：反射，存储C、是浏览器端代码注⼊，恶意的script，css，html代码被浏览器解析D、PHP相关漏洞参考答案：D答案解析：是浏览器端代码注⼊，恶意的script，css，html代码被浏览器解析。

分类：反射，存储 script,js,vbscript,flash2.关于JSONP使⽤的说法错误的是：A、可以实现跨域通信B、基于 json 格式数据，兼容性好，简单易⽤C、只⽀持跨域HTTP请求这种情况，不能解决不同域的两个页⾯之间进⾏JavaScript调⽤的问题D、可以完美⽀持POST请求参考答案：D3.HTML页⾯中有如下结构的代码，下列选项所⽰jQuery代码，不能够让汉字“四”的颜⾊变成红⾊的是？A、 $("#header ul li:eq(3)").css("color","red");B、 $("#header li:eq(3)").css("color","red");C、 $("#header li:last").css("color","red");D、 $("#header li:gt(3)").css("color","red");参考答案：D答案解析：注意是选择不能4.下⾯哪⼀种属于“creational”的设计模式？A、FaçadeB、SingletonC、BridgeD、CompositeE、上⾯都不是参考答案：B答案解析：总体来说设计模式分为三⼤类：创建型模式，共五种：⼯⼚⽅法模式、抽象⼯⼚模式、单例模式、建造者模式、原型模式。

前端⾯试题2019年⽹易⼯程师⾯试题及答案解析⼀、单选题（共19题，每题5分）1.CSS 盒⼦模型中（）是透明的，这部分可以显⽰背景（）A、paddingB、marginC、borderD、content参考答案：A答案解析：- **Margin(外边距)** - 清除边框外的区域，外边距是透明的。

- **Border(边框)** - 围绕在内边距和内容外的边框。

- **Padding(内边距)** - 清除内容周围的区域，内边距是透明的。

- **Content(内容)** - 盒⼦的内容，显⽰⽂本和图像。

- Margin --------margin清除周围的元素（外边框）的区域。

margin没有背景颜⾊，是完全透明的Padding（填充） ------------- 当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜⾊的填充。

2.通常我们在浏览器内容区看到的内容，都是放⼊在 () 之间A、<!doctype html>B、<html></html>C、<head></head>D、<body></body>参考答案：D答案解析：A答案是声明⽂档类型。

B答案是整个html⽂件。

C答案是⽹页标题，在浏览器顶部显⽰、D答案是⽹页的主体部分，即浏览器的内容区域。

所以答案是D。

html⽂件结构如下>⽹页名称，头部⽹页主体内容，浏览区域3.关于HTML语义化，以下哪个说法是正确的？A、语义化的HTML有利于机器的阅读，如PDA⼿持设备、搜索引擎爬⾍；但不利于⼈的阅读B、Table 属于过时的标签，遇到数据列表时，需尽量使⽤ div 来模拟表格C、语义化是HTML5带来的新概念，此前版本的HTML⽆法做到语义化D、header、article、address都属于语义化明确的标签参考答案：D答案解析：关于html语义化的⼀些参考</http:>4.以下位于head 间的代码⽚段是做什么⽤的？A、使得页⾯编码合乎要求B、表⽰⽀持响应式设计C、⽀持正常的绘制和缩放D、表⽰针对滚屏进⾏适当的适配参考答案：B答案解析：5.下列定义的css中，哪个权重是最低的？A、#game B、#game .nameC、#game divD、#game .name span参考答案：C答案解析：最⾼赞的答案并不准确。

2019 VUE 前端面试题1、active-class 是哪个组件的属性?嵌套路由怎么定义?答：vue-router 模块的router-link 组件。

2、怎么定义vue-router 的动态路由?怎么获取传过来的动态参数?答：在router 目录下的index.js 文件中，对path 属性加上/:id 。

使用router 对象的params.id3、vue-router 有哪几种导航钩子?答：三种，一种是全局导航钩子：router.beforeEach(to,from,next) ，作用：跳转前进行判断拦截。

第二种：组件内的钩子;第三种：单独路由独享组件4、scss 是什么?安装使用的步骤是?有哪几大特性?答：预处理css，把css 当前函数编写，定义变量,嵌套。

先装css-loader 、node-loader 、sass-loader 等加载器模块，在webpack-base.config.js 配置文件中加多一个拓展:extenstion ，再加多一个模块：module 里面test 、loader4.1 、scss 是什么?在vue.cli 中的安装使用步骤是?有哪几大特性?答：css 的预编译。

使用步骤：第一步：用npm 下三个loader(sass-loader 、css-loader 、node-sass)第二步：在build 目录找到webpack.base.config.js ，在那个extends 属性中加一个拓展.scss第三步：还是在同一个文件，配置一个module 属性第四步：然后在组件的style 标签加上lang 属性，例如：lang= ”scss”有哪几大特性:1、可以用变量，例如($变量名称= 值);2、可以用混合器，例如()3、可以嵌套5、mint-ui 是什么?怎么使用?说出至少三个组件使用方法?答：基于vue 的前端组件库。

npm 安装，然后import 样式和js，e(mintUi)全局引入。

2019年阿⾥最新前端⼯程师⾯试题及答案题⼀、单选题（共21题，每题5分）1.为每⼀个指定元素的指定事件（像click）绑定⼀个事件处理器函数，下⾯哪个是⽤来实现该功能的？A、trigger (type)B、bind(type)C、one(type)D、bind参考答案：B答案解析：暂⽆2.哪⼀个html盒模型中的border的正确写法？A、p{ border:5px solid red;}B、p{border:5px <br> red solid; }C、p{border: red solid 5px; }D、p{border: solid red 5px; }参考答案：A答案解析：为了代码的可读性，建议按照，border-width，border-style，border-color，的顺序书写。

但其实顺序调换是不影响呈现的3.关于适配器模式，说法错误的是？A、适配器继承或依赖已有的对象，实现想要的⽬标接⼝B、主要解决在软件系统中，常常要将⼀些"现存的对象"放到新的环境中，⽽新环境要求的接⼝是现对象不能满⾜的C、定义了算法家族，分别封装起来，让他们之间可以相互替换，此模式让算法的变化不会影响到使⽤算法的客户D、将⼀个类的接⼝转换成客户希望的另外⼀个接⼝。

适配器模式使得原本由于接⼝不兼容⽽不能⼀起⼯作的那些类可以⼀起⼯作。

参考答案：C答案解析：将⼀个类的接⼝转换成客户希望的另外⼀个接⼝。

适配器模式使得原本由于接⼝不兼容⽽不能⼀起⼯作的那些类可以⼀起⼯作适配器继承或依赖已有的对象，实现想要的⽬标接⼝主要解决在软件系统中，常常要将⼀些"现存的对象"放到新的环境中，⽽新环境要求的接⼝是现对象不能满⾜的4.以下⼏种在HTML⽂档中通过CSS的⽅式将⽂档颜⾊设置为红⾊背景错误的是：（）A、内联样式表：<body style=”background-Color:red”></body>B、嵌⼊样式表：<style> body { background-Color:red } </style>C、外部样式表：在当前⽬录下创建⼀个test.css⽂件，在⽂件中声明⼀条<style> body { background-Color:red } </style>代码，并在HTML⽂档中通过<link style=”text/css” rel=”stylesheet”href=”test.css”>将其链接到本⽂档中使⽤D、输⼊样式表：在当前⽬录下创建⼀个test.css⽂件，在⽂件中声明⼀条body { background-Color:red } 代码，并在HTML⽂档中通过<style>@import url(test.css);</style>输⼊到本⽂档中使⽤参考答案：C答案解析：暂⽆5.在 HTML5 中，哪个⽅法⽤于获得⽤户的当前位置？A、getPosition()B、getCurrentPosition()C、getUserPosition()D、getLocation()参考答案：B答案解析：getCurrentPosition（）获取⽤户当前位置放⼊⼀个值中保存，getLocation()地图定位6.对于下拉菜单，错误的是？<pre class="prettyprint"><div class="dropdown"> <button class="btn btn-" tabindex="-1">Separated link</a></li>defaultdropdowtoggle" data-toggle="dropdown" id="dropdownMenu1" type="button">Dropdown<span class="caret"></span></button><ul aria-labelledby="dropdownMenu1" class="dropdown-menu" role="menu"><li role="presentation"><#" role="menuitem" tabindex="-1">Action</a></li> <li r"presentation"><a href="#" role="menuitem" tabindex="-1">Anotheaction</a></li> <li rolef="#" role="menuitem" tabindex="-1">Something else here</a></li><li role="presentation"><a href="#" role="menuitem" tabindex="-1">Separated link</a></li><pre class="prettyprint"><div class="dropdown"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">Dropdown<span class="caret"></span></button><ul aria-labelledby="dropdownMenu1" class="dropdown-menu" role="menu"><li role="presentation"><a href="#" role="menuitem" tabindex="-1">Action</a></li><li role="presentation"><a href="#" role="menuitem" tabindex="-1">Another action</a></li><li role="presentation"><a href="#" role="menuitem" tabindex="-1">Something else here</a></li><li role="presentation"><a href="#" role="menuitem" tabindex="-1">Something else here</a></li>A、表⽰了⼀个有五个下拉选项的下拉菜单B、<span class="caret"></span>可以去掉⽽不影响功能C、可以加⼊pull-right使菜单右对齐D、可加⼊dropdown-menu-right使菜单右对齐参考答案：A答案解析：这道题我⼀眼就看出A有错了，可是还是让我纠结了好久，怎么会有这么低级的问题，空城计吗7.下⾯关于 CSS 布局的描述，不正确的是？（）下⾯关于CSS布局的描述，不正确的是？（）A、块级元素实际占⽤的宽度与它的 width 属性有关；B、块级元素实际占⽤的宽度与它的 border 属性有关；C、块级元素实际占⽤的宽度与它的 padding 属性有关；D、块级元素实际占⽤的宽度与它的 background 属性有关。

2019年腾讯最新前端⼯程师⾯试题（附答案）⼀、单选题1在jquery中想要找到所有元素的同辈元素，下⾯哪⼀个是可以实现的？A、eq(index)B、find(expr)C、siblings([expr])D、next()参考答案：C答案解析：jQuery siblings() ⽅法 ----------------------siblings() ⽅法返回被选元素的所有同胞元素。

下⾯的例⼦返回的所有同胞元素： ### 实例$(document).ready(function(){$("h2").siblings();});您也可以使⽤可选参数来过滤对同胞元素的搜索。

下⾯的例⼦返回属于的同胞元素的所有元素：实例$(document).ready(function(){$("h2").siblings("p");});jQuery next() ⽅法 ------------------next() ⽅法返回被选元素的下⼀个同胞元素。

该⽅法只返回⼀个元素。

下⾯的例⼦返回的下⼀个同胞元素： ### 实例$(document).ready(function(){$("h2").next();});jQuery find() ⽅法find() ⽅法返回被选元素的后代元素，⼀路向下直到最后⼀个后代。

下⾯的例⼦返回属于后代的所有元素： ### 实例$(document).ready(function(){$("div").find("span");});2.以下不是RDBMS的是()A、mysqlB、postgreSqlC、oracleD、hadoop参考答案：D答案解析：RDBMS 是SQL 的基础，同样也是所有现代数据库系统的基础，⽐如MS SQL Server, IBM DB2, Oracle, MySQL 以及Microsoft Access。

2019最全前端⾯试问题及答案总结HTML&CSS：对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒⼦模型、选择器优先级及使⽤、HTML5、CSS3、移动端适应。

JavaScript：数据类型、⾯向对象、继承、闭包、插件、作⽤域、跨域、原型链、模块化、⾃定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

其他： HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业⽣涯1.请你谈谈Cookie的弊端cookie1.IE6或更低版本最多20个cookie2.IE7和之后的版本最后可以有50个cookie。

3.Firefox最多50个cookie4.chrome和Safari没有做硬性限制Opera 会清理近期最少使⽤的Firefox会随机清理 4096字节，为了兼容性，⼀般不能超过 IE 提供了⼀种存储可以持久化⽤户数据，叫做IE5.0就开始⽀持。

每个数据最多128K，每个域名下最多1M。

这个持久化数据放在缓存中，如果缓存没有清理，那么会⼀直存在。

优点：极⾼的扩展性和可⽤性1.通过良好的编程，控制保存在cookie中的session对象的⼤⼩。

2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3.只在cookie中存放不敏感数据，即使被盗也不会有重⼤损失。

4.控制cookie的⽣命期，使之不会永远有效。

偷盗者很可能拿到⼀个过期的cookie。

缺点：1.`Cookie`数量和长度的限制。

每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。

如果cookie被⼈拦截了，那⼈就可以取得所有的session信息。

即使加密也与事⽆补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到⽬的了。

2019前端⾯试题总结及答案⼀）vue router 跳转⽅式1.this.$router.push()跳转到不同的url，但这个⽅法会向history栈添加⼀个记录，点击后退会返回到上⼀个页⾯。

1. this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})获取参数 {{this.$erId}}2. this.$router.push({name: 'detail',params:{id: 'abc'}})获取参数：{{this.$erId}}ps:query和params 的区别：1.⽤法上query要⽤path来引⼊，params要⽤name来引⼊：egthis.$router.push({name:"detail",params:{name:'nameValue',code:10011}});2.展⽰上的 query更加类似于我们ajax中get传参，params则类似于post，说的再简单⼀点，前者在浏览器地址栏中显⽰参数，后者则不显⽰2.this.$router.replace()同样是跳转到指定的url，但是这个⽅法不会向history⾥⾯添加新的记录，点击返回，会跳转到上上⼀个页⾯。

上⼀个记录是不存在的。

3.this.$router.go(n)相对于当前页⾯向前或向后跳转多少个页⾯,类似window.history.go(n)。

n可为正数可为负数。

正数返回上⼀个页⾯4.声明式：1) 根据路由路径（/home/sort/detail）跳转 <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">点击查看⼦页⾯</router-link>2) 根据路由名称（detail）跳转 <router-link :to="{name: 'detail', params:{id: 'abc'}}">点击查看⼦页⾯</router-link> :to="" 可以实现绑定动态的路由和参数⼆）Cookie和localStorage、sessionStorage的区别名称cookie localStorage sessionStorage相同点都可以⽤来在浏览器端存储数据，都是字符串的键值对数据声明周期⼀般由服务器⽣成，可设置失效时间；若在浏览器⽣成，默认关闭浏览器之后失效除⾮被清除，否则永久有效仅对当前对话有效，关闭当前页⾯或者浏览器后被清除存储⼤⼩4kb⼀般5mb与服务端通信每次都会携带在http请求头中，如果使⽤cookie保存过多，性能不太好仅在客户端存储，不参与服务端通信⽤途⼀般由服务器⽣成，来标识⽤户⾝份勇于浏览器端缓存数据三）数组相关参考⽂章数组相关：四）let var const 的区别1：var全局变量，存在变量提升，在声明前取值为undefined 会挂载在window上如：var a = 1;console.log(a,window.a) // 1 12：let 声明局部变量，只在块级作⽤域内有效console.log(b); // 报错：b在初始化之前不能接收let b = 10;var a = [];for (var i = 0; i < 10; i++) {a[i] = function () {console.log(i);};}a[2](); //10var b = [];for (let k = 0; k < 10; k++) {b[k] = function () {console.log(k);};}b[2](); //23：const 声名的是常量，⼀经声明不可改变。

1，html和xml有什么区别html是超文本标记语言xml是可扩展标记语言html语法宽松，xml语法严谨html使用固有标记，xml没有固有标记html标签预定义，xml标签可扩展，可定义html是用来显示数据的，xml是用来描述和存储数据的2，css有哪几种选择器权重的优先级第一种为属性选择器第二种为id选择器第三种为class选择器第四种为伪类选择器第五种是后代选择器第六种是标签选择器第七种是通用选择器第八种是伪元素选择器1.第一等：代表内联样式，如: style=””，权值为1000。

2.第二等：代表ID选择器，如：#content，权值为0100。

3.第三等：代表类，伪类和属性选择器，如.content，权值为0010。

4.第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5.通配符、子选择器、相邻选择器等的。

如*、>、+,权值为0000。

6.继承的样式没有权值。

3，网页有哪几部分组成结构层：html表示层：css行为层：js和dom4，一个200*200的div在不同分辨率屏幕上下左右居中，用css实现Div{position:absolute;width:200px;height:200px;top:50%;left:50%;margin-top:-100px;margin-left:-100px;}5，阐述清楚浮动的几种方式第一种父级div定义高度height 适合高度固定的布局第二种父级div定义overflow：hidden第三种结尾处加空标签clear：both 让父级自动获取高度第四种父级div定义伪类:after 和zoom6，解释css sprites，如何使用CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

便利蜂前端⾯试题2019秋季便利蜂2019秋季(11⽉)web前端笔试题前端技能试题v2.6⼀、单选题（总共8分，每题2分）1、以下不属于HTTP缓存控制协议头是（）A. Cache-ControlB. Content-TypeC.EtagD.Vary考点：web缓存只http技术答案：B分析：已经系统了解了web缓存策略，总结了笔记，可以查看。

Content-Type是响应头告诉浏览器返回的资源的MIME类型。

2、cookie特性下列说法正确的是（）A. cookie没有长度限制，可以⽆限存储B. 浏览器可以获取任⼀域名的cookieC. cookie不需要⼿动处理，请求时会⾃动携带D. 浏览器请求image时不会携带cookie考点：web缓存只本地存储技术中的 cookie答案：D分析：cookie的个⼩、条数都有限制。

不同浏览器表现也不⼀值。

⼤概都给4kb空间，每个域名50条左右。

超出这阀门后，将会被忽略cookie获取有严格限制，不同域名（domain）下⽆法取的，同域名不同路径下（pach）下也不能取得。

必须是同域名，和同路径（以及⽗⼦路径）只要设置了cookie，浏览器每次请求均会⾃⼰携带。

所以c对，d不对3、cors中不属于简单请求的请求类型是（）A. GETB. HEADC.POSTD.DELETE考点：跨域技术之cors答案：C分析：CORS即跨来源资源共享，通俗说就是我们所熟知的跨域请求。

众所周知，在以前，跨域可以采⽤代理、JSONP等⽅式，⽽在Modern浏览器⾯前，这些终将成为过去式，因为有了CORS。

CORS可以分成两种：简单请求、复杂请求。

⼀个简单的请求⼤致如下// HTTP⽅法是下列之⼀HEADGETPOST// HTTP头信息不超出以下⼏种字段AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type，但仅能是下列之⼀application/x-www-form-urlencodedmultipart/form-datatext/plain4、关于https以下描述错误的是（）A. http是超⽂本传输协议，信息是明⽂传输。

前端面试题及答案2019一、HTML相关面试题1. 什么是HTML？HTML的全称是什么？HTML是一种标记语言，用于描述网页的结构和内容。

它的全称是超文本标记语言（HyperText Markup Language）。

2. 请列举HTML5中新增的一些语义化标签。

HTML5中新增的一些语义化标签包括<header>、<nav>、<section>、<article>、<aside>、<footer>等。

3. meta标签的作用是什么？举例说明一些常用的meta标签。

meta标签用于提供关于网页的元信息。

常用的meta标签有：- <meta charset="UTF-8">：设置网页的字符编码为UTF-8。

- <meta name="viewport" content="width=device-width, initial-scale=1.0">：用于适配移动设备的viewport。

- <meta name="keywords" content="关键词1, 关键词2, ...">：用于描述网页的关键词。

- <meta name="description" content="网页描述">：用于描述网页的内容。

二、CSS相关面试题1. 什么是CSS？CSS的全称是什么？CSS是层叠样式表（Cascading Style Sheets）的缩写，用于描述网页的布局和样式。

2. 请描述一下CSS选择器的优先级规则。

CSS选择器的优先级规则是：行内样式 > ID选择器 > 类选择器 > 属性选择器 > 标签选择器。

同时，后面的选择器权重会大于前面的选择器。

前端⾯试题2019年京东⼯程师⾯试题及答案解析⼀、单选题（共25题，每题5分）1.以下（）函数不是jQuery内置的与AJAX相关的函数。

A、$.ajax()B、$.get()C、$.post()D、$.each()参考答案：D答案解析：暂⽆2.下⾯关于 HTML 的描述正确的⼀项是？A、HTML5 中的所有标签都必须写结束标签B、DOCTYPE 的设置不会影响页⾯的展⽰效果C、HTML5 中的属性名对⼤⼩写敏感D、HTML5 中可以使⽤ data-* ⾃定义属性参考答案：D答案解析：略3.下列哪⼀个是页⾯载⼊时会触发什么Dom事件？A、onchangeB、onacliveC、onloadD、onresize参考答案：C答案解析：onload是加载完触发，学习⾃⼰要理解到位，但做题，适当理解题⽬的不严谨。

4.关于bootstrap3的说法，错误的是A、在windows上⽀持IE8B、在IOS上⽀持OperaC、在MAC OS及Windows上⽀持firefoxD、在IOS及android上都⽀持chrome参考答案：B5.标签中，哪个是表格边框线的粗细？A、bordercolorB、borderC、cellspacingD、cellpadding参考答案：B答案解析：bordercolor表⽰边框颜⾊；cellspacing表⽰单元格之间的间隔；cellpadding表⽰单元格内边距。

6.若要在⽹页中插⼊样式表main.css,以下⽤法中正确的是（）A、<link rel="stylesheet" src="main.css" type="text/css">B、<link rel="stylesheet" href="main.css" type="text/css">C、<style rel="stylesheet" href="main.css" type="text/css">D、<include rel="stylesheet" href="main.css" type="text/css">参考答案：B答案解析：略7.获取 input 节点的正确⽅法是( )A、document.querySelectorAll('file')[0]B、document.getElementById('file')[0]C、document.getElementByTagName('file')[0]D、document.getElementsByClassName('file')[0]参考答案：D答案解析：全错了， fuc\*8.下列哪些不属于HTML input元素种类：A、searchB、datetimeC、rangeD、bool参考答案：D9.下⾯关于React说法错误的是A、React DOM在渲染之前会默认过滤所有传⼊的值B、React DOM在渲染过程中只会更新改变了的部分C、直接通过赋值更新React组件状态不会重新渲染组件，必须使⽤setState⽅法D、JSX是JavaScript的⼀种语法扩展，React的使⽤依赖JSX参考答案：D答案解析：纯React创建节点的话可以⽤React.createElement，组件的话有ES6 class、createClass或stateless function三种创建⽅法(⽬前)10.要去掉⽂本超链接的下划线，下列正确的是（）A、a{underline:none}B、a{ text-decoration:none}C、a{ text-decoration:underline}D、a{ decoration:no underline}11.获取当前时间的JavaScript语句是（）A、new Now()B、new Date()C、GetTime()D、now()12.阅读如下代码，请问 wrap 这个 div 的⾼度是多少？A、100pxB、150pxC、200pxD、250px13.在HTML语句中，⽤来表⽰标题的标签是（）A、<h1>B、<header>C、<hr>D、<heading>14.关于form标签的说法，下列错误的是？（）A、<form> 标签⽤于为⽤户输⼊创建 HTML 表单B、数据通过设置的action属性提交到指定的位置C、<form>标签⽬前只⽀持GET和POST请求，且默认为GETD、<form>标签的enctype属性值默认为multipart/form-data15.虽然不同的操作系统可能装有不同的浏览器。

--------------------------------------面试题-----------------------------------------1 vuex的五个状态VueX 是一个专门为Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成vue 组件里的某些data )。

Vue有五个核心概念，state, getters, mutations, actions, modules。

state => 基本数据==datagetters => 从基本数据派生的数据==computedmutations => 提交更改数据的方法，同步！==methodsactions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex2 vue周期(钩子函数) created可获取数据Mounted可操作DOMVue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。

通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

分为三个阶段：初始化、运行中、销毁。

beforeCreate：实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作Created：挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取beforeMount：接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取Mounted：接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom 等事情...beforeUpdate：当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom 机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿Updated：当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dombeforeDestroy：当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等Destroyed：组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以钩子函数的的实际应用beforecreate : 举个栗子：可以在这加个loading事件created：在这结束loading，还做一些初始化，实现函数自执行mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情beforeDestroy：你确认删除XX吗？destroyed ：当前组件已被删除，清空相关内容3 cookie、localstroge、localSeesion的区别共同点：都是保存在浏览器端，且同源的。

2019 VUE前端面试题1、active-class是哪个组件的属性?嵌套路由怎么定义?答：vue-router模块的router-link组件。

2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?答：在router目录下的index.js文件中，对path属性加上/:id。

使用router对象的params.id3、vue-router有哪几种导航钩子?答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

第二种：组件的钩子;第三种：单独路由独享组件4、scss是什么?安装使用的步骤是?有哪几大特性?答：预处理css，把css当前函数编写，定义变量,嵌套。

先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader4.1、scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?答：css的预编译。

使用步骤：第一步：用npm 下三个loader(sass-loader、css-loader、node-sass)第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss第三步：还是在同一个文件，配置一个module属性第四步：然后在组件的style标签加上lang属性，例如：lang=”scss”有哪几大特性:1、可以用变量，例如($变量名称=值);2、可以用混合器，例如()3、可以嵌套5、mint-ui是什么?怎么使用?说出至少三个组件使用方法?答：基于vue的前端组件库。

npm安装，然后import样式和js，e(mintUi)全局引入。

在单个组件局部引入：import {Toast} from ‘mint-ui’。