前端面试题03

1 HTTP状态码

① 成功类（请求已经被成功处理了）

200 请求已成功，返回想要的东西。出现此状态码是表示正常状态。（所有人都喜欢的）

201 请求成功，服务器正在创建请求的资源

202 服务器收到请求了，但是未处理

203 服务器成功处理，但是返回的信息是另一个来源

204 服务器成功处理，但是没有返回内容 

205 服务器成功处理，但是没有返回内容

206 成功处理了部分get请求

② 重定向类（要完成请求，需要进一步操作）

300 针对请求，服务器可执行多种操作

301 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置

302 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求

304 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容

305 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理

③ 请求错误（请求可能出错，导致服务器处理不了）

400 语义错误，请求无法被服务器理解。或者请求参数有误

401 请求需要请求者验证

403 服务器拒绝该请求

404 找不到请求网页

405 请求的方法是服务器中禁用的

406 请求的资源的内容特性无法满足请求头中的条件，因而无法生成响应实体

408 请求超时

410 被请求的资源在服务器上已经不再可用，而且没有任何已知的转发地址 

413 服务器拒绝处理当前请求，因为该请求提交的实体数据大小超过了服务器愿意或者能够处理的范围

④ 服务器错误

500 服务器代码报错

501 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码

502 服务器作为网关或代理，从上游服务器收到无效响应

503  服务器目前无法使用（由于超载或停机维护）。 通    常，这只是暂时状态

504 服务器作为网关或代理，但是没有及时从上游服务器收到请求

505 服务器不支持请求中所用的 HTTP 协议版本

2 v-if和v-for同时使用在同一个标签上的表现

当v-if与v-for一起使用时，v-for具有比v-if更高的优先级，这意味着v-if将分别重复运行于每个v-for循环中。

所以，不推荐v-if和v-for同时使用。如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去

3 H5新特性有哪些

① 拖拽释放(Drap and drop) API ondrop

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

② 自定义属性 data-id

③ 语义化更好的内容标签(header,nav,footer ,aside, article, section)

④ 音频,视频(audio, video) 如果浏览器不支持自动播放怎么办?在属性中添加 autoplay

⑤ 画布

getContext()方法返回一个用于在画布上绘图的环境 Canvas.getContext(contextID)

参数contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API

cxt.stroke()如果没有这一步

线条是不会显示在画布上的

canvas 和image 在处理图片的时候有什么区别?

image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上

⑥ 地理(Geolocation)API

⑦ 本地离线存储 localStorage 长期存储数据 浏览器关闭后数据不丢失

⑧ sessionStorage的数据在浏览器关闭后自动删除

⑨ 表单控件 calendar , date , time , email , url , search , tel , file , number 

⑩ 新的技术 webworker, websocket , Geolocation

4 CSS3新特性

① 颜色:新增 RGBA , HSLA 模式

② 文字阴影(text-shadow)

③ 边框:圆角(border-radius) 边框阴影 :box-shadow

④ 盒子模型: box-sizing

⑤ 背景:background-size background-origin background-clip

⑥ 渐变:linear-gradient , radial-gradient

⑦ 过渡: transition 可实现动画⑪⒀⒁⒂⒃⒄⒅

⑧ 自定义动画 animate @keyfrom

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

⑩ border-image

⑪ 2D 转换;transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

⑫ 3D 转换

⑬ 字体图标 font-face

⑭ 弹性布局 flex

5 盒子居中

① absoulte

top:50%

left:50%

margin-top: -50px

margin-left: -50px

② absoulte 

margin：auto

top:0

left:0

right:0

bottom:0

③  display：flex

justify-content:center

align-items:center

6 重排(回流）和重绘

① 回流：元素的大小或者位置发生改变（当页面布局发生改变的时候），触发了重新布局导致渲染树重新计算布局和渲染

1）如添加或删除可见的DOM元素

2）元素的位置发生变化

3）元素的尺寸发生变化

4）内容发生变化（如文本变化或图片被另一个不同尺寸的图片所代替）

5）页面一开始渲染的时候（无法避免）

6）因为回流是根据视口大小来计算元素的位置和大小的，所以浏览器窗口尺寸变化也会引起回流

② 重绘：只改变自身样式，不会影响到其他元素

1）元素样式的改变(但宽高、大小、位置不变)

2）注意：回流一定会触发重绘，而重绘不一定会回流

7 display:none与visibility:hidden的区别

8 为什么会出现浮动？浮动元素会引起什么问题？如何清除浮动

9 如何解决外边距塌陷

① 为父盒子设置 border，为外层添加 border 后父子盒子就不是真正意义上的贴合（可以设置成透明：border：1px solid transparent）；

② 为父盒子添加 overflow：hidden；

③ 为父盒子设定 padding 值；

④ 为父盒子添加 position：fixed；

⑤ 为父盒子添加 display：table；

10 HTML5 的 input 增加哪些type

color：用于指定颜色的控件 dao

date：用于输入日期的控件（年，月，日，不包括时间）

datetime：基于UTC 时区的日期时间输入控件（时，分，秒及几分之一秒） datetime-local：用于输入日期时间控件，不包含时区 email：用于编辑 e-mail 的字段

month：用于输入年月的控件，不带时区 number: 用于输入浮点数的控件 range：用于输入不精确值控件

search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除 tel：用于输入电话号码的控件

time：用于输入不含时区的时间控件

url：用于编辑 URL 的字段

week：用于输入一个由星期-年组成的日期，日期不包括时区

11 BFC是什么

BFC(Block formattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干

12 使用CSS怎么让Chrome支持小于12px的文字

13 instanceof

① instanceof不能判断原始数据类型的数据

② instanceof可以用来判断对象的对象的类型    

14 Array.isArray（value）

可以用来判断value是否是数组

15 创建对象有几种方法

① 字面量对象

var o1 = {}

② 通过new Object声明一个对象

var o11 = new Object()

③ 使用显示的构造函数创建对象

var M = function(){}

var o2 = new M()

④ object.create()

var P = {}

var o3 = Objecgt.create(p)

16 简述创建函数的几种方式？

① 函数声明

function sum(num1,num2){

    num1 + num2

}

② 函数表达式

var sum2 = function(num1,num2){

return

num1+num2;

}

③ 函数对象

var sum3 = new Function("num1","num2","return num1+num2")

17 数组的方法

① join() 将一个数组转成字符串。返回一个字符串

② reverse() 将数组中各元素颠倒顺序

③  shift()删除数组中第一个元素，返回删除的那个值，并将长度减 1

④ pop() 删除数组中最后一个元素，返回删除的那个值，并将长度减 1

⑤ unshift() 往数组前面添加一个或多个数组元素，长度要改变

⑥ push() 往数组结尾添加一个或多个数组元素，长度要改变

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

⑧ concat() ：将参数添加到原数组中。

⑨ slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

⑩ indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。

⑪ lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。 

⑫ forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身

⑬ map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

⑭ filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

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

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

⑰ splice()

1) 删除功能，第一个参数为第一项位置，第二个参数为要删除几个。

array.splice(index,num)，返回值为删除内容，array为结果值

2) 插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）array.splice(index,0,insertValue)，

3) 替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）array.splice(index,num,insertValue)，返回值为删除内容，array为结果值。

18 === 和 ==的区别

区别 ===：三个等号我们称为等同符，当等号两边的值为相同类型的时候，直接比较等号两边的值，值相同则返回 true，若等号两边的值类型不同时直接返回 false。也就是说三个等号既要判断值也要判断类型是否相等

==：两个等号我们称为等值符，当等号两边的值为相同类型时比较值是否相同，类型不同时会发生类型的自动转换，转换为相同的类型后再作比较。也就是说两个等号只要值相等就可以

19 什么是类数组（伪数组），如何将其转化为真实的数组

① 维数组

1）具有length属性

2）按照索引进行排列

3）不能够使用数组的常用方法

② 转为真实数组

1）使用Array.from()

2）[].slice.call()

20 DOM和BOM的区别

①  bom

1) BOM是浏览器对象模型

2）BOM没有相关标准

3）BOM的顶级对象时window

② DOM

1）DOM是文档对象模型

2）DOM是W3C标准

3）DOM顶级对象时document