文章目录

前言
一、HTML、CSS 相关
二、Javascript 相关
总结

前言

又到一年的毕业季了，大家都找到心仪的工作了吗？小牛马特此整理了百道前端面试基础题，对想要成为前端开发工程师的你一定很有帮助！
请添加图片描述

两套前端开发工程师简历模板。
链接：https://pan.baidu.com/s/1CmFN9IdGOi7_PQahELa4xw
提取码：LDL6

一、HTML、CSS 相关

1. 网络中使用最多的图片格式有哪些
JPEG,GIF,PNG,最流行的是 jpeg 格式，可以把文件压缩到最小在 ps 以 jpeg 格式存储时，提供 11 级压缩级别。
在这里插入图片描述

2.请简述 css 盒子模型
一个 css 盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）
默认情况下，盒子的 width 和 height 属性只是设置 content（内容）的宽和高。
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框

3.视频/音频标签的使用
视频：<video src=””></video>
视频标签属性：

属性名称	作用
src	需要播放的视频地址
width/height	设置播放视频的宽高，和 img 标签的宽高属性一样autoplay 是否自动播放
controls	是否显示控制条
poster	没有播放之前显示的展位图片loop 是否循环播放
perload	预加载视频（缓存）与 autoplay 相冲突，设置了 autoplay 属性，perload属性会失效。
muted	静音模式

音频: 音频属性和视频属性差不多，不过宽高和 poster 属性不能用

<audio> 
<source src=”” type=””> 
</audio>

4.HTML5 新增的内容有哪些

新增语义化标签

新增表单类型

表单元素

表单属性

表单事件

多媒体标签

5.Html5 新增的语义化标签有哪些
语义化标签优点：
1.提升可访问性
2.seo
3.结构清晰，利于维护

标签名称
header	页面头部
main	页面主要内
footer	页面底部
nav	导航栏
aside	侧边栏
article	加载页面一块独立内容
section	相当于 div
figure	加载独立内容（上图下字）
figcaption	figure 的标题
Hgroup	标题组合标签
mark	高亮显示
dialog	加载对话框标签（必须配合 open 属性）
Embed	加载插件的标签
video	加载视频
audio	加载音频（支持格式 ogg，mp3，wav）

6.Css3 新增的特性

扫描二维码关注公众号，回复： 14169649 查看本文章

边框：

border-radius 添加圆角边框

border-shadow：给框添加阴影（水平位移，垂直位移，模糊半径，阴
影尺寸，阴影颜色，insetr（内/外部阴影））

border-image：设置边框图像

border-image-source 边框图片的路径

border-image-slice 图片边框向内偏移

border-image-width 图片边框的宽度

border-image-outset 边框图像区域超出边框的量

border-image-repeat 图像边框是否平铺（repeat 平铺 round 铺满
stretch 拉伸）

背景：

Background-size 背景图片尺寸

Background-origin 规定 background-position 属性相对于什么位置定
位

Background-clip 规定背景的绘制区域（padding-box，border-box，
content-box）

渐变：

Linear-gradient（）线性渐变

Radial-gradient（）径向渐变

文本效果：

Word-break：定义如何换行

Word-wrap：允许长的内容可以自动换行

Text-overflow：指定当文本溢出包含它的元素，应该干啥

Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜
色）

转换：

Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜

Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）

Transform-style 指定嵌套元素怎么样在三位空间中呈现

2D 转换方法：rotate 旋转 translate（x，y）指定元素在二维空间的位移

scale（n）定义缩放转换

3D 转换方法：Perspective（n）为 3D 转换 translate rotate scale

过渡：

Transition-property 过渡属性名

Transition-duration 完成过渡效果需要花费的时间

Transition-timing-function 指定切换效果的速度

Transition-delay 指定什么时候开始切换效果

动画：animation

animation-name 为@keyframes 动画名称

animation-duration 动画需要花费的时间

animation-timing-function 动画如何完成一个周期

animation-delay 动画启动前的延迟间隔

animation-iteration-count 动画播放次数

animation-direction 是否轮流反向播放动画

7.清除浮动的方式有哪些？请说出各自的优点

高度塌陷：
当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。
清除浮动方式
1：给父元素单独定义高度
优点：快速简单，代码少
缺点：无法进行响应式布局

2：父级定义
overflow：hidden；zoom：1（针对 ie6 的兼容）
优点：简单快速、代码少，兼容性较高
缺点：超出部分被隐藏，布局时要注意

3：在浮动元素后面加一个空标签，clear：both；height：0；overflow：hidden
优点：简单快速、代码少，兼容性较高。
缺点：增加空标签，不利于页面优化

4：父级定义
overflow：auto
优点：简单，代码少，兼容性好
缺点：内部宽高超过父级 div 时，会出现滚动条

5：万能清除法：
给塌陷的元素添加伪对象

.father：after{
    
    
 Content：“随便写”；
 Clear：both；
 display：block；
 Height：0；
 Overflow：hidden；
 Visibility：hidden
}

优点：写法固定，兼容性高
缺点：代码多

8.定位的属性值有何区别

Position 属性值：relative absolute fixed static sticy

Relative 相对定位不脱离文档流，相对于自身定位

Absolute 绝对定位，脱离文档流相对于父级定位

Fixed 固定定位，脱离文档流，相对于浏览器窗口定位

sticy 粘性定位，常做吸顶使用

Static 默认值，元素出现在正常的流中

9.子元素如何在父元素中居中

水平居中：

子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置浮动，否则居中失效

子父元素宽度固定，父元素设置 text-align：center，子元素设置 display：inline-block，并且子元素不能设置浮动，否则居中失效

水平垂直居中：

子元素相对于父元素绝对定位，子元素 top，left 设置 50%，子元素 margin-top和 margin-left 减去各自宽高的一半

子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素margin：auto

父元素设置 display：table-cell vertical-align：middle，子元素设置margin：auto(多行文本垂直居中）

子元素相对父元素绝对定位，子元素 top，left 值为 50%，transform：translate（-50%，-50%）

父元素设置弹性盒子，
display：flex； justfy-content：center ；align-item：center；

10.Border-box 与 content-box 的区别？

Content-box 标准盒模型 width 不包括 padding 和 border
Border-box 怪异盒模型 width 包括 padding 和 border

11.如何让元素垂直居中？

设置子元素和父元素的行高一样
子元素设置为行内块，再加 vertical-align：middle
已知父元素高度，子元素相对定位，通过 transform：translateY（-50%）
不知道父元素高度，子绝父相，子元素 top：50%，transform：translateY（-50%）
创建一个隐藏节点，让隐藏节点的 height 为剩余高度的一半
给父元素 display：table，子元素 display：table-cell，vertical-align：middle
给父元素添加伪元素
弹性盒，父元素 display：flex，子元素 align-self：center

12.如何让 chrome 浏览器显示小于 12px 的文字?

本来:添加谷歌私有属性 -webkit-text-size-adjust：none，
现在:-webkit-transform：scale（）

13.Css 选择器有哪些，那些属性可以继承，优先级如何计算？Css3 新增的伪类有哪些？

Css2 选择器：元素选择器，id 选择器，群组选择器，类选择器，*通配符选择器，
后代选择器
Css2 伪类选择器：a:link/visited/hover/active
Css3 选择器：空格 > +相邻兄弟选择器 ~通用选择器（查找后面所有）

结构伪类选择器：

查找第几个: nth-child（n）

查找同一类型第几个: nth-of-type

查找唯一类型: only-of-type

属性选择器：根据标签属性查找 [attr=value]

: root 查找根元素 html 标签

: empty 查空标签

目标伪类选择器：（表单）

：enabled 查找可以使用的标签

：disabled 查找禁止使用的标签

：checked 查找被选中的标签

伪元素选择器：：selection 设置选中文本内容的高亮显示（只能用于背景色和文本颜色）

否定伪类选择器 not（）

语言伪类选择器 lang（取值）

优先级（权重）：

元素选择器 1

伪元素选择器 1

class 选择器 10

伪类选择器 10

属性选择器 10

Id 选择器 100

内联样式的权重 1000

包含选择器权重为权重之和

继承样式权重为 0

那些属性可以继承：

Css 继承特性主要是文本方面

所有元素可继承：visibility 和 cursor

块级元素可继承：text-indent 和 text-align

列表元素可继承：list-style，list-style-type，list-style-position，list-style-imag

内联元素可继承：letter-spacing，word-spacing，line-height，color，font，font-family，font-size,font-style，font-variant，font-weight，text-decoration，text-transform，
direction

字母间距段落间距行高字体颜色字体种类字体大小字体样式字体粗
细小型大写字母文本文本修饰转换不同元素中的文本文本方向

14.网页中有大量图片加载很慢你有什么办法进行优化？

图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶
端和页面的距离，如果前者小于后者，优先加载
使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
使用 csssprite 或者 svgsprite

15.行内元素/块级元素有哪些？

行内元素：相邻的行内元素会排列在同一行，不会独占一行设置宽高无效 span
块级元素：会独占一行可以设置宽高等属性 div
可变元素：根据上下文预警决定该元素为块元素还是内联元素
块级元素：div h1-h6 hr p ul ol table address blockquote dir from menu
行内元素：a br I em img input select span sub sup u textarea
可变元素：button del iframe ins

16.浏览器的标准模式和怪异模式区别？

标准模式：浏览器按照 W3C 标准解析执行代码
怪异模式：浏览器根据自己的方式解析执行代码，因为不同浏览器解析执行方式不一样，所以叫怪异模式

区别：

在怪异模式下，盒模型为怪异盒模型而在标准模式下为标准盒子模型

图片元素的垂直对齐方式对于行内元素和 table-cell 元素，标准模式下vertical-align 属性默认值是 baseline，而在怪异模式下，table 单元格中的。

图片的 vertical-align 属性默认值是 bottom，因此在图片底部会有几像素的空间

元素中的字体 css 中 font 的属性都是可以继承的，怪异模式下，对于table 元素，字体的某些元素不能从其他封装元素继承中得到，特别是 font-size。

属性:

内联元素的尺寸标准模式下，non-replaced inline 元素无法自定义大写，怪异模式下，定义元素的宽高会影响元素的尺寸。

元素的百分比高度当一个元素使用百分比高度时，在标准模式下，高度取决于内容变化，在怪异模式下，百分比被准确应用元素溢出的处理标准模式下，overflow 取值默认值为 visible，在怪异模式下，这个溢出会被当做扩展 box 对待，就是元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出内容。

17.Margin 和 padding 在什么场合下使用

margin 外边距自身边框到另一个边框之间的距离
padding 内边距自身边距到自身内容之间的距离
当需要在 border 外侧添加空白时用 margin，当需要在 border 内侧添加空白时
用 padding

18.弹性盒子布局属性有那些请简述?

flex-direction：弹性容器中子元素排列方式（主轴排列方式）
flex-wrap：设置弹性盒子的子元素超出父容器时是否换行
flex-flow：是 flex-direction 和 flex-wrap 简写形式
align-item：设置弹性盒子元素在侧轴上的对齐方式
align-content：设置行对齐
justify-content：设置弹性盒子元素在主轴上的对齐方式

19.怎么实现标签的禁用

添加 disabled 属性

20.flex 布局原理

就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式

21.px，rem，em 的区别

px 实际上就是像素，用 PX 设置字体大小时，比较稳定和精确。
px 像素（Pixel）。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。
px 特点:
IE 无法调整那些使用 px 作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位；
Firefox 能够调整 px 和 em，rem，但是有大部分的国产浏览器使用 IE 内核。
em 是相对长度单位。

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自 CSS2.0 手册)
任意浏览器的默认字体高都是 16px。所有未经调整的浏览器都符合: 1em=16px。
那么 12px=0.75em,10px=0.625em。为了简化 font-size 的换算，需要在 css 中
的 body 选择器中声明 Font-size=62.5%，这就使 em 值变为 16px*62.5%=10px,
这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来的 px 数值除以 10，然
后换上 em 作为单位就行了。1em=1rem=16px 在 body 中加入 font-size：62.5% 这
样直接就是原来的 px 数值除以 10 加上 em 就可以

em 特点

em 的值并不是固定的；

em 会继承父级元素的字体大小。
rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体
大小时，相对的是 HTML 根元素。

px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用 px 即可。
对于需要适配各种移动设备，使用 rem，例如只需要适配 iPhone 和 iPad 等分辨
率差别比较挺大的设备。

22.网页的三层结构有哪些

结构（html 或 xhtm 标记语言）
表现（css 样式表）
行为（js）

23.请简述媒体查询

媒体查询扩展了 media 属性, 就是根据不同的媒体类型设置不同的 css 样式，达到自适应的目的。

24.rem 缺点

比如：小说网站，屏幕越小的移动设备如果用了 rem 肯定文字就越小，就会导致看文章的时候特别费眼

25.常见的兼容性一阶段内容中记几个

min-height 的兼容的方法是什么？
background: red !important;/关键字过滤器/
min-height: 200px;
/* _height:200px; *//下划线过滤器/
height: auto !important;
height: 200px;（解决 IE 低版本 bug）
background: yellow;
opacity 属性的兼容写法是什么？
opacity:0.5;
filter: alpha(opacity=50);

26.垂直与水平居中的方式

line-height,text-align

27.三栏布局方式两边固定中间自适应

margin 负值法：左右两栏均左浮动，左右两栏采用负的 margin 值。中间栏
被宽度为 100%的浮动元素包起来
自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后
绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的
主体栏用左右 margin 值撑开距离。
4.flex 左右固定宽中间 flex：1
5.网格布局
table 布局

28.Doctype 作用

声明文档类型

29.元素类型分为哪几种？特点分别是什么？

一、块状元素 block 就是之前总结的大标签类型
特点：
1.独占一行或者一块区域，竖着排列的；
2.可以添加宽高;
3.可以添加 margin 和 padding，并且上下左右都生效；
4.一般可以作为其他元素的父元素使用

二、行内元素(内联元素) inline 之前总结的小标签
特点：
1.默认情况下，都是挨着排列的，并且有默认间距；
2.默认请况下，宽高添加无效；
3.默认情况下，添加的 margin 和 padding 值，只有左右生效，上下不生效；

三、行内块元素 inline-block 之前总结的特殊标签
特点：
1.就是块元素和行内元素特点的结合
2.有自己的私有属性 vertical-align:top/middle/bottom;
作用：
(1)可以用来解决图片向下撑大 3px 的 bug;
(2)可以结合其他属性一起实现行内块元素做水平垂直居中；

30.让一个元素消失和出现的方法是什么？

display：none/block 不占据空间，不能点击
opacity:0;和 opacity:1; 可以结合 transition 做过渡动画占据空间，不能点击
transition:1s; 过渡动画属性使用：

2 种情况使用：

需要鼠标滑过的时候有过渡效果，鼠标移开的时候没有过渡效果；transition
写在 hover 的地方；

需要鼠标滑过的时候和鼠标移开的都有过渡效果；transition 写在元素的本
身
visibility: hidden
visibility: visible; 占据空间，可以点击

31.子元素使用 margin-top，会导致父元素出现下移，请问怎么解决？

给父元素添加边框
给父元素或者子元素浮动 float
给父元素添加属性 overflow：hidden
把 margin 改为 padding

32.图片向下撑大 3 像素的 bug 有哪些解决方案？
5. 给图片添加 vertical-align: top/middle/bottom;
6. 给图片添加 display:block;
7. 给图片或者图片的父元素添加 float:left;
8. 给 body 或者图片的父元素添加 font-size:0;

二、Javascript 相关

1.Js 基本数据类型有哪些
字符串 String
数值 Number
布尔 boolean
null
undefined
对象数组
typeof 判断数据类型

2.Ajax 如何使用
一个完整的 AJAX 请求包括五个步骤：

创建 XMLHTTPRequest 请求对象
使用 open 方法创建 http 请求，并设置请求地址
xhr.open（get/post，url，async，true（异步），false（同步））经常使用前三个参数
设置发送的数据，用 send 发送请求
注册事件（给 ajax 设置事件）
获取响应并更新页面

var xhr = new XMLHttpRequest(); 创建一个 http 请求 (请求的载体)
xhr.open(type,url,async) 配置请求相关的信息(请求的方式,请求地址,是否异步)
type 请求的方式 (get | post)
url 请求地址
async 是否异步 (默认 true)
xhr.send(); 发送请求
xhr.onreadystatechange = function () { 页面加载时绑定,监听xhr.readyState 的变化
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText; 响应正文(文本/html 结构/json 数据)
console.log(result);
}
}

3.如何判断一个数据是 NaN

NaN 非数字但是用 typeof 检测是 number 类型
利用 NaN 的定义用 typeof 判断是否为 number 类型并且判断是否满足 isNaN
利用 NaN 是唯一一个不等于任何自身的特点 n!= =n
利用 ES6 中提供的 Object.is()方法（判断两个值是否相等） N= =NaN

4.Js 中 null 与 undefined 区别

相同点：用 if 判断时，两者都会被转换成 false
不同点：number 转换的值不同
number（null）为 0
number（undefined）为NaN
Null 表示一个值被定义了，但是这个值是空值
Undefined 变量声明但未赋值

5.闭包是什么？有什么特性？对页面会有什么影响
闭包可以简单理解成：定义在一个函数内部的函数。其中一个内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

特点：

函数嵌套函数。
函数内部可以引用外部的参数和变量。
参数和变量不会被垃圾回收机制回收。

使用：

读取函数内部的变量；
这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。

优点：

变量长期驻扎在内存中；
避免全局变量的污染；
私有成员的存在；

缺点：会造成内存泄露

闭包的使用场景

setTimeout
原生的 setTimeout 传递的第一个函数不能带参数，通过闭包可以实现传参效果。
回调
定义行为，然后把它关联到某个用户事件上（点击或者按键）。代码通常会作为一个回调（事件触发时调用的函数）绑定到事件。
函数防抖
在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。实现的关键就在于 setTimeOut 这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现。

6.Js 中常见的内存泄漏：

意外的全局变量
被遗忘的计时器或回调函数
脱离 DOM 的引用
闭包

7.事件委托是什么？如何确定事件源（Event.target 谁调用谁就是事件源）
JS 高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。

事件委托，称事件代理，是 js 中很常用的绑定事件的技巧，事件委托就是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。
事件委托的原理是 DOM 元素的事件冒泡

8.什么是事件冒泡？
一个事件触发后，会在子元素和父元素之间传播，这种传播分为三个阶段：

捕获阶段（从 window 对象传导到目标节点（从外到里），这个阶段不会响应任
何事件）
目标阶段，（在目标节点上触发）
冒泡阶段（从目标节点传导回
window 对象（从里到外）），事件委托/事件代理就是利用事件冒泡的机制把里层需要响应的事件绑定到外层。

9.本地存储与 cookie 的区别
Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为 4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。
早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你方案是种不错的选择。
sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与
localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
Cookie 一般由服务器生成，可设置失效时间。如果在浏览器端生成 Cookie，默认是关闭浏览器后失效，4K 左右
localStorage 除非被清除，否则永久保存，一般为 5MB
sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除。
与服务器端通信
每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题
仅在客户端（即浏览器）中保存，不参与和服务器的通信。
易用性
需要程序员自己封装，源生的 Cookie 接口不友好。
源生接口可以接受，亦可再次封装来对 Object 和 Array 有更好的支持。

Cookie 和 session 的区别
在这里插入图片描述

10.ES6 新特性
const 和 let、模板字符串、箭头函数、函数的参数默认值、对象和数组解构、for…of 和 for…in、ES6 中的类。

11.Let 与 var 与 const 的区别

Var 声明的变量会挂载在 window 上，而 let 和 const 声明的变量不会
Var 声明的变量存在变量提升，let 和 const 不存在变量提升
同一作用域下 var 可以声明同名变量，let 和 const、不可以
Let 和 const 声明会形成块级作用域
Let 暂存死区
Const 一旦声明必须赋值，不能用 null 占位，声明后不能再修改，如果声明的是复合类型数据，可以修改属性

12.数组方法有哪些请简述

push() 从后面添加元素，返回值为添加完后的数组的长度
arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素
arr.shift() 从前面删除元素，只能删除一个返回值是删除的元素
arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr.splice(i,n) 删除从 i(索引值)开始之后的那个元素。返回值是删除的元素
arr.concat() 连接两个数组返回值为连接后的新数组
str.split() 将字符串转化为数组
数组转换拼接成字符串 join（char）
arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的
arr.reverse() 将数组反转,返回值是反转后的数组
arr.slice(start,end) 切去索引值 start 到索引值 end 的数组，不包含 end 索引的值，返回值是切出来的数组
arr.forEach(callback) 遍历数组,无 return 即使有 return，也不会返回任何
值，并且会影响原来的数组
arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组。
arr.filter(callback) 过滤数组，返回一个满足要求的数组

13.Json 如何新增/删除键值对

//添加
json["gender"]="男"
json["age"]=26;
alert(json.age);
//删除
delete json["age"];
alert(json.age);
alert(json.gender);

14.什么是面向对象请简述

面向对象是一种思想，是基于面向过程而言的，就是说面向对象是将功能等通过对象来实现，将功能封装进对象之中，让对象去实现具体的细节；这种思想是将
数据作为第一位，这是对数据一种优化，操作起来更加的方便，简化了过程。
Js 本身是没有 class 类型的，但是每个函数都有一个 prototype 属性，prototype
指向一个对象，当函数作为构造函数时，prototype 就起到类似于 class 的作用
面向对象有三个特点：
封装（隐藏对象的属性和实现细节，对外提供公共访问方式）。
继承（提高代码复用性，继承是多态的前提）。
多态（是父类或接口定义的引用变量可以指向子类或具体实现类的实例对象）

15.普通函数和构造函数的区别

构造函数也是一个普通函数，创建方式和普通函数一样，但是构造函数习惯上首字母大写
调用方式不一样，普通函数直接调用，构造函数要用关键字 new 来调用
调用时，构造函数内部会创建一个新对象，就是实例，普通函数不会创建新对象
构造函数内部的this指向实例，普通函数内部的this指向调用函数的对象（如果没有对象调用，默认为 window）
构造函数默认的返回值是创建的对象（也就是实例），普通函数的返回值由return 语句决定
构造函数的函数名与类名相同

16.请简述原型/原型链/（原型）继承*****

什么是原型：
任何对象实例都有一个原型，也叫原型对象，这个原型对象由对象的内置属
性_proto_指向它的构造函数的 prototype 指向的对象，即任何对象都是由一个
构造函数创建的，但是不是每一个对象都有 prototype，只有方法才有prototype。
什么是原型链？
原型链基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
我们知道，每个构造函数都有一个原型对象，每个原型对象都有一个指向构造函数的指针，而实例又包涵一个指向原型对象的内部指针。
原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就
一层层的扒出创建对象的构造函数，直至到 Object 时，就没有_proto_指向了。
因为_proto_实质找的是 prototype，所以我们只要找这个链条上的构造函数的
prototype。其中 Object.prototype 是没有_proto_属性的，它==null。
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数想指针
(constructor)，而实例对象都包含一个指向原型对象的内部指针(__proto__)。
如果让原型对象等于另一个原型对象的实例，此时的原型对象将包含一个指向另
一个原型的指针(__proto__)，另一个原型也包含着一个指向另一个构造函数的指针(constructor)。假如另一个原型又是另一个类型的实例……这就构成了实
例与原型的链条。也叫原型链.
原型继承是 js 的一种继承方式，原型链作为实现继承的主要方法,其基本思路是
利用原型让一个引用类型继承另一个引用类型的属性和方法,
原型继承：利用原型中的成员可以被和其相关的对象共享这一特性，可以实现继
承，这种实现继承的方式，就叫做原型继承.

17.Promise 的理解
一、什么是 Promise？我们用 Promise 来解决什么问题？
我们都知道，Promise 是承诺的意思，承诺它过一段时间会给你一个结果。
Promise 是一种解决异步编程的方案，相比回调函数和事件更合理和更强大。
从语法上讲，promise 是一个对象，从它可以获取异步操作的消息；

二、promise 有三种状态：pending 初始状态也叫等待状态，fulfiled 成功状态，
rejected 失败状态；状态一旦改变，就不会再变。创造 promise 实例后，它会
立即执行。

三、Promise 的两个特点
1、Promise 对象的状态不受外界影响
2、Promise 的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状
态不可以逆。

四、Promise 的三个缺点
1）无法取消 Promise,一旦新建它就会立即执行，无法中途取消
2）如果不设置回调函数，Promise 内部抛出的错误，不会反映到外部
3）当处于 pending（等待）状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成

18.promise 是用来解决两个问题的：

回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这
种现象
promise 可以支持多并发的请求，获取并发请求中的数据
这个 promise 可以解决异步的问题，本身不能说 promise 是异步的

19.请简述 async 的用法
Async 就是 generation 和 promise 的语法糖，async 就是将 generator 的*换成
async，将 yiled 换成 await函数前必须加一个 async，异步操作方法前加一个 await 关键字，意思就是等一下，执行完了再继续走，注意：await 只能在 async 函数中运行，否则会报错
Promise 如果返回的是一个错误的结果，如果没有做异常处理，就会报错，所以用 try…catch 捕获一下异常就可以了

20.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
分为 4 个步骤：

当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面
上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS
服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连
接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报
文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，然后服
务器响应并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的
GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源
此时，Web 服务器提供资源服务，客户端开始下载资源。
通俗的讲：解析你的 dns，返回响应的数据，服务器解析数据，客服端显示数据。

21.Css 预处理 sass less 是什么？为什么使用他们
Sass 和 less 都是 css 预处理器，是 css 上的一种抽象层，是一种特殊的语法，
最终会编译成 css，less 是一种动态样式语言，给 css 赋予了动态语言的特性，比如：变量，继承，嵌套。Less 既可以在客户端运行，在可以在服务端运行（需要借助 node）

22.Js 中.call()与.apply()区别

apply：调用一个对象的一个方法，用另一个对象替换当前对象。
call：调用一个对象的一个方法，用另一个对象替换当前对象。
从定义中可以看出，call 和 apply 都是调用一个对象的一个方法，用另一个对象替换当前对象。而不同之处在于传递的参数，apply 最多只能有两个参数——新 this 对象和一个数组 argArray，如果 arg 不是数组则会报错
相同点:两个方法产生的作用是完全一样的。call, apply 作用就是借用别人的方法来调用,就像调用自己的一样.
不同点:方法传递的参数不同

23.为什么会造成跨域/请简述同源策略

出现跨域问题的原因:

在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。
在请求的过程中我们要想回去数据一般都是 post/get 请求，所以…跨域问题出
现

跨域问题来源于 JavaScript 的同源策略，即只有协议+主机名+端口号(如存在)
相同，则允许相互访问。也就是说 JavaScript 只能访问和操作自己域下的资源，
不能访问和操作其他域下的资源。

同源策略是由 NetScape 提出的一个著名的安全策略。所谓的同源，指的是协议，
域名，端口相同。浏览器处于安全方面的考虑，只允许本域名下的接口交互，不
同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。

24.请输出三种减少页面加载时间的方式

优化图片
图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
优化 CSS（压缩合并 css，如 margin-top, margin-left…)
网址后加斜杠（如 www.campr.com/目录，会判断这个目录是什么文件类型，
或者是目录。） cdn 托管
标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图
片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了）
减少 http 请求（合并文件，合并图片）

25.This 指向
在 JavaScript 中，this 通常指向的是我们正在执行的函数本身，或者是，指向
该函数所属的对象。
全局的 this → 指向的是 Window
对象中的 this → 指向其本身
事件中 this → 指向事件对象

26.什么是 jsonp 工作原理是什么？
Jsonp 其实就是一个跨域解决方案。
Js 跨域请求数据是不可以的，但是 js 跨域请求 js 脚本是可以的。
所以可以把要请求的数据封装成一个 js 语句，做一个方法的调用。
跨域请求 js 脚本可以得到此脚本。得到 js 脚本之后会立即执行。
可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。

jsonp 原理：(动态创建 script 标签，回调函数)
浏览器在 js 请求中，是允许通过 script 标签的 src 跨域请求，可以在请求的结
果中添加回调方法名，在请求页面中定义方法，就可获取到跨域请求的数据。

27.jsonp 为什么不是真正的 ajax?

ajax 和 jsonp 这两种技术在调用方式上"看起来"很像，目的也一样，都是请求一个 url，然后把服务器返回的数据进行处理，因此 jquery 和 ext 等框架都把 jsonp 作为 ajax 的一种形式进行了封装；
但 ajax 和 jsonp 其实本质上是不同的东西。ajax 的核心是通过
XmlHttpRequest 获取本页内容，而 jsonp 的核心则是动态添加<script>标签来调用服务器提供的 js 脚本。
所以说，其实 ajax 与 jsonp 的区别不在于是否跨域，ajax 通过服务端代理
一样可以实现跨域，jsonp 本身也不排斥同域的数据的获取。
还有就是，jsonp 是一种方式或者说非强制协议，如同 ajax 一样，它也不一定非要 json 格式来传递数据，如果你愿意，字符换也行，只不过这样不利于 jsonp提供公开服务。

28.请掌握 2 种以上数组去重的方式
1.双层循环（暴力方法）
在这里插入图片描述

2.indexOf 和 includes
在这里插入图片描述

3.排序去重

4.filter
在这里插入图片描述

5.键值对（key-value）

6.ES6
在这里插入图片描述

29.深浅拷贝是什么如何实现？

深拷贝：指针赋值，并且内容拷贝。
浅拷贝：只是简单的指针赋值
数组浅拷贝: 如果是数组，可以使用数组的一些方法实现：slice()，concat()
返回一个新数组的特性实现拷贝。用扩展运算符 spread 实现
数组深拷贝: JSON.parse(JSON.stringify())不仅适用于数组还适用于对象。不能拷贝函数，undefined，symbol。

30.为什么 js 是弱类型语言
弱类型语言实现相对于强类型语言来说的，在强类型语言中，变量类型有多种，
比如 int char float Boolean 不同类型相互转换有时需要强制转换，而jacascript 只有一种类型 var，为变量赋值时会自动判断类型并转换，所以是弱类型语言。

31.怎么转换 less 为 css
用 node 将 less 文件生成为 css 文件

32.用 webstorm 自动生成

33.echarts 使用最多的是什么
图表及图表组合

34.For 循环与 map 循环有什么区别

For 遍历对象自身的和继承可枚举的属性，也就是说会包括哪些原型链上的属性
Map 方法不会对空数组进行检测，map 会返回一个新数组，不会对原数组产生影响

35.请写出一个简单的类与继承

创建类有三种：

使用 function 和 this 关键字

原型方法用 prototype 和 this 关键字

使用 object.create()方法构造

继承有六种：

原型继承

借用构造函数继承

组合继承

原型式继承

寄生式继承

寄生组合式继承

36.同步与异步的区别/阻塞与非阻塞区别

同步（阻塞的）
异步（非阻塞）
同步（阻塞）异步（非阻塞）这两个关注的是程序在等待调用结果时的状态

37.重绘和回流是什么

回流：当 render tree 中的一部分或者全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就叫回流，每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候一定会发生回流，因为要构建 render tree,在回流的时候，浏览器会使渲染树中收到影响的部分失效，并重新构造这部分渲染树。
重绘：完成回流后，浏览器会重新绘制受影响的部分到屏幕中，这就是重绘
当 render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观，不会影响布局，就叫重绘。

38.http 是什么？有什么特点
http 叫做超文本传输协议，是互联网应用最广泛的一种网络协议
特点：基于请求-响应的模式无状态保存无连接

39.HTTP 协议和 HTTPS 区别

http 是超文本传输协议，信息是明文传输，https 是具有安全性的 ssl 解密传输
协议
http 和 https 连接方式完全不同，端口也不同，http 是 80，https 是 443
http 的连接很简单，是无状态的，https 协议是由 ssl+http 协议构建的可进行
加密传输，身份认证的网络协议，比 http 协议安全

40.原型和继承，prototype，call 和 apply 继承的区别（第一个参数是相同的，
第二个的区别在哪）

apply()接收两个参数，一个是函数运行的作用域(this)，另一个是参数数组。
call()方法第一个参数与 apply()方法相同，但传递给函数的参数必须列举出
来。

41.箭头函数与普通函数的区别

箭头函数是匿名函数，不能作为构造函数，不能使用 new
箭头函数不能绑定 arguments，要用 rest 参数解决
箭头函数没有原型属性
箭头函数的 this 指向：永远指向其上下文的 this，
箭头函数不能绑定 this，会捕获其所在的上下文的 this 值，作为自己的 this值

42.什么是 js 内存泄露？
内存泄漏是指一块被分配的内存既不能使用又不能回收，直到浏览器进程结束
释放内存的方法：赋值为 null
你如何对网站的文件和资源进行优化？
1、文件合并（目的是减少 http 请求）
2、文件压缩（目的是直接减少文件下载的体积）
3、使用 cdn 托管资源
4、使用缓存
5、gizp 压缩你的 js 和 css 文件
6、meta 标签优化（title,description,keywords）、heading 标签的优化、alt优化
7、反向链接，网站外链接优化

43.请简述 ajax 的执行过程以及常见的 HTTP 状态码
在这里插入图片描述

各类别常见状态码：

200 OK：表示从客户端发送给服务器的请求被正常处理并返回；

204 No Content：表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；

206 Patial Content：表示客户端进行了范围请求，并且服务器成功执行了这部
分的 GET 请求，响应报文中包含由 Content-Range 指定范围的实体内容。

301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的 URL，
之后应使用更改的 URL；

302 Found：临时性重定向，表示请求的资源被分配了新的 URL，希望本次访问使用新的 URL；

301 与 302 的区别：前者是永久移动，后者是临时移动（之后可能还会更改 URL）

303 See Other：表示请求的资源被分配了新的 URL，应使用 GET 方法定向获取
请求的资源；

302 与 303 的区别：后者明确表示客户端应当采用 GET 方式获取资源

304 Not Modified：表示客户端发送附带条件（是指采用 GET 方法的请求报文中
包含 if-Match、If-Modified-Since、If-None-Match、If-Range、
If-Unmodified-Since 中任一首部）的请求时，服务器端允许访问资源，但是请
求为满足条件的情况下返回改状态码；

307 Temporary Redirect：临时重定向，与 303 有着相同的含义，307 会遵照浏
览器标准不会从 POST 变成 GET；（不同浏览器可能会出现不同的情况）；

400 Bad Request：表示请求报文中存在语法错误；

401 Unauthorized：未经许可，需要通过 HTTP 认证；

403 Forbidden：服务器拒绝该次访问（访问权限出现问题）

404 Not Found：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；

500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是
web 应用存在的 bug 或某些临时的错误时；

503 Server Unavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求

44.null 和 undefined 的区别？

null： object 类型，代表“空值”，代表一个空对象指针
undefined： undefined 类型
null 表示"没有对象"，即该处不应该有值。典型用法是：
（1）作为函数的参数，表示该函数的参数不是对象。
（2）作为对象原型链的终点。
undefined 表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法
是：
（1）变量被声明了，但没有赋值时，就等于 undefined。
（2 ) 调用函数时，应该提供的参数没有提供，该参数等于 undefined。
（3）对象没有赋值的属性，该属性的值为 undefined。
（4）函数没有返回值时或者 return 后面什么也没有，返回 undefined。

45.闭包的使用场景？
由于在 Javascript 语言中，只有函数内部的子函数才能读取局部变量，闭包
就是能够读取其他函数内部变量的函数。所以，在本质上，闭包就是将函数内部
和函数外部连接起来的一座桥梁。

闭包的使用场景

setTimeout
原生的 setTimeout 传递的第一个函数不能带参数，通过闭包可以实现传参效果。

回调
定义行为，然后把它关联到某个用户事件上（点击或者按键）。代码通常会作为一个回调（事件触发时调用的函数）绑定到事件。

函数防抖
在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。
实现的关键就在于 setTimeOut 这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现。

封装私有变量
如下面代码：用 js 创建一个计数器

46.预加载和懒加载的区别，预加载在什么时间加载合适
预加载是指在页面加载完成之前，提前将所需资源下载，之后使用的时候从缓存中调用；懒加载是延迟加载，按照一定的条件或者需求等到满足条件的时候再加载对应的资源

两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端
有一定的缓解压力作用，预加载则会增加服务器前端压力。

47.网页中有大量图片加载很慢你有什么办法进行优化？

图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览
器顶端和页面的距离，如果前者小鱼后者，优先加载
使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
使用 csssprite 或者 svgsprite

48.foreach 和 map 的区别？
答：

相同点：
1.都是循环遍历数组中的每一项
2.forEach 和 map 方法里每次执行匿名函数都支持 3 个参数，参数分别是 item（当前每一项）、index（索引值）、arr（原数组）
3.匿名函数中的 this 都是指向 window
4.只能遍历数组
不同点：
1.forEach()没有返回值。
2.map() 有返回值，可以 return 出来。

49.判断数据类型的方法?

typeof 可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包括
number,boolean,string,function,object,undefined）；
instanceof 原理因为 A instanceof B 可以判断 A 是不是 B 的实例，返回一个布尔值，由构造类型判断出数据类型
通过 Object 下的 toString.call()方法来判断
根据对象的 contructor 判断
jq 中判断数据类型的方法

50.Post 和 get 的区别

使用 get 请求时，参数在 url 中显示，而使用 post 方式，则不会显示出来（get 请求会将
参数跟在 url 够进行传递，而 post 请求则是作为 HTTP 消息的实体内容发送给 web 服务器。
当然在 ajax 请求中，这种区别对用户是不可见的。）
使用 get 请求发送数据量小，只能传递大约 1024 字节。post 请求发送数据量大，可以达到 2M（理论上无限制）
get 请求需注意缓存问题，post 请求不需担心这个问题（get 方式请求的数据会被浏览器
缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。
某种情况下，get 方式会带来严重的安全问题。而 post 方式相对来说就可以避免这些问题）

51.什么是进程，什么是线程

进程是一个程序的运行到结束就是一个进程
运行的过程中有多个持续的或者断断续续的片段组成，这就是线程，一个进程包含多个线程。
Js 是单线程。

52.什么是优雅降级，什么是渐进增强

降级，先满足高版本浏览器，在满足低版本的进行兼容增强，针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

53.什么是宿主对象，什么内置对象，什么是本地对象？

宿主对象：跟 window 有关的，document，官方未定义的都是宿主对象
内置对象：不可以被实例化的对象 math.random 等
本地对象：可以实例化的对象 new Date，new Object，new Array, new RegExp 等

54.什么是防抖，什么是节流

防抖：在一定的时间内再次触发此事件,会清空上次的事件重新开始
节流：在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次出发（手机验证码短信）
防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于 wait，防抖的情况下只会调用一次，而节流的情况会每隔一定时间（参数 wait）调用函数。

55.什么 TCB，UDP

TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议，由 IETF 的 RFC 793 定义。
UDP （User Datagram Protocol 用户数据报协议）是 OSI（Open System Interconnection开放式系统互联）参考模型中一种无连接的传输层协议，提供面向事务的简单不可靠信息传送服务。

56.什么是长连接，什么是短连接，什么是轮询？

长连接：是在连接发起后，在请求关闭连接前，客户端与服务端都保持连接，实质是保持这个通信管道，之后便可以对其进行复用。
短连接：及连接只保持在数据传输过程，请求发起，连接建立，数据返回，连接关闭。
它适用于一些实时数据请求，配合轮询来进行新旧数据的更替。
短轮询：指的是在循环周期内，不断发起请求，每一次请求都立即返回结果，根据新旧数据对比决定是否使用这个结果。
长轮询：及是在请求的过程中，若是服务器端数据并没有更新，那么则将这个连接挂起，直到服务器推送新的数据，再返回，然后再进入循环周期。

57.什么是浏览器的预检请求？
当你请求浏览器的时候，服务器会试探请求一下，如果跨域会报 204 错误在 CORS 机制中，客户端将请求分为了两种：简单请求和非简单请求；当请求为非简单请求时，就会触发浏览器发送预检请求，这是浏览器的行为。
预检请求会向服务器确认跨域是否允许，服务返回的响应头里有对应字段
Access-Control-Allow-Origin 来给浏览器判断：如果允许，浏览器紧接着发送实际请求；不允许，报错并禁止客户端脚本读取响应相关的任何东西。
所以，一个 POST 请求并且请求头添加了 Content-Type: application/json ，浏览器判定为非
简单请求，自己先发一个 OPTIONS 给服务器获取做跨域判定，获取响应后浏览器发现可以
跨域，接着就发送真实的 POST。
这里就解答两个问题了，接下来就是为什么预检请求选择了 OPTIONS 呢？
来看预检请求的流程，如果是一个跨域请求，浏览器会自动给该请求带上 Origin 头部，标
明当前请求的来源域；服务器判断这个请求是否允许跨域，就会在返回时，选择是否带上
Access-Control-Allow-Origin 头部，最后，浏览器判断 Access-Control-Allow-Origin 就知道，
后续请求是否发送。
这个流程中，对预检请求方法的要求：
（1）不需要带请求体，服务器判断的依据在 Request header 中；
（2）服务器返回不需要响应体，浏览器判断的依据在 Response header 中；
（3）请求不会去修改服务器资源，要是一个安全的请求；
（4）浏览器默认不会缓存，需要每次发送跨域验证；

58.new 的时候干了什么？
（1）创建一个新对象；
（2）将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；
（3）执行构造函数中的代码（为这个新对象添加属性）；

59.当你打开浏览器是从输入网址到打开网址发生了什么事件？
解析你的 dns，返回响应的数据，服务器解析数据，客服端显示数据。
（1）浏览器（客户端）进行地址解析。
（2）将解析出的域名进行 dns 解析。
（3）通过 ip 寻址和 arp，找到目标（服务器）地址。
（4）进行 tcp 三次握手，建立 tcp 连接。
（5）浏览器发送数据，等待服务器响应。
（6）服务器处理请求，并对请求做出响应。
（7）浏览器收到服务器响应，得到 html 代码。
（8）渲染页面。

60.tcp 三次握手怎么理解？
1.客户端向服务器发送建立连接请求,并进入等待确认状态,等待服务器确认；
2.服务端收到消息返回后端，
3.客服端收到消息向服务端发送确认包

61.什么是可变对象，什么是不可变对象？

可变对象：引用数据类型（对象数组），只执行浅拷贝
不可变对象：基本数据类型（字符串 number 布尔值）

62.什么是数组变异方法，什么是非变异方法？

变异数组方法，例如 push、pop 等，会改变原数组，从而更新视图；
非变异数组方法，例如 filter，map 等，不会改变原数组，会返回一个新的数组

63.什么是深度监听？什么是浅度监听？

深度监听：监听对象数组所有层级的改变（类似于购物车）
浅度监听：监听对象数组第一层的变化

64.什么是事件循环？
JS 的代码执行是基于一种事件循环的机制，之所以称作事件循环，MDN 给出的解释为
因为它经常被用于类似如下的方式来实现

while (queue.waitForMessage()) {
    
    
  queue.processNextMessage();
}

如果当前没有任何消息queue.waitForMessage 会等待同步消息到达
我们可以把它当成一种程序结构的模型，处理的方案。

65.什么是变量提升？
使用 var\function，浏览器读取代码的机制，预解析和预执行，把变量提升到最前面

66.遍历数组 for…in 和 for…of 的区别

for…in 遍历数组依次返回数组的下标(字符串类型)
for…of 遍历数组依次返回数组的元素(值) for…of 空值会显示 undefined

67.项目开发过程中什么是开发环境、测试环境、生产环境、UAT 环境、仿真环
境？

开发环境：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意，
为了开发调试方便，一般打开全部错误报告。通俗的讲，项目尚且在编码阶段，
我们的代码一般在开发环境中，不会在生产环境中，生产环境组成：操作系统，
web 服务器，语言环境。
测试环境：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正
常，那么肯定不能把它发布到生产机上。通常指项目测试，修改 bug 阶段。
生产环境：是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。
可以理解为包含所有的功能的环境，任何项目所使用的环境都以这个为基础，然
后根据客户的个性化需求来做调整或者修改。通俗的讲，项目数据前端后台已经
跑通，部署在服务器上之后，有客户使用，访问，就是网站正式运行了。
三个环境也可以说是系统开发的三个阶段：开发->测试->上线，其中生产环境也
就是通常说的真实环境。
执行步骤：开发完成，测试环境测试，保证程序没有问题后，再上传到生产环境
中。
UAT 环境：UAT，(User Acceptance Test)，用户接受度测试即验收测试，
所以 UAT 环境主要是用来作为客户体验的环境。
仿真环境：顾名思义，是和真正使用的环境一样的环境（即已经出售给客户
的系统所在环境，也成为商用环境），所有的配置，页面展示等都应该和商家正
在使用的一样，差别只在环境的性能方面。

68.Get 和 post 不同

Get 是从服务器上获取数据，post 是向服务器传送数据
在客户端，get 通过 url 提交数据，数据在 url 中可以看到，post 方式，数据放在 html header 中提交
安全性问题
Get 提交数据最多只能有 1024 字节，post 没有限制

69.什么是 csrf 攻击
Csrf（跨站点请求伪造）攻击者在用户已经登录目标网站之后，诱使用户访问一个攻击页面，利用目标网站对用户的信任，以用户身份再攻击页面对目标网站
发起伪造用户操作的请求，达到攻击目的。

70.什么时候用深拷贝 /浅拷贝
无论深浅，都是需要的，当深拷贝发生时通常表明存在着一个聚合关系，当浅拷
贝发生时，通常表明存在着相识关系
举个简单例子：当实现一个组合模式 Composite Pattern 时通常都会实现深拷
贝，当实现一个观察者模式 Observer Pattern，时，就需要实现浅拷贝

71.什么是微任务，什么是宏任务？

宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。
script、setTimeOut、setIntervalsetImmediate
微任务：当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之
前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick
等等）。promise.then,process.nextTick、Object.observe、MutationObserver
宏任务中的事件放在 callback queue 中，由事件触发线程维护；微任务的事件
放在微任务队列中，由 js 引擎线程维护。
异步任务分为宏任务和微任务，先执行微任务再执行宏任务

==72.promise 和 settimeout（延时器）谁先执行？ ==

Promise 先执行
Promise 的回调函数属于异步任务，会在同步任务之后执行。
但是，Promise 的回调函数不是正常的异步任务，而是微任务（microtask）。
它们的区别在于，正常任务追加到下一轮事件循环，微任务追加到本轮事件循环。
这意味着，微任务的执行时间一定早于正常任务。

73.前端 token 的使用？
1.客户端使用用户名跟密码请求登录
2.服务端收到请求，去验证用户名与密码
验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
3.客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage
里
客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
4.服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客
户端返回请求的数据
5.前端使用 token
(1).在验证登录成功之后，将服务端返回来的 token 值存储到 sessionStorage 中
(2)当客户端向服务端发起请求时，在请求头中加入服务端返回来的 token 值，本文设置
一个 axios 的拦截器，在该拦截器中设置 token，这样就可以不用在每次发起请求的时候，
在请求头中加 token 值

74.Http 缓存主要分为两种：强缓存和协商缓存。

强缓存：所请求的数据在缓存数据库中尚未过期时，不与服务器进行交互，直接使用缓
存数据库中的数据。
协商缓存：从缓存数据库中取出缓存的标识，然后向浏览器发送请求验证请求的数据是
否已经更新，如果已更新则返回新的数据，若未更新则使用缓存数据库中的缓存数据

75.字符串的方法
1.indexOf()：返回字符串中检索指定字符第一次出现的位置，没找到就返
回-1
2.lastIndexOf()：返回字符串中检索指定字符最后一次出现的位置，没找
到就返回-1。
3.search() 判断某个或某段字符在字符串中第一次出现的位置
4.match（）匹配
5.replace( )替换
6.concat( )接收一个或多个字符拼接形成新的字符串
7.slice( start Index，endIndex )字符串裁切[ start Index，endIndex )
8.toUpperCase()字母转大写
9.toLowerCase( )字母转小写
10.trim()去除首尾空格

76.Git，GitHub 与 GitLab 的区别

Git 是一种版本控制系统，是一种工具，用于代码的存储和版本控制。
GitHub 是一个基于 Git 实现的在线代码仓库，是目前全球最大的代码托管平台，可以帮助程序员之间互相交流和学习。
GitLab 是一个基于 Git 实现的在线代码仓库软件，你可以用 GitLab 自己搭建一个类似于 GitHub 一样的仓库，但是 GitLab 有完善的管理界面和权限控制，一般用于在企业、学校等内部网络搭建 Git 私服。
GitHub 和 GiLlab 两个都是基于 Web 的 Git 远程仓库，它们都提供了分享开源项目的平台，为开发团队提供了存储、分享、发布和合作开发项目的中心化云存储的场所。从代码的私有性上来看，GitLab 是一个更好的选择。但是对于开源项目而言，GitHub 依然是代码托管的首选。

77.JS 中作用域

作用域：变量可以生效的范围
全局作用域：一个 html 页面就是一个全局作用域，打开页面的时候, 作用域就生成了, 直到关闭页面为止=> 自当前 script 标签开始的任何位置
局部作用域：每一个函数就是一个私有作用域。
ECMAScript 6(简称 ES6)中新增了块级作用域。
块级作用域：块作用域由 { } 包括，if 语句和 for 语句里面的{ }也属于块作用域。
作用域链：多个作用域形成的链式结构

总结

从学长群里获取的资源，再二次整理编写的。具体源自于哪里就不知道了，侵删。
会开设一个专栏，专门收集整理的前端面试题。
请添加图片描述

又是一年毕业季，这百道前端面试题你都会了嘛（基础题+2套简历模板）

文章目录

前言

一、HTML、CSS 相关

二、Javascript 相关

总结

猜你喜欢