2021前端面试题
前言：最近不是很忙，就整理了一下2021常见面试题
一、html
1、<img>的title和alt有什么区别?
1、alt： 图片加载失败时，显示在网页上的替代文字
2、title： 鼠标放在上面时显示的文字
3、alt 是必要属性，title 非必要
2、html5有哪些新特性、移除了那些元素？
（1）新增特性
a、新增标签
article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、
hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video
其中常用标签：article、aside、audio、video、canvas、footer、header、nav、section
b、新增localStorage、sessionStorage
c、新增contenteditable属性 （任何dom节点只要加上contenteditable="true"就可以变得可编辑）
d、Geolocation 地理定位
（2）移除特性
<basefont> 默认字体，不设置字体，以此渲染，<font> 字体标签，<center> 水平居中，<u> 下划线，<big> 大字体
<strike> 中横线，<tt> 文本等宽
3、WEB标准以及W3C标准是什么?
1、标签闭合
2、标签小写
3、嵌套正确
4、外部链接css和js
5、提倡结构、表现和行为相分离（HTML结构、CSS表现、JavaScript行为）
4、xhtml和html有什么区别?
1、其基础语言不同
a、XHTML是基于可扩展标记语言（XML）。
b、HTML是基于标准通用标记语言（SGML）。
2、语法严格程度不同
a、XHTML语法比较严格，存在DTD定义规则。
b、HTML语法要求比较松散，这样对网页编写者来说，比较方便。
3、可混合应用不同
a、XHTML可以混合各种XML应用，比如MathML、SVG。
b、HTML不能混合其它XML应用。
4、大小写敏感度不同
a、XHTML对大小写敏感，标准的XHTML标签应该使用小写。
b、HTML对大小写不敏感。
5、公布时间不同
a、XHTML是2000年W3C公布发行的。
b、HTML4.01是1999年W3C推荐标准。
5、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
1. <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
2. 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
6、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
行内元素 span、b、em、strong、a、input、label等
1、设置宽高无效
2、对margin仅设置左右方向有效，上下无效；padding上下左右都有效，会撑大空间
3、不会自动进行换行
块级元素 div、h1-h6、p、ul、ol、li、blockquote、address等
1、能够识别设置宽高
2、margin和padding的上下左右均对其有效
3、独占一行
空元素
空元素一般指的是无须闭合的标签
<br/>、<hr/>、<input/>、<img/>、<link/>、<meta/>等
7、HTML全局属性(global attribute)有哪些
html属性赋予元素意义和语境，可以用于任何的html元素
1、class：为元素设置类标识
2、data-*：为元素增加自定义属性
3、id：元素id，文档内唯一
4、lang：元素内容的语言
5、style：行内css样式
6、title：元素相关的建议信息
7、dir：规定元素中内容的文本方向（ltr：从左到右， rtl：从右到左）
8、contenteditable：html新增属性，设置true后可编辑元素
9、hidden：隐藏一个html元素
8、Canvas和SVG有什么区别？
Canvas
1、可伸缩矢量图形
2、放大缩小不会失真
SVG
1、HTML5新加的元素
2、使用XML描述2D图形的语言
9、HTML5 为什么只需要写 ？
<!DOCTYPE HTML> 是文档类型声明，它声明了文档类型为html5，告诉浏览器和其他开发者，该文档使用的是html5标准
二、CSS
1、实现一个div在不同分辨率下的水平垂直居中
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid pink;
width: 100px;
height: 100px;
}
2、左右固定，中间自适应样式
<style>
.box {
display: flex;
height: 200px;
}
.left {
flex: 0 0 200px;
background-color: pink;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
flex: 0 0 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
3、阐述清楚浮动的几种方式（常见问题）
1、浮动的产生
float: left/right（设置后产生浮动）
初衷：浮动原先的设计初衷是为了实现文字环绕效果
结果：父元素高度塌陷，理解起来就是元素浮动飘起来了，失去高度，下面的元素会顶上来，就造成了原有的元素背景不见了，margin/padding也不能正常显示
2、解决浮动的方法
（1）clear: both，在元素最后下加一个元素设置clear：both属性，缺点是会增加多余无用的html元素
<div class="container">
<div class="left">left浮动</div>
<div class="right">right浮动</div>
<div style="clear:both;"></div>
</div>
（2）使用after伪元素
.box 父元素
.box::after {
content: ' ';
display: block;
clear: both;
}
（3）给父元素设置明确的高度，缺点是并不是所有元素的高度都是固定
（4）给父级元素设置overflow:hidden, 缺点：不能和position配合使用
4、解释css sprites ，如何使用？
1、什么是精灵图
将一些小图标放在一张图上
2、精灵图的优点
减少图片的总大小
减少下载图片资源请求，减小建立连接的消耗
3、精灵图的使用方式
.icon1 {
background-image: url(css/img/sidebar.png);
background-repeat: no-repeat;
background-position: 20px 20px;
}
// 第一个数是x轴， 第二个数是y轴
5、box-sizing常用的属性有哪些？分别有什么作用？
（1）content-box
宽高是元素本身的宽高 不包含border+padding
（2）border-box
元素的宽高已经包含了border+padding
（3）inherit
从父元素继承box-sizing属性
6、CSS样式覆盖规则
!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)
7、请简要描述margin重合问题，及解决方式
问题：相邻两个盒子垂直方向上的margin会发生重叠，只会取比较大的margin
解决：（1）设置padding代替margin
（2）设置float
（3）设置overflow
（4）设置position：absolute 绝对定位
（5）设置display： inline-block
8、display:none; visibility:hidden区别？
1、dispaly:none 设置后该元素在dom元素中消失，不在占用空间
2、visibity:hidden 设置后该元素还存在只是不可见，还占用空间，影响布局，具有继承性
9、重绘和回流
1、重绘
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
2、回流
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
3、重绘与回流区别
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变
10、说说你对语义化的理解
根据内容的结构选择合适的标签
1、样式丢失后，页面依然展示清晰的结构
2、有利于seo便于爬虫去爬取更多有用的信息
3、方便其他设备渲染页面
4、更具有可读性，便于开发团队维护
11、为什么要初始化css样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。
12、移动端适配1px问题
1、在ios8+中当devicePixelRatio=2的时候使用0.5px
2、伪元素 + transform 实现
对于老项目伪元素+transform是比较完美的方法了。
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
3、viewport + rem 实现
这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。
在devicePixelRatio = 2 时，输出viewport：
在devicePixelRatio = 3 时，输出viewport：
4、使用box-shadow模拟边框
利用css 对阴影处理的方式实现0.5px的效果
13居中为什么要使用transform（为什么不使用marginLeft/Top）
1、transform 属于合成属性，不会引起整个页面的回流重绘，节省性能消耗，但是占用内存会大些
2、top/left属于布局属性，会引起页面layout回流和repaint重绘。
14、介绍css3中position
1、position: static
static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。
2、position: relative
relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。
3、position: absolute
absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：
1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。
4、position: fixed
可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。
5、inherit
继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。
6、sticky
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
可以知道sticky属性有以下几个特点：
- 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
- 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
15、上下固定，中间滚动布局如何实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#app {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
width: 100%;
/* height: 100px; */
/* position: absolute;
top: 0; */
background-color: #000;
}
.footer {
width: 100%;
/* height: 100px;
position: absolute;
bottom: 0; */
background-color: #000;
}
.main {
width: 100%;
/* position: absolute;
top: 100px;
bottom: 100px;
height: auto; */
flex: 1;
overflow: auto;
background-color: brown;
}
</style>
</head>
<body>
<div id="app">
<div class="header">header</div>
<div class="main">main
<div style="height: 2000px;"></div>
</div>
<div class="footer">footer</div>
</div>
<script>
</script>
</body>
</html>
16、css实现border渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>border渐变</title>
<style>
button{
color: #23b7cb;
font-size: 15px;
padding: 5px 15px;
background: #fff;
border: 1px transparent solid;
border-radius: 30px;
position: relative;
}
button:after{
content:'';
position: absolute;
top: -3px; bottom: -3px;
left: -3px; right: -3px;
background: linear-gradient(135deg,#000781, #23b7cb);
border-radius: 30px;
content: '';
z-index: -1;
}
</style>
</head>
<body>
<button>进入平台</button>
</body>
</html>
19、 css实现一个旋转的圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转</title>
</head>
<style>
.wrapper{
width: 600px;
height:600px;
background: #F8F8F8;
display: flex;
justify-content: center;
align-items: center;
}
.z{
display: inline-block;
height: 40px;
width: 40px;
text-align: center;
background: red;
background: #F8F8F8;
color: #FFF;
border-radius: 100%;
margin: 6px;
border: 2px solid #666;
border-bottom-color: transparent;
vertical-align: middle;
-webkit-animation: rotate 0.75s linear infinite;
animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<body>
<div class="wrapper">
<div class="z">
zou
</div>
</div>
</body>
</html>
20、css----BFC,IFC,GFC，FFC的区别
1、FC：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
2、BFC:“块级格式化上下文”。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？
float的值不为none。
overflow的值不为visible。
position的值不为relative和static。
display的值为table-cell, table-caption, inline-block中的任何一个。
作用：结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。
3、IFC:“内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
作用：
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
4、GFC：“网格布局格式化上下文”，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
那么GFC有什么用呢，和table又有什么区别呢？
首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。
5、FFC：“自适应格式化上下文”，display值为flex或者inline-flex的元素将会生成自适应容器（flex container）。
Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。
21、css3有哪些新特性
新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}
个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}
颜色透明度 color: rgba（255, 0, 0, 0.75）；
圆角 border-radius: 5px;
渐变 background:linear-gradient（red, green, blue）；
阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url（bt_blue.png） 0 10;
转换
旋转 transform: rotate（20deg）；
倾斜 transform: skew（150deg, -10deg）；
位移 transform:translate（20px, 20px）；
缩放 transform: scale（。5）；
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
22、CSS3新增伪类有那些？
:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符
23、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型(IE盒模型、怪异盒模型)有什么不同的？
1、CSS盒子模型: 外边距(margin) 内边距(padding) 边框(border) 内容区(width、height)
2、CSS盒子模型与低版本IE的盒子模型的区别主要在于：宽和高不一样
3、标准的CSS的盒子模型的宽高：内容区的宽高
4、低版本IE的盒子模型的宽高：内容区+内边距+边框
24、行内元素float:left后是否变为块级元素？
1、行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是100%，行内元素默认100%宽度占据一行
2、这时候给行内元素设置 padding-top 和 padding-bottom 或者 width、height 都是有效果的
25、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用
- 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
- 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
- 后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
- 由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
- 单冒号（：）用于css3的伪类
- 双冒号（：：）用于css3的伪元素
- 想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
- 在代码顺序上，::after生成的内容也比::before生成的内容靠后。
- 如果按堆栈视角，::after生成的内容会在::before生成的内容之上
- ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
26、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
27、垂直塌陷及解决方法
三、js
1、es6的新特性
const let
模板字符串
箭头函数
函数的参数默认值
对象和数组解构
for...of 和 for...in
2、promise的使用，怎么用es5实现promise
3、if有作用域吗
只有函数有作用域，if是没有作用域的。
但是有一种情况会让if看上去有作用域，就是在if {}语句中，使用const、let，他们会有块级作用域。
4、原型链和作用域链的区别
（1）原型链
当访问一个对象的某个属性时，会先在这个对象本身的属性上找，如果没有找到，会去这个属性的__proto__属性上找，即这个构造函数的prototype，如果还没找到，就会继续在__proto__上查找，
直到最顶层，找不到即为undefined。这样一层一层往上找，彷佛是一条链子串起来，所以叫做原型链。
（2）作用域链
变量取值会到创建这个变量的函数的作用域中取值，如果找不到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。
（3）区别
作用域是对变量而言，原型链是对于对象的属性而言
作用域链的顶层是window，原型链的顶层是Object
5、js判断类型
1、typeof
检测不出null 和 数组，结果都为object，所以typeof常用于检测基本类型
2、instanceof
不能检测出number、boolean、string、undefined、null、symbol类型，所以instancof常用于检测复杂类型以及级成关系
3、constructor
null、undefined没有construstor方法，因此constructor不能判断undefined和null。
但是contructor的指向是可以被改变，所以不安全
4、Object.prototype.toString.call
全类型都可以判断
6、数据类型怎么检测
1、typeof
例：console.log(typeof true) // boolean
2、instanceof
例：console.log([1,2] instanceof Array) // true
3、constructor
例： console.log([1, 2].constructor === Array) // ture
4、Object.prototype.toString.call
例：Object.prototype.toString.call([1, 2]) // [object Array]
7、普通函数和箭头函数的区别
1、普通函数
可以通过bind、call、apply改变this指向
可以使用new
2、箭头函数
本身没有this指向，
它的this在定义的时候继承自外层第一个普通函数的this
被继承的普通函数的this指向改变，箭头函数的this指向会跟着改变
箭头函数外层没有普通函数时，this指向window
不能通过bind、call、apply改变this指向
使用new调用箭头函数会报错，因为箭头函数没有constructor
8、如何用原生js给一个按钮绑定两个onclick事件？
var btn = document.getElementById('btn')
btn.addEventListener('click', fn1)
btn.addEventListener('click', fn2)
function fn1 () {
console.log('我是方法1')
}
function fn2 () {
console.log('我是方法2')
}
9、document.write和innerHTML的区别
document.write 将内容写入页面，清空替换掉原来的内容，会导致重绘
document.innerHTML 将内容写入某个Dom节点，不会重绘
10、栈和堆的区别
1、堆
动态分配内存，内存大小不一，也不会自动释放
2、栈
自动分配相对固定大小的内存空间，并由系统自动释放
3、基本类型都是存储在栈中，每种类型的数据占用的空间的大小是确定的，并由系统自动分配和释放。内存可以及时回收。
4、引用类型的数据都是存储在堆中。准确说是栈中会存储这些数据的地址指针，并指向堆中的具体数据。
11、undefined 和 null 区别
1、null
什么都没有，表示一个空对象引用（主动释放一个变量引用的兑现那个，表示一个变量不再指向任何引用地址）
2、undefined
没有设置值的变量，会自动赋值undefined
3、区别
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
12、eval()的作用
eval(string) 函数计算 JavaScript 字符串，并把它作为脚本代码来执行
如果参数是一个表达式，eval() 函数将执行表达式；
如果参数是Javascript语句，eval()将执行 Javascript 语句；
如果执行结果是一个值就返回，不是就返回undefined，如果参数不是一个字符串，则直接返回该参数。
特殊：eval("{b:2}") // 声明一个对象
eval("（{b:2}）") // 返回对象{b:2}
13、JS哪些操作会造成内存泄露
这个文章讲的通俗易懂，可以参考具体案例 https://www.jianshu.com/p/763ba9562864
内存泄漏是指一块被分配的内存既不能使用，也不能回收，直到浏览器进程结束。
1、意外的全局变量
2、闭包
3、没有清理的dom元素
dom元素赋值给变量，又通过removeChild移除dom元素。但是dom元素的引用还在内存中
4、被遗忘的定时器或者回调
14、谈谈垃圾回收机制方式及内存管理
JavaScript 在定义变量时就完成了内存分配。当不在使用变量了就会被回收，因为其开销比较大，垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。
（1）垃圾回收
标记清除法
当变量进入环境时，将这个变量标记为'进入环境'。当标记离开环境时，标记为‘离开环境’。离开环境的变量会被回收
引用技计数法
跟踪记录每个值被引用的次数，如果没有被引用，就会回收
（2）内存管理
内存分配=》内存使用=》内存回收
15、什么是闭包，如何使用它，为什么要使用它？
（1）闭包就是能够读取其它函数内部变量的函数
（2）使用方法：在一个函数内部创建另一个函数
（3）最大用处有两个：读取其他函数的变量值，让这些变量始终保存在内存中
（4）缺点：会引起内存泄漏（引用无法被销毁，一直存在）
16、请解释JSONP的工作原理，以及它为什么不是真正的AJAX
JSONP 是一种非正式传输协议，允许用户传递一个callback给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
当GET请求从后台页面返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用后台页面中的一个callback函数。
它们的实质不同
ajax的核心是通过xmlHttpRequest获取非本页内容
jsonp的核心是动态添加script标签调用服务器提供的js脚本
jsonp只支持get请求，ajax支持get和post请求
17、请解释一下JavaScript的同源策略
同源指协议，域名，端口相同，
同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。
18、关于JS事件冒泡与JS事件代理（事件委托）
（1）事件冒泡
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window，过程就像冒泡泡 。如果在某一层想要中止冒泡，使用 event.stopPropagation() 。
但是当大量标签大量事件的时候先然不可能为每个元素都加上事件，（事件绑定占用事件，浏览器要跟踪每个事件，占用更多内存。而且并不是所有事件都会被用户使用到）。所以需要事件委托来解决这个问题。
（2）事件委托
将事件给最外层的元素，自己不实现逻辑，由最外层元素来代理。（判断事件源，做不同处理）
19、new操作符到底到了什么
//（1）
var obj = new Fun() // 做了三件事
var obj = {} // 创建一个空对象
obj.__proto__ = Fun.prototype //空对象的__proto__指向构造函数的原型对象
Fun.call(obj) // 构造函数this指向替换成obj
//（2）实现一个new
function _new(fn, ...arg) {
const obj = Object.create(fn.prototype);
const ret = fn.apply(obj, arg);
// 根据规范，返回 null 和 undefined 不处理，依然返回obj，不能使用
// typeof result === 'object' ? result : obj
return ret instanceof Object ? ret : obj;
}
20、js延迟加载的方式有哪些？
（1）defer属性
<script src="test.js" defer="defer"></script>
立即下载，但是会等到整个页面都解析完成之后再执行
（2）async属性
<script src="test.js" async></script>
不让页面等待脚本下载和执行（异步下载），但是无法控制加载的顺序
（3）动态创建script标签
（4）使用定时器延迟
（5）让js最后加载
21、promise、async有什么区别
1、什么是Async/Await
async/await是写异步代码的新方式，使用的方式看起来像同步
async/await是基于Promise实现的，它不能用于普通的回调函数。
2、什么是promise
为了解决异步嵌套而产生，让代码更易于理解
区别，async/await让代码更像同步，进一步优化了代码
22、== 和 ===的区别，什么情况下用相等==
”==” 是判断转换后的值是否相等,
”===” 是判断值及类型是否完全相等
不需要判断类型时可以使用==
23、bind、call、apply的区别
var a = {
user:"良人",
fn: function(arg1, arg2) {
console.log(this.user) // 良人
console.log(arg1+ arg2) // 2
}
}
var b = a.fn
//1、bind
var c = b.bind(a) // 返回一个已经切换this指向的新函数
c(1,1)
//2、apply
b.apply(a, [1, 1]) // 将b添加到a环境中
//第一个参数是this指向的新环境
//第二个参数是要传递给新环境的参数
//注意： 第一个参数为null时表示指向window
//3、call
b.call(a, 1, 1) // 将b添加到a环境中
//第一个参数是this指向的新环境
//第二、三...个参数是传递给新环境的参数
//注意： 第一个参数为null时表示指向window
//小结： bind方法可以让函数想什么时候调用就什么时候调用。apply、call方法只是临时改变了this指向。
24、介绍暂时性死区
在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。
25、两个对象如何比较
有思路即可，步骤：
（1）判断两个类型是否对象
（2）判断两个对象key的长度是否一致
（3）判断属性value值的数据类型，根据不同数据类型做比较
a、是对象，重复这个步骤
b、是数组，转字符串比较
c、是基本类型，直接判断
26、介绍各种异步方案
（1）回调函数
（2）promise
（3）async/await
27、Promise和Async处理失败的时候有什么区别
（1）Promise错误可以在构造体里面被捕获，而async/await返回的是promise,可以通过catch直接捕获错误。
（2）await 后接的Promise.reject都必须被捕获，否则会中断执行
28、JS为什么要区分微任务和宏任务
（1）js是单线程的，但是分同步异步
（2）微任务和宏任务皆为异步任务，它们都属于一个队列
（3）宏任务一般是：script，setTimeout，setInterval、setImmediate
（4）微任务：原生Promise
（5）遇到微任务，先执行微任务，执行完后如果没有微任务，就执行下一个宏任务，如果有微任务，就按顺序一个一个执行微任务
29、Promise和setTimeout执行先后的区别
Promise是微任务，setTimeout是宏任务，先执行微任务，如有还有微任务执行完微任务再执行下一个宏任务
30、 setTimeout(0)和setTimeout(2)之间的区别
定时器表面意思是过指定时间后执行，但是真正的含义是每过指定时间后，会有fn进入事件队列
(1)setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，意思就是不用再等多少秒了，只要主线程执行栈内的同步任务全部执行完成，栈为空就马上执行
(2)setTimeout(fn,1) 1毫秒后执行，但是因为要先执行前面的宏任务，所以不一定就是在一毫秒后执行，取决于队列里任务执行的速度
31、for..in 和 object.keys的区别
Object.keys不会遍历继承的原型属性
for...in 会遍历继承的原型属性
32、XML和JSON的区别？
1，xml是重量级的，json是轻量级的。
2，xml在传输过程中比较占带宽，json占带宽少，易于压缩。
3，xml和json都用在项目交互下，xml多用于做配置文件，json用于数据交互。
33、说说你对AMD和Commonjs的理解
两者都是为了实现模块化编程而出现的
（1）commonjs
通常被应用于服务器，在服务器端，模块的加载和执行都在本地完成，因此，CommonJS并不要求模块加载的异步化。
核心思想：
一个单独文件就是一个模块，通过require方法来同步加载要依赖的模块，然后通过extports或则module.exports来导出需要暴露的接口。
（2）AMD
可以实现异步加载依赖模块，预加载，在并行加载js文件同时，还会解析执行该模块。虽然可以并行加载，异步处理，但是加载顺序不一定
（3）CMD
懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。
34、js的涉及模式
单例模式、策略模式、代理模式、迭代器模式...等等
这篇文章觉得很好，简介明了能让人大致懂得这些模式，具体还是要自己去学习 https://www.cnblogs.com/imwtr/p/9451129.html
35、["1", "2", "3"].map(parseInt) 答案是多少？
这题看到的时候都懵逼了，还是太菜了 = =...
（1）map用法：
arr.map(function(el, index, arr) {
return el
})
map方法接收一个函数参数，并且这个函数可以接收三个参数
el：遍历过程中的当前项，
index：遍历过程中的当前下标
arr: 原数组
（2）parseInt用法：
parseInt(str, num)
根据num解析str，并返回一个整数。
str: 要解析的字符串，如果字符第一个数不能被转换，返回NaN。
num: 基数，介于 2 ~ 36 之间，如果传0，则默认用10计算。num不在区间内，返回NaN
（3）所以这道题，关键点就在num
el和index 相当于 str 和 num 带入一下
parseInt('1', 0) // '1' 用基数10算 为1
parseInt('2', 1) // NaN
parseInt('3', 2) // NaN
36、常见兼容性问题？
（1）事件对象兼容
e = e || window.event;
（2）阻止事件冒泡兼容
event.stopPropagation? event.stopPropagation():event.cancelBubble=true;
（3）阻止默认行为兼容
evt.preventDefault?evt.preventDefault():evt.returnValue=false;
（4）事件监听兼容
addEventListener ? addEventListener : attachEvent()
removeEventListener() ? removeEventListener() : detachEvent()
（5）事件目标对象兼容
var src = event.target || event.srcElement;
37、说说你对promise的了解
（1）promise是为解决异步处理回调金字塔问题而产生的 （2）有三种状态，pengding、resolve、reject，状态一旦决定就不会改变 （3）then接收resolve()，catch接收reject()
38、介绍js有哪些内置对象？
String对象、Array对象、Object对象、Number对象
Math对象、Date对象、Boolean对象
39、说几条写JavaScript的基本规范？
1、不要在同一行声明多个变量
2、使用 === 和 !== 来比较
3、不要使用全局函数
4、变量在使用之前的位置声明（减少变量提升干扰）
5、if用花括号包起来即使只有一行
6、写注释
40、JavaScript有几种类型的值？，你能画一下他们的内存图吗？
栈：原始数据类型（Undefined Null Boolean Number String）
堆：引用数据类型（对象、数组、函数）
41、href="#"与href="javascript:void(0)的区别"？
1、# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
2、javascript:void(0), 仅仅表示一个死链接。
如果你要定义一个死链接请使用 javascript:void(0)
42、对this的理解
1、单独使用，this表示全局对象
2、在函数中，this表示全局对象
3、在对象的一个函数方法中，this表示这个对象
4、可以通过apply、bind来更改this的指向
ps： this永远指向的是最后调用它的对象，仅当它在对象的一个函数方法中时会有差异
43、promise.all 返回什么
如果没有报错，返回执行结果[res1, res2,...]
如果报错，则返回第一个报错的promise的结果
44、多个await的执行顺序，如果要同步执行如何实现？
使用Promise.all
promise.all是等所有异步操作都完成之后返回结果，相当于让这些异步同步了
