前端部分知识点总结

大家好，我是讯享网，很高兴认识大家。

一、HTML、CSS阶段

1.盒子模型的组成部分

盒模型分为W3C的标准模型和IE模型。

盒模型又称为框模型，包含了元素内容(content)、内边距(padding)、外边距(margin)、边框(border)。

W3C的标准模型：width/height属性指content。

IE模型：width/height属性由content+padding+border组成。

这两种模型的区别就是计算的宽度和高度不同。

通过CCS3新增的属性box-sizing分别设置盒模型为标准模型(content-box)和IE模型(border-box)。

2.定位相关

静态定位（static）：

一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

相对定位（relative）：

让元素相对自己原来的位置，进行偏移调整。

相对定位不脱标，真实的位置还在原来的位置，只不过是影子飘出去了。主要作用是给绝对定位当父级元素用。

相对定位需要搭配top、bottom、left、right这四个属性一起使用。

绝对定位：（absolute）：

让元素相对已经定位的父级元素进行偏移调整（子绝父相）。若父级元素未定位，则相对于HTML根文档定位

绝对定位的盒子脱离了标准流。

绝对定位之后，标签就不区行内元素、块级元素，不需要display：block就可以设置宽高了。

绝对定位需要搭配top、bottom、left、right这四个属性一起使用。

固定定位：（fixed）：

让元素相对于浏览器窗口进行定位，无论页面如何滚动，这个盒子显示的位置不变。

固定定位会脱离文档流。

z-index属性：

表示谁压着谁。数值大的压盖住数值小的。

z-index值没有单位，就是一个正整数。默认的z-index值是0

如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人

3.浮动相关

作用：

早期的作用是图文环绕，现在的作用是网页布局。

特点：

浮动的元素会脱离标准流。

浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。

浮动元素会受到上面元素边界的影响。

浮动元素有特殊的显示效果（一行可以显示多个、可以设置宽高）。

浮动带来的影响：

如果子元素浮动了，此时子元素不能撑开标准流的块级父元素。

清除浮动的方法：

直接设置父元素的高度，给里面的子元素留出足够的空间浮动排列即可。

单伪元素清除法，利用CSS给父元素内部最后位置添加一个块级元素, 这样不会破坏页面结构。

双伪元素清除法，利用CSS给父元素内部的开头和结尾位置分别加一个块级元素, 这样也不会破坏页面结构。

给父元素设置overflow：hidden，本质是构建一个BFC。

4.精灵图

把网站上用到的一些图片整合到一张单独的图片中，减少网站发送的请求次数

优点：

减少请求次数，让网页加载更快，提高用户体验

缺点：

开发的时候需要测量，比较繁琐，维护的时候比较麻烦，现在一般用字体图标代替精灵图

5.标签的显示模式

块级元素：

常见的块级元素h1-h6、p 、div 、ul 、li 、ol

特点：独占一行、可以设置宽高度、宽度默认是父级的宽度

注意：p标签不能放块级元素

行内元素：

常见的行内元素：a 、span 、strong 、em 、i 、s

特点：一行显示多个、直接设置宽高无效、默认宽度就是它本身的内容宽度

注意：a链接里面不能再放a链接

行内块元素：

常见的行内块元素img、input、td

特点：一行可以显示多个、可以设置宽高、默认宽度就是它本身内容的宽度

显示模式转化：

display:block; 转换为块级元素

display:inline; 转换为行内元素

display:inline-block; 转换为行内块元素

6.margin塌陷现象

什么是margin塌陷现象：

在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个margin紧挨着，中间没有border或者padding

外边距塌陷共有两种情况：

第一种情况：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给 margin-top，那么他们两个的间距会重叠，以大的那个计算。

第二种情况：两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。

解决方法

1.给父元素增加边框，为了不影响原先的图像效果，可以将边框颜色设置为透明

2.溢出隐藏，给父盒子设定overflow：hidden

3.为父元素设定padding值

4.给父元素添加position:fixed;

5.给父元素设置display：table;

6.利用伪元素给子元素的前面添加一个空元素

.clearfix::before{ content: ”; display: table; }

7.如何使一个盒子水平垂直居中？

方法一：

设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中

.parent {     width:300px;     height:300px;     background:#ddd;     position:relative; } .child {     widht: 100px;     height: 100px;     position: absolute;     margin: auto;     top: 0;     left: 0;     right: 0;     bottom: 0; }

讯享网

方法二：定位+位移

使用子绝父相的定位方式,无须知道盒子自身的高度，使用范围较广

讯享网.parent{     width:300px;     height:300px;     background:#ddd;     position: relative; } .child{     width:100px;     height:100px;     background:#8df;     position: absolute;     left: 50%;  /* 父盒子宽度的50% */     top: 50%;   /* 父盒子高度的50% */     transform: translate(-50%,-50%);    /* 子盒子自身宽高的50% */    }

方法三：table-cell+inline-block

将父盒子设置为table-cell(能够使元素呈单元格的样式显示)，并设置text-align: center(使内容水平居中)；vertical-align: middle(使内容垂直居中);。子盒子设置为inline-block可以使其内容变为文本格式，也可设置宽高；

.parent{     width:300px;     height:300px;     background:#ddd;     display: table-cell;    /*使标签元素以表格单元格的形式呈现*/     text-align: center;   /* 水平居中*/     vertical-align: middle; /* 垂直居中 */ } .child{     width:100px;     height:100px;     background:#8df;     display: inline-block;  /* 将子盒子设置为行内块级（文本格式）*/ }

方法四：弹性盒子

使用弹性盒子的时候需要给父级设置display:flex;在父元素上设置水平与垂直方向上的排列方式即可；该方法不需要设置子元素。

讯享网.parent{     width:300px;     height:300px;     background:#ddd;     display: flex;     justify-content: center;    /* 水平方向 居中*/      align-items: center;        /* 垂直方向 居中*/ } .child{     width:100px;     height:100px;     background:#8df; }

8.如何垂直居中一个img？

/<img>的容器设置如下/ {     display:table-cell;     text-align:center;     vertical-align:middle; }

9.如何实现双飞翼（圣杯）布局？

利用定位实现两侧固定中间自适应：

给父盒子设置左右padding值

给左右盒子的width设置父盒子的padding值，然后分别定位到padding处

中间盒子自适应

讯享网.father {     height: 400px;     background-color: #8df;     position: relative;     padding: 0 200px; } .left,.right {     width: 200px;     height: 300px;     background-color: pink;     position: absolute;     top: 0; } .left {     left: 0; }  .right {     right: 0; } .center {     background-color: blue;     height: 350px; } <div class="father">     <div class="left"></div>     <div class="center"></div>     <div class="right"></div> </div>

利用flex布局实现两侧固定中间适应:

父盒子设置display：flex

左右盒子设置固定宽高

中间盒子设置flex：1

.father {     height: 400px;     background-color: #8df;     display: flex; } .left {     width: 200px;     height: 300px;     background-color: yellow; }  .right {     width: 200px;     height: 300px;     background-color: pink; } .center {     flex: 1;     background-color: blue; } <div class="father">     <div class="left"></div>     <div class="center"></div>     <div class="right"></div> </div>

利用bfc块级格式化上下文，实现两侧固定中间自适应：

左右固定宽高，进行浮动

中间overflow：hidden

讯享网.father {     height: 500px;     background-color: #8df; } .left {     float: left;     width: 200px;     height: 300px;     background-color: yellow; }  .right {     float: right;     width: 200px;     height: 300px;     background-color: pink; } .center {     height: 450px;     overflow: hidden;     background-color: blue; } /* 注意：left和right必须放在center前面 */ <div class="father">     <div class="left"></div>     <div class="right"></div>     <div class="center"></div> </div>

10.css中选择器的优先级以及css权重如何计算

!important > 行内样式 > id选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

第一等：内联样式，如：，权值为1000.（该方法会造成css难以管理，所以不推荐使用）

第二等：ID选择器，如：#header，权值为0100.

第三等：类、伪类、属性选择器如：.bar，权值为0010.

第四等：标签、伪元素选择器，如：div ::first-line 权值为0001.

最后把这些值加起来，再就是当前元素的权重了。

其他：

无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。

通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.

继承的样式没有权值。

11.H5新增的语义化标签和特性

1.拖拽释放（拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在H5中，拖放是标准的一部分，任何元素都能够拖放）

2.自定义属性

3.语义化更好的内容标签（header、nav、footer、aside、article、section）

4.音频、视频（谷歌浏览器不支持音频自动播放、但支持视频静音自动播放）

5.画布（canvas）

6.地理（Geolocation）

7.本地储存（localStorage、sessionStorage）

8.表单控件（calendar、date、time、email、url、search、tel、file、number）

9.新的技术（webworker、websocket、Geolocation）

12.C3新增的特性

1.颜色：新增RGBA,HSLA模式

2.文字阴影（text-shadow）

3.边框：圆角（border-radius）边框阴影（box-shadow）

4.盒子模型（box-sizing）

5.背景（background-size、background-origin、background-cilp）

6.渐变（linear-gradient、radial-gradient）

7.过渡（transition）

8.自定义动画（animate@keyfrom）

9.媒体查询多栏布局（@media screen and (width:800px){...})

10.图片边框（border-image）

11.2D转换、3D转化（transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

12.字体图标

13.flex弹性布局

13.css中link和@import的区别

1.从属关系区别：

@import是 CSS 提供的语法规则，只有导入样式表的作用；

link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别 ：

加载页面时，link标签引入的 CSS 被同时加载；

@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别 ：

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；

link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别 ：

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议)：

link引入的样式权重大于@import引入的样式。

二、移动web阶段

1.什么是移动端的视口？

视口简单理解就是可视区域大小我们称之为视口。

(1).布局视口：

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题

(2).视觉视口：

视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口

(3).理想视口：

布局视口的默认宽度并不是一个理想宽度，于是Apple和其他浏览器厂商引入了理想视口概念，它对设备而言是最理想的布局视口尺寸。显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。

2.为什么需要使用二倍图和三倍图？

由于手机屏幕是高清的，为了让不同手机屏幕尺寸下图片显示的更清晰, 不失真，所以图片也要给的更清晰更大一些。

作用：

利用了Retina（视网膜屏幕）显示技术，可以把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

物理像素：

指的是设备屏幕上的像素点的个数

逻辑像素：

可以理解为反映在CSS/JS代码里的像素点数

3.移动端的适配方案？

viewport 适配

rem 适配：

rem布局又分为：flexible.js+rem单位、媒体查询+rem单位

1rem永远等于10%的视口宽度

媒体查询：根据设备不同的特性应用不同的css样式

vw 适配：

实现不同屏幕的自适应, 有兼容性的问题，1vw=1%视口宽度

弹性布局flex适配：

用来为盒状模型提供最大的灵活性。

4.flex布局的优缺点是什么？

2009年，W3C提出了一种新的布局方案，叫flex布局（或叫伸缩布局、弹性布局）

作用：

为盒状模型提供最大的灵活性。

优点：

使用方便，根据flex规则很容易达到某个布局效果

缺点：

浏览器的兼容性比较差，只能兼容IE9以上的

设置flex布局的元素必须是父子级关系, 父元素叫做容器, 子元素叫做项目。

容器属性:

flex-direction：设置主轴方向。主轴默认是水平方向, 侧轴默认是垂直方向

属性值	作用
row	（默认值）行，水平
column	列，垂直
row-reverse	列，从右向左
column-reverse	行，从下向上

justify-content：设置主轴对齐方式

属性值	作用
flex-start	（默认值）项目从起点到终点进行排列
flex-end	项目从终点到起点进行排列
center	所以项目都居中
space-around	空白在项目两侧（空白间距不等）
space-between	空白在相邻项目之间
space-evenly	空白在项目两侧（空白间距不等）

align-items ：设置侧轴对齐方式（单行）

属性	作用
stretch	（默认值）当项目不设置height时，项目在侧轴方向上被拉伸至铺满容器
flex-start	在侧轴方向上项目靠近起点
flex-end	在侧轴方向上项目靠近终点
center	在侧轴方向上项目居中

flex-wrap：换行

属性值	作用
nowrap	（默认值）不换行
wrap	换行
wrap-reverse	换行，并且和侧轴方向相反

换行的条件有两个（缺一不可）：1. flex-wrap: wrap; 2. 项目的宽度之和要大于容器的宽度

align-content: 当内容在一行内放不下时, 项目换行显示后, 多条轴情况下, 项目的排列方式

属性值	作用
stretch	（默认值）元素被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

项目属性：

order: 设置项目的排列顺序, 值越小, 位置越靠前

flex-grow: 设置项目的放大比例

flex-shrink: 设置项目的缩小比例

flex-basis: 在分配多余空间之前, 项目占据的主轴空间

flex：设置项目所占主轴方向的大小

属性值	作用
默认值（没有名字）	项目不会放大，但会缩小
auto	项目既可以放大，也可以缩小
none	项目不可以缩放
纯数字	项目等比例缩放

flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto align-self: 设置单个项目独有的对齐方式, 可覆盖align-items属性, 值auto继承父元素的align-items属性

5.less的使用场景

是一门css预处理语言

作用：

less有一套自己的语法和一个解析器, 可以将less代码解析为对应的CSS代码, 主要就是写起来更方便

使用场景：

场景一: 当样式文件中要使用同一个常量值很多次时, 可以把它定义为一个变量, 在需要的地方引用即可, 方便后续管理

场景二: 当样式有很多需要放到多个样式文件中时, 可以使用@import在一个less文件中引入其他的less文件或css文件

场景三: 当有多个样式类想合并使用其他样式类时, 可以在一个样式类中直接引用其他的样式类

6.css单位中px，em和rem的区别

px像素。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位

em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸被人为设置，则相对于浏览器的默认字体尺寸。他会继承父级元素的字体大小，因此并不是一个固定的值

rem是css3新增的一个相对单位，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

区别：

IE无法调整那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它可以做到只修改根元素就成比例地调整所以字体大小，又可以避免字体大小逐层复合的连锁反应，目前除了IE8以及更早版本外，其他浏览器均已支持rem

7.rem适配方法如何计算HTML跟字号及适配方案

1.设置跟font-size：625%（或其他自定的值，但换算规则1rem不能小于12px）

2.通过媒体查询分别设置每个屏幕的跟font-size

3.css直接除以2再除以100即可换算为rem

优点：有一定适用性，换算也比较简单

缺点：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同手机，单某款手机尺寸不在设置范围之内，会导致无法适配

三、JavaScript阶段

1.基础初段

(1).数据类型

基本数据类型：

number、string、Boolean、null、undefined、bigint、symbol

引用数据类型：

Array、object、function

null和undefined的区别：

undefined：表示变量声明但未初始化时的值

null：表示准备用来保存对象，还没有真正保存对象的值。从逻辑角度看，null值表示一个空对象指针

null == undefined 结果是true

null === undefined 结果是false

(2).操作符相关

①.前置++ 和后置++的区别

它们两个都是一元运算符, 都是让变量自增1

前置++：先自加1，然后再运算

后置++：先运算，然后再自加1

②.==和=== 之间的区别

==判断两个变量的值是否一致，不判断类型否一致，有隐式转化，字符串1==数字1返回true

=== 判断两个变量的值是否一致而且还判断类型否一致，没有隐式转化，字符串1===数字1返回false

③.判断数据类型的方式

typeof：对于null返回的是object，function返回的function

instanceof：检测的是原型。只能用来判断两个对象是否属于实例关系

constructor：

toString：toString() 是 Object 的原型方法。可以判断某个对象属于哪种内置类型

④.怎么判断两个对象相等

想要比较两个对象内容是否一致，思路是要遍历对象的所有键名和键值是否都一致：

1、判断两个对象是否指向同一内存

2、使用Object.getOwnPropertyNames获取对象所有键名数组

3、判断两个对象的键名数组是否相等

4、遍历键名，判断键值是否都相等

let obj1 = {     a: 1,     b: {         c: 2     } } let obj2 = {     b: {         c: 3     },     a: 1 } function isObjectValueEqual(a, b) {     // 判断两个对象是否指向同一内存，指向同一内存返回true     if (a === b) return true     // 获取两个对象键值数组     let aProps = Object.getOwnPropertyNames(a)     let bProps = Object.getOwnPropertyNames(b)     // 判断两个对象键值数组长度是否一致，不一致返回false     if (aProps.length !== bProps.length) return false     // 遍历对象的键值     for (let prop in a) {         // 判断a的键值，在b中是否存在，不存在，返回false         if (b.hasOwnProperty(prop)) {             // 判断a的键值是否为对象，是则递归，不是对象直接判断键值是否相等，不相等返回false             if (typeof a[prop] === 'object') {                 if (!isObjectValueEqual(a[prop], b[prop])) return false             } else if (a[prop] !== b[prop]) {                 return false             }         } else {             return false         }     }     return true } console.log(isObjectValueEqual(obj1, obj2)) // false

⑤.如何区分数组和对象

方法一：通过调用constructor来识别

讯享网{}.constructor    //返回object [].constructor    //返回Array

方法二：通过instance of来识别

[] instance of Array   //true {} instance of Array   //false

方法三：通过Object.prototype.toString.call方法来识别

讯享网Object.prototype.toString.call([])   //["object Array"] Object.prototype.toString.call({})   //["object Object"]

方法四：通过ES6中的Array.isArray来识别

Array.isArray([])  //true Array.isArray({})  //false

⑥.如何遍历对象的属性

1.遍历自身可枚举属性

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致

2.遍历自身的所有属性（可枚举，不可枚举，非继承属性）

Object.getOwnPropertyNames()方法会返回一个由指定对象的所有自身属性组成的数组（包括可枚举属性但不包括Symbol值作为名称的属性）

3.遍历可枚举的自身属性和继承性

for...in 遍历对象属性

(3).语句相关

①.循环语句

while循环：只有当条件为true时，才能执行循环体。先执行条件，再执行循环体。

do…while循环：始终是先执行循环体，在检查条件是否满足

for循环

for in循环：循环出的是key, 循环对象的时候推荐使用它

for-of循环: 循环出的是value, 循环数组的时候推荐使用它, 是ES6新增的, 不能循环普通的对象, 需要配合Object.keys()方法使用

②.分支语句

if语句：分为单分支，双分支，多分支

switch语句

三元运算符

(4).数组

①.数组去重

讯享网利用双层，然后splice去重 let arr = [1, 33, 55, 22, 22, 66, 1, 66, 11] for (let i = 0; i < arr.length; i++) {     for (let j = i + 1; j < arr.length; j++) {         if (arr[i] === arr[j]) {             arr.splice(j, 1)             j--         }     } } console.log(arr); 利用indexOf去重 let arr = [1, 33, 55, 22, 22, 66, 1, 66, 11] let newArr = [] for (let i = 0; i < arr.length; i++) {     if (newArr.indexOf(arr[i])=== -1) {         newArr.push(arr[i])     } } console.log(newArr); 利用sort() let arr = [1, 33, 55, 22, 22, 66, 1, 66, 11] let newArr = [] arr = arr.sort() for (let i = 0; i < arr.length; i++) {     if (arr[i] !== arr[i-1]) {         newArr.push(arr[i])     } } console.log(newArr);

②.数组排序

冒泡排序      let arr = [33, 33, 55, 22, 22, 66, 66, 66, 11] for (let i = 0; i < arr.length; i++) {     for (let j = 0; j < arr.length - i  -1; j++) {         if (arr[j] > arr[j+1]) {             let a = arr[j]             arr[j] = arr[j+1]             arr[j+1] = a         }     } } console.log(arr); sort排序 let arr = [33, 33, 55, 22, 22, 66, 66, 66, 11] arr.sort(function(a,b){return a- b}) console.log(arr);

③.随机数组

讯享网let arr = [33, 33, 55, 22, 22, 66, 66, 66, 11] let i = Math.floor(Math.random() * arr.length) newArr = arr[i] console.log(newArr);

④.数据降维

var arr = [1, [2, 3, [4, 5], 6], 7, 8] let res = [] function fn(arr) {     for (let i = 0; i < arr.length; i++) {         if (Array.isArray(arr[i])) {             fn(arr[i])         } else {             res.push(arr[i])         }     } } fn(arr) console.log(res);

(5).函数

①.形参和实参

形参就是函数声明时的变量，实参是我们调用该函数时传入的具体参数

②.函数的作用域

函数内部声明的变量，在函数外部无法访问

函数的参数也是函数内部的局部变量

不同函数声明的变量，无法相互访问

函数执行完毕后，函数内部的变量实际上清空了

③.this指向及更改指向的方法

普通函数的调用方式决定了this的指向，即谁调用this就指向谁。在没有明确调用者时this值为window，严格模式下没有明确调用者时this值为undefined

箭头函数中并不存在this，箭头函数里面的 this 是箭头函数所在作用域的this变量。

call、apply、bind 它们的第一个参数都是this指向的对象，call、apply都会立即使函数执行，但参数不同。bind不会使函数立即执行，参数跟call一样

④.函数的返回值

在函数体内，使用 return 语句可以设置函数的返回值。一旦执行 return 语句，将停止函数的运行，并运算和返回 return 后面的表达式的值。如果函数不包含 return 语句，则执行完函数体内每条语句后，返回 undefined 值。

⑤.作用域链

嵌套关系的作用域串联起来形成了作用域链

作用域链的本质上是底层的变量查找机制，在函数被执行时，会优先在当前函数作用域中查找变量，如果当前作用域没有找到，则会依次逐级查找父级作用域直到全局作用域（就近原则）

(6).对象（内置对象）

内置对象：Number、String、Boolean、Array、Object、Math、Date、RegExp、Global、Function、Error

讯享网

①.创建对象的方式

对象字面量方式创建对象

讯享网var person = {     name: "XiaoMing",     job: "Software Engineer",     sayName: function () {         alert(this.name)     }

Object构造函数创建

var person = new Object(); person.name = "XiaoMing"; person.job = "software Engineer"; person.sayName = function () {    alert(this.name); } // 使用object构造函数和对象字面量方式创建对象有一个缺点：如果我们想创建与该对象同类型的对象，就会产生大量重复的代码。

使用工厂模式创建对象

讯享网function createPerson(name,age,job) {     var o = new Object();     o.name = name;     o.age = age;     o.job = job;     o.sayName = function () {         alert(this.name);     }     return o; } var person1 = createPerson('jill',18,'software'); var person2 = createPerson('vane',23,'student'); // 使用工厂模式创建对象虽然解决了创建多个结构相似的对象的问题，但是没有解决对象识别的问题（即无法判断一个对象的类型）

使用构造函数创建对象

function Person(name,age,job){     this.name = name;     this.age = age;     this.job = job;     this.sayName = function(){         alert(this.name);     }; } var person1 = new Person('Nike',29,'teacher'); var person2 = new Person('Arvin',20,'student'); //对比工厂模式，我们可以发现以下区别 //1.没有显示地创建对象 //2.直接将属性和方法赋给了this对象 //3.没有return语句 //4.终于可以识别的对象的类型。对于检测对象类型 // 区别 //就是每个方法都要在每个实例上重新创建一遍，方法指的就是我们在对象里面定义的函数。如果方法的数量很多，就会占用很多不必要的内存

原型创建对象模式

讯享网function Person(){} Person.prototype.name = 'Nike'; Person.prototype.age = 20; Person.prototype.jbo = 'teacher'; Person.prototype.sayName = function(){     alert(this.name); }; var person1 = new Person(); person1.sayName(); // 优点：可以让所有的对象实例共享它所包含的属性和方法 // 缺点：原型中是所有属性都是共享的，但是实例一般都是要有自己的单独属性的。所以一般很少单独使用原型模式。

组合使用构造函数模式和原型模式

function Person(name,age,job){     this.name =name;     this.age = age;     this.job = job; } Person.prototype = {     constructor:Person,     sayName: function(){         alert(this.name);     }; } var person1 = new Person('Nike',20,'teacher'); //创建自定义类型的最常用的方式，就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性，这样每个实例都有自己的一份实例属性的副本，又同时共享着对方法的引用，最大限度的节省了内存。

②.对象的定义和特点

由一对大括号包裹起来的用逗号分隔的若干键值对组成的一个无序集合

键值对

使用const声明的对象，其数据是可以被修改的

特殊情况下，属性值可以简写

属性名称可以随便起

③.math

Math.min()用于确定一组数值中的最小值。

Math.max()用于确定一组数值中的最大值。

Math.ceil()向上取整

Math.floor()向下取整

Math.round()四舍五入。正数时包含5是向上取整，负数时包含5向下取整

Math.random()方法返回介于0到1之间一个随机数，包含0不包括1

讯享网// 获取0-10的随机整数  包含10 Math.floor(Math.random() * (10 + 1)) // 获取5-10的随机整数  包含10 Math.floor(Math.random() * (5 + 1) + 5) // 获取n-m之间的随机整数   包含m Math.floor(Math.random() * (m - n + 1) + n)

Math.abs() 返回绝对值

Math.PI() 获取圆周率π的值

④.date

new Date()获取当前时间

date.toLocaleString()获取本地日期时间

date.toLocaleDateString()获取本地日期

date.toLocaleTimeString()获取本地时间

⑤.array

push()：把里面的内容添加到数组末尾，并返回修改后的长度。

pop()：移除数组最后一项，返回移除的那个值，减少数组的length。

shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。

unshift:将参数添加到原数组开头，并返回数组的长度。

splice()：删除、插入和替换。

join()：就是把数组转换成字符串.

sort()：将数组里的项从小到大排序

reverse()：反转数组项的顺序。

concat()：拼接多个数组为新数组

indexOf()：用于查找某个元素首次出现的位置（索引值），找到返回索引值，找不到返回-1。

lastIndexOf()：用于查找某个元素尾次出现的位置（索引值），找到返回索引值，找不到返回-1。

forEach()：对数组进行遍历循环

find()：去数组中查找满足条件的第一个元素并返回

findindex():去数组中查找满足条件的第一个元素并返回索引值。

some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

filter()：遍历筛选满足条件的值，把所有满足条件的值保存到一个新的数组。

map()：遍历数组的每个元素执行一遍回调函数，把所有的结果放到数组中返回

⑥.string

length属性：获取字符串长度

trim()：去除字符串两端的空白符

split()：把字符串分割为数组

toLowerCase()：将字母转换为小写

toUpperCase()：将字母转换为大写

indexOf()：用于查找某个字符首次出现的位置（索引值），找到返回索引值，找不到返回-1。

lastIndexOf()：用于查找某个字符尾次出现的位置（索引值），找到返回索引值，找不到返回-1。

substring()：截取字符串，从n开始截取，截到m的位置。开始位置上的字符可以截取到，结束位置的字符截取不到。如果只有一个参数，那么会从这个位置截取到最后

substr()：截取字符串从n开始截取，截取m个。如果只有一个参数，那么会从这个位置截取到最后

replace()：用于替换字符串

2.WebAPI阶段

(1).增删改查的方法

// 增 document.createElement('标签名')  // 创建 父元素.appendChild（要插入的元素）   父元素.insertBefore（要插入的元素，在哪个元素前面） // 删 父元素.removeChild（要删除的元素）      必须通过父元素删除 // 改 // 设置修改元素内容   document.write()  只能将文本内容追加到</body>前面的位置，文本包含的标签会被解析 innerText()  将文本添加/更新到任意标签位置，文本包含的标签不会被解析 innerHTML()  将文本添加/更新到任意标签位置，文本包含的标签会被解析 // 设置/修改元素常用属性     对象.属性 = 值 // 设置/修改元素样式属性   对象.style.样式属性 = 值 元素.className = '类名' 元素.classList.add（'类名'） 元素.classList.remove（'类名'） 元素.classList.toggle（'类名'） // 设置/修改表单元素属性    DOM对象.属性名 = 新值 // 查 // 父节点查找    子元素.parentNode // 子节点查找 父元素.children   仅获得所有元素节点，返回一个伪数组 父元素.childNodes   获得所有子节点包括文本节点、空格、换行、注释等 // 兄弟查找     元素.nextElementSibling    // 下一个兄弟节点 元素.previousElementSibling   // 上一个兄弟节点

(2).事件的执行过程

事件流是指事件完整执行过程的流动路径

当触发事件时，会经历两个阶段，捕获阶段、冒泡阶段

捕获阶段：从DOM根元素开始去执行对应的的事件

冒泡阶段：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

简单来说，捕获阶段从父到子，冒泡阶段从子到父

(3).阻止事件冒泡的方法，要考虑兼容性

e.stopPropagation()

return false

e.preventDefault()

(4).回流和重绘

浏览器是如何进行页面渲染的？

解析html，生成DOM树

同时解析css，生成样式规则

根据DOM树和样式规则生成渲染树

进行布局回流，根据生成的渲染树，得到节点的几何信息（位置，大小）

进行重绘，根据计算和获取的信息进行页面的绘制，最后展现在网页上

回流：

当渲染树中部分或全部的元素尺寸，结构，布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程叫做回流

重绘：

由于节点（元素）的样式改变并不会影响它在文档流中的位置和文档布局时就会产生重绘

重绘不一定会引起回流，但回流一定会引起重绘

会导致回流的操作：

页面的刷次刷新

浏览器窗口的大小发生改变

元素的大小或位置发生改变

改变字体的大小

内容的变化（比如input框的输入，图片的大小）

激活css伪类（比如hover）

脚本操作DOM（添加或删除可见的DOM元素）

简单来说，影响布局了，就会有回流

如何减少回流和重绘？

动态改变样式时, 给CSS添加类样式, 用js的 className 或 classList 间接去控制样式, 而不是直接用js控制。尽量将需要改变DOM的操作一次性完成。尽量不要使用表格布局。 CSS样式中要遵循样式的书写顺序: 显示与定位类, 盒子模型类, 文本字体类, 背景边框类, 装饰类或C3新特性。将需要多次重排的元素, position属性设置为 absolute 或 fixed。让元素脱离动画流, 减少渲染树的规模。

(4).事件委托

说白了事件委托就是利用冒泡的原理，把本应该添加到某个元素上的事件委托给它的父级，从而减少DOM交互达到网页优化。

优点：

减少事件注册，节省内存，提高性能

新添加的元素还会有之前的事件。

缺点：

事件委托基于冒泡，对于不冒泡的事件不支持

层级过多，冒泡过程中可能会被某层阻止掉

3.高级进阶

(1).函数的拓展

①.闭包函数

我的理解是，闭包就是能够读取其他函数内部变量的函数

作用：

1.可以在函数的外部访问到函数内部的局部变量。

2.让这些变量始终保存在内存中，不会随着函数的结束而自动销毁。

3.闭包能够创建外部可访问的隔离作用域，避免全局变污染。

缺点：

过度使用闭包可能造成内存的泄漏

②.什么是内存泄漏

当一块内存不再使用时没有及时清理掉, 从而一直占用着内存空间, 会导致应用程序卡顿或直接崩溃

③.js哪些操作会内存泄漏，js内存泄漏的解决方式，怎样避免内存泄露

意外的全局变量引起的内存泄露

解决方式： 在js文件开头添加 ‘use strict’，开启严格模式。（或者一般将使用过后的全局变量设置为 null 或者将它重新赋值，这个会涉及的缓存的问题，需要注意）

定时器setInterval或者setTimeout在不需要使用的时候，没有被clear，导致定时器的回调函数及其内部依赖的变量都不能被回收，这就会造成内存泄漏。

解决方法：当不需要setInterval或者setTimeout的时候，调用clearInterval或者clearTimeout

事件的绑定没有移除

解决方法： 移除事件的监听

闭包引起的内存泄露

解决方法：不用过渡的使用闭包

console 控制台日志记录对总体内存内置文件的影响，也是个重大的问题，同时也是容易被忽略的。记录错误的对象，可以将大量的数据保留在内存中。传递给console.log的对象是不能被垃圾回收，所以没有去掉console.log可能会存在内存泄漏

避免内存泄露：

1）减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；

2）注意程序逻辑，避免“死循环”之类的；

3）避免创建过多的对象原则：不用了的东西要及时归还。

④.预解析

把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值

把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用

⑤.节流和防抖

节流：

当持续触发事件时，保证一定时间段内只调用一次事件处理函数

防抖：

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，有一次触发了事件，就会重新开始延时

好处：

可以有效减少对服务器的请求次数, 节省网络资源

(2).对象的拓展

①.原型对象

原型：

是构造函数的一个属性，prototype属性，任何一个构造函数都有这个属性，这个属性指向了一个对象，我们把这个对象称为原型，或者原型对象。

共享方法，节省内存

原型继承：

构造函数名.prototype = 对象; // 对象里面存放构造函数需要的所有公共属性和方法

构造函数名.prototype.constructor = 构造函数名; // 将构造函数的原型对象指回原构造函数

②.原型链

当我们访问一个对象的属性时，如果这个对象内部不存在这个这个属性，那么他就会去原型对象找，原型对象找不到就会去原型对象的原型对象找，于是就这样的找下去，也就是我们所说的原型链概念

在JavaScript对象中包括了一个非标准的属性_ _ proto _ _,他指向了构造函数的原型对象，通过它我们可以清楚的查看到原型对象的链状结构

提供我们查找成员机制

关键字说明：

prototype: 原型(原型对象), 是每个函数都有的一个属性, 多用于构造函数上

constructor: 指向原构造函数的指针

_ _ proto _ _ : 对象都有此属性, 用于指向构造函数的原型对象,

构造函数.prototype === 实例对象._ _ proto _ _

③.new关键字的背后执行过程

1.会先在堆内开辟一个新空间，用于存储构造函数的属性和方法，同时生成一个唯一的地址

2.在栈中会保存那个唯一的地址，唯一对应到堆中的那个构造函数

3.构造函数中的this会先指向栈中的地址，间接的指向堆中的那个构造函数

4.构造函数执行完成后，构造函数底层会返回那个this，这个this就指向了实例化对象person

讯享网// 创建一个构造函数 function Person() {     this.arms = 2;     this.uname = '张三';     this.eat = function() {         console.log('吃饭');     } } // 实例化一个对象 let person = new Person();

④.对象的深浅拷贝

// 浅拷贝：只拷贝最外面的一层 let obj = {     uname: '张三丰',     age: 22,     sex: '女',     color: ['red', 'blue', 'yellow', 'pink'],     message: {         index: 6,         score: 99     } } let newObj = {}; // for (let k in obj){ //     newObj[k] = obj[k] // } Object.assign(newObj,obj) obj.sex = '男' newObj.uname = '李寻欢' console.log(obj,newObj); // 深拷贝：所有层都拷贝 let obj = {     uname: '李寻欢',     age: 22,     sex: '男',     color: ['red', 'blue', 'yellow', 'pink'],     message: {         index: 6,         score: 99     } } let newObj = {}; // 封装函数 ，递归 function kaobei(obj, newObj) {     // 遍历对象     for (let k in obj) {         // 判断         // 如果obj[k]是数组，那么必定是Array的实例对象         // 必须先判断数组，在判断对象。因为数组也是对象，如果在对象后边判断，那么会按照对象来判断         if (obj[k] instanceof Array){             // 如果obj[k]是数组  那么newObj[k]也得是数组             newObj[k] =[]             kaobei(obj[k], newObj[k])         } else if(obj[k] instanceof Object) {             newObj[k] = {}             kaobei(obj[k], newObj[k])         } else {             newObj[k]=obj[k]         }     } } kaobei(obj, newObj) obj.uname = '张三丰' newObj.sex = '女' obj.color[0]= 'orange' newObj.color[1] = 'purple' obj.message.index = 8 newObj.message.score = 101 console.log(obj, newObj);

⑤.for in 和for of的区别

1.推荐在循环对象属性的时候使用for...in，在遍历数组的时候使用for...of

2.for...in循环出的是key，for...of循环出的是value

3.for...of不能循环普通对象，需要通过和Object.keys()搭配使用

4.注意：for...of是ES6新引入的特性，修复了ES5引入的for...in的不足

⑥.常见的继承有几种方法

1.原型链继承

关键

把子类的原型指向父类的实例，从而继承父类的私有属性和原型属性

优点：

父类新增的原型属性和方法，子类实例都能访问的到，简单易用

缺点：

1.无法实现多继承

2.创建子类实例的时候没办法向父类构造函数传参

3.所有子类共享父类的属性，（比如某个属性是一个数组，一个子类对其进行了修改，导致其他子类访问的也发生改变）

讯享网function Parent(sex) {     this.sex = sex ? sex : 'men' } Parent.prototype.getSex = function() {     return this.sex } function Son(name) {     this.name = name } Son.prototype = new Parent() var son1 = new Son('奥特曼') console.log(son1.getSex())

2.借用构造函数的方法实现

关键

在子类的构造函数中使用call 或者apply 调用父类的构造函数实现父类私有属性

优点：

1.创建子类实例的时候可以向父类传参

2.可以实现多继承（在子类构造函数中调用多个父类构造函数）

3.解决了原型链继承中子类实例共享父类实例的引用数据类型属性的问题（即使父类中有引用数据类型，在创建子类实例时，都会重新调用父类的构造函数重新创建一个引用数据类型的属性，并且从新申请地址空间）

缺点：

1.每次创建子类的实例都要调用一次父类的构造函数，影响性能

2. 只能继承父类的私有属性，没有继承父类的原型

function Parent(sex) {     this.sex = sex; } Parent.prototype.getSex = function() {     return this.sex; } function Son(sex, name) {     Parent.call(this, sex)     this.name = name } var son = new Son('men', '洛克王国') console.log(son)

3.组合继承（组合原型链继承和借用构造函数继承）（常用）

重点

结合了两种模式的优点，传参和复用

特点：

1.可以继承父类原型上的属性，可以传参，可复用。

2.每个新实例引入的构造函数属性是私有的。

缺点：

调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。

讯享网function Animal(name,age){     this.name = name     this.age = age } Animal.prototype.sayName = function () {     console.log(this.name) } function Cat(name,age,color){     Animal.call(this,name,age)     this.color = color } Cat.prototype = Animal.prototype  //将Cat的原型指向Animal的原型 Cat.prototype.constructor = Cat   //将Cat的构造函数指向Cat let cat = new Cat('xiaobai',3,'white') console.log(cat) //Cat { name: 'xiaobai', age: 3, color: 'white' } cat.sayName()   //xiaobai

4.es6class实现继承

关键

使用extends关键字实现继承父类的原型属性，调用super来继承父类的实例属性，其保留传参的优点

优点：

简单易用，不用自己来修改原型链来完成

class Parent {     constructor(sex) {         this.sex = sex;     }     showSex() {         console.log('这是父类的方法')     } } class Son extends Parent {     constructor(name, sex, age) {         super(sex)         this.name = name;         this.age = age     }     showSex() {         console.log('这是子类的方法')     } } const b = new Son('奥特曼', 'men', 15) console.log(b) b.showSex()

4.ES6阶段

(1).变量的声明方式

①：ES5声明变量的方式

var：

声明的变量可以修改，如果不初始化输出为undefined，不会报错，存在变量提升

function：

②：ES6声明变量的方式

let：

声明的变量只能在当前作用域下使用，声明的变量不能重复声明、不存在变量提升、存在暂时性死区，声明的变量不会挂在window上

const：

拥有let的特性，声明的是一个常量，一旦声明必须赋值，声明过后不能重新赋值，当声明的常量是一个对象时，其属性和方法允许重新赋值，声明的变量不会挂在window上

import：

引入的模块是静态加载，而不是动态加载

class：

可以看做只是一个ES5生成实例对象的构造函数的语法糖，class类使用extends实现继承

(2).箭头函数

箭头函数是一种声明函数的简洁语法

箭头函数没有function，用=>代替

箭头函数属于函数表达式，因此不存在函数提升

箭头函数只有一个参数时，可以省略小括号

箭头函数函数体只有一行代码时，可以省略大括号，并自动作为返回值被返回

箭头函数中没有arguments，只能使用...动态获取实参

用了箭头函数，this就不是指向window，而是父级

(3).class 类

class：

是声明类的一个关键字

什么是类？

类是一种抽象的概念, 比如人是一个类, 动物是一个类, 水果是一个类等等

作用：

用于创建对象, 构建一个实际存在的对象

(4).promise（重要）

①.js单线程：

JavaScript语言的一大特点就是单线程，也就是说，同一时间只能做一件事，单线程就意味着所有任务需要排队，前一个任务结束，才会执行后一个任务，这样就会导致js执行时间过长，造成页面渲染的不连贯，导致页面渲染加载堵塞的感觉。

为了解决这个问题，利用多核cup的计算能力，HTML5提出WebWorker标准，允许JavaScript脚本创建多个线程，于是js中出现了同步和异步

②.同步任务

同步任务都是在主线程上执行的，形成一个执行栈

③.异步任务

js的异步是通过回调函数实现的

一般而言，异步任务有以下三种函数

普通事件。如click、resize等

资源加载。如load、error等

定时器。包括setinterval、setTimeout

异步任务相关添加到任务队列中（任务队列也称为消息队列）

④.js执行机制

1.先执行执行栈中的同步任务

2.异步任务放到任务队列中

3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

⑤.事件循环 event loop

由于主线程不断的重复获取任务，执行任务，再获取任务，再执行任务，所以这种机制被称为事件循环

(5).数组新增的api

Array.from()

用于将伪数组转为真正的数组。必须有length属性

Array.of()

用于将一组值，转换为数组。

find()

用于查找满足条件的第一个元素，没找到则返回undefined

findIndex(callback)

用于查找满足条件的第一个元素的下标，没找到返回-1

copyWithin(target, [start], [end])

在数组内部完成复制，参数1：从下标几开始改变数据；参数2：从哪一位开始复制数据，默认是第一位；参数3：在指定位置停止复制数据。

(6).对象新增的api

Object.is()

在用法上和严格相等（===）大多数情况下一样，但对于NaN、0、-0、+0的判断不一样

讯享网console.log(1 === 1); //true console.log(Object.is(1,1));//true console.log(-0 === +0); //true console.log(Object.is(-0,+0));//false console.log(NaN === Nan); //false console.log(Object.is(NaN, NaN ));//true

Object.assign()

用来合并对象。参数1：目标对象参数2：需要被合并的对象。

1.返回值是传入的第一个目标对象，会把所有的对象合并上去时候，在返回

2.第一个参数必须是对象如果不是对象就会把它转换成对象。

3.如果是undefined 或者 null 没办法转换成对象那么就会报错。

4.如果在需要合并的多个对象里面有同名的属性那么后面的属性就会对前面的进行覆盖。

5.如果undefined和null不是第一个参数那么就不会报错第一个参数返回

6.assign方法是浅拷贝不是深拷贝。

Object.setPrototypeOf ()

给一个对象设置原型对象

Object.getPrototypeOf()

获取对象原型的方法

Object.keys()

将对象所有的属性名遍历然后返回一个数组

Object.values()

将对象所有的属性会值遍历然后返回一个数组

Obj.hasOwnProperty('属性名')

判断指定的属性是不是自己的, 若是返回true, 若不是返回false

5.Ajax阶段

(1).Ajax的实现原理

通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据

(2).Ajax请求的步骤

第一步，创建XMLHttpRequest对象

第二步，注册XMLHttpRequest对象的load事件，当响应结果返回来，就触发这个事件,使用原生response接收响应结果

第三步open()，设置请求方式和接口地址，

post请求下需要设置指定请求体的编码格式

第四步send()，发送请求,post请求下，要传递的参数放这

(3).get和post的区别

post比get安全，因为数据在地址栏上不可见

get用来从服务器上获取数据，post是用来向服务器上传递数据

get通过拼接url进行传递数据，post通过请求体传输数据

get请求可以缓存，post请求不可以缓存

get的url会有长度限制，post的数据则可以非常大

(4).http和https的区别

https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

(5).什么是同源策略

同源指的是两个url地址具有相同的协议、主机名、端口号。

同源策略是一种安全协议，不允许非同源的url之间进行资源交互。

(6).如何解决跨域

什么是跨域？

指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制，防止他人恶意攻击网站。

解决方式：

jsonp

jsonp是实现跨域数据请求的一种技术方案，它只支持GET请求，不支持POST的等其他请求，jsonp没有用到XMLHttpRequest对象，因此jsonp不是真正的Ajax技术

原理：动态创建一个script标签，利用script标签的src属性不受同源策略限制。因为src属性和href属性都不受同源策略限制，可以请求第三方服务器数据内容。

CORS

CORS 是解决跨域数据请求的终极解决方案。CORS技术需要浏览器和服务器同时支持，二者缺一不可

原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求

限制：浏览器要支持CORS功能（主流浏览器全部支持，IE不能低于10）

CORS的两个优势：

①：CORS是真正的Ajax技术，支持，GET、POST、DELETE、PUT、PATCH等其他请求。

②：只需要后端开启CORS功能即可，前端代码无需做任何改动

(7).常见HTTP状态码以及代表的意义

状态码	状态码描述	说明
200	OK	请求成功。
201	Created	资源在服务器端已成功创建。
304	Not Modified	资源在客户端被缓存，响应体中不包含任何资源内容！
400	Bad Request	客户端的请求方式、或请求参数有误导致的请求失败！
401	Unauthorized	客户端的用户身份认证未通过，导致的此次请求失败！
404	Not Found	客户端请求的资源地址错误，导致服务器无法找到资源！
500	Internal Server Error	服务器内部错误，导致的本次请求失败！

(8).一个页面从输入url到页面加载显示完毕，这个过程中都发生了什么？

1、首先，在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。

5、握手成功后，浏览器向服务器发送http请求，请求数据包。

6、服务器处理收到的请求，将数据返回至浏览器

7、浏览器收到HTTP响应

8、读取页面内容，浏览器渲染，解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

11、ajax查询

后续更新中...