2021年前端⾯试题及答案（更新中）
http和https的基本概念
http:
超⽂本传输协议，是互联⽹上应⽤最为⼴泛的⼀种⽹络协议，是- ⼀个客户端和服务器端请求和应答的标准(TCP)，⽤于从www服务器传输⽂本到本地浏览器的传输协议，它可以使浏览器更加⾼效，使⽹络传输减少.
https:
是以安全为⽬标的HTP通道，简单讲是HTTP的安全版，即HTTP 下加⼊SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL.
htps协议的主要作⽤是:
建⽴⼀个信息安全通道，来确保数组的传输，确保⽹站的真实性.
https的SSL加密是在传输层实现的.
http和https的区别?
http传输的数据都是未加密的，也就是明⽂的,⽹景公司设置了SSL协议来对http协议传输的数据进⾏加密处理，简单来说hps协议是由http和ss协议构建的可进⾏加密传输和⾝份认证的⽹络协议，⽐htp协议的安全性更⾼.主要的区别如下:
1.Https协议需要ca证书，费⽤较⾼.
2.http是超⽂本传输协议，信息是明⽂传输，
3.https 则是具有安全性的ssl加密传输协议.
4.使⽤不同的链接⽅式，端⼝也不同，⼀般⽽⾔，http 协议的端⼝为80, https 的端⼝为443
5.http的连接很简单，是⽆状态的: HTTPS 协议是由SSL+HTTP协议构建的可进⾏加密传输、⾝份认证的⽹络协议，⽐http协议安全.
Cookie、 sessionStorage. localStrage 的区别
共同点：都是保存在浏览器端，并且是同源的
Cookie:
cookie 数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。⽽ssionStorage和localStorage不会⾃动把数据发给服务器，仅在本地保存. cookie 数据还有路径(path) 的概念，可以限制cookie只属于某个路径下，存储的⼤⼩很⼩只有4K左右，(key: 可以在浏览器和服务器端来回传递，存储容量⼩，只有⼤约4K左右)
cookie的作⽤：保存⽤户登录状态。例如将⽤户id存储⼀个cookie内，这样当⽤户下次访问该页⾯时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。cookie 还可以设置过期时间，当超过时间期限后，cookie 就会⾃动消失。因此，系统往往可以提⽰⽤户保持登录状态的时间：常见选项有⼀个⽉、三个⽉、⼀年等.跟踪⽤户⾏为.例如⼀个天⽓预报⽹站，能够根据⽤户选择的地区显⽰当地的天⽓情况.如果每次都需要选择所在地是烦琐的，当利⽤了cookie 后就会显得很⼈性化了，系统能够记住上⼀次访问的地区，当下次再打开该页⾯时，它就会⾃动显⽰上次⽤户所在地区的天⽓情况.因为-切都是在后台完成，所以这样的页⾯就像为某个⽤户所定制的⼀样
sessionStorage:
1.仅在当前浏览器窗⼝关闭前有效，页⾯关闭随之失效不可能持久保持,
2.session 为⼀个回话，当页⾯不同即使是同⼀页⾯打开两次，也被视为同⼀次回话
localStorage
始终有效，窗⼝或浏览器关闭也⼀直保存，因此⽤作持久数据;
localStorage 在所有同源窗⼝中都是共享的;cookie 也是在所有同源窗⼝中都是共享的. (key: 同源窗⼝都会共享， 并且不会失效，不管窗⼝或者浏览器关闭与否都会始终⽣效)
GET和POST的区别
1. get参数通过url传递，post 放在request body中.
2. get请求在url中传递的参数是有长度限制的，⽽post没有.
3. get不安全，因为参数直接暴露在url中，所以不能⽤来传递敏感信息。
4. get请求只能进⾏url编码，⽽post⽀持多种编码⽅式
5. get请求会浏览器主动cache，⽽post⽀持多种编码⽅式.
6. get请求参数会完整保留在浏览历史记录⾥，⽽post中的参数不会被保留.
http返回的状态码
100 Continue 继续。 客户端应继续其请求
l01 Switching Protocols 切换协议.服务器根据客户端的请求切换协议.只能切换到更⾼级的协议，例如，切换到HTTP的新版本协议
200 OK请求成功. ⼀般⽤于GET与POST请求
206 Partial Content部分内容. 服务器成功处理了部分GET请求
300 Muliple Choices多 种选择.请求的资源可包括多个位置，相应可返回⼀个资源特征与地址的列表⽤于⽤户终端(例如：浏览器)选择
301 Moved Permnanenty永久移动. 请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会⾃动定向到新URI.今后任何新的请求都应使⽤新的URI代替302 Found 临时移动。 与301类似.但资源只是临时被移动.客户端应继续使
304 Not Modified未修改. 所请求的资源未修改，服务器返回此状态码时
305使⽤代理。所请求的资源必须通过代理访问
400 Bad Request客 户端请求的语法错误，服务器⽆法理解
401 Unauthorized 请求要求⽤户的⾝份认证
402 Payment Required保留， 将来使⽤
403 Forbidden 拒绝请求，⽆权访问
404 Not Found服务器⽆法根据客户端的请求到资源(⽹页)
408 Request Time-out服务器等待客户端发送的请求时间过长，超时
409Conflict服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发⽣了冲突
410m Gone客户 端请求的资源已经不存在.
500 Intemnal Server Error服务器内部错误，⽆法完成请求
清除浮动的⽅法
使⽤带clear属性的空元素
在浮动元素后使⽤⼀个空元素如<div class=" clear*>，并在CSS中赋
予.clear(clearboth;)属性即可清理浮动.亦可使⽤<br class= ‘clear”1>或<hr class="clear’ 1>来进⾏清理.
使⽤CSS的overlow属性
给浮动元素的容器添加overflow hidden：或ovrlow:auto；可以清除浮动，另外在IE6 中还需要触发hasLayout，例如为⽗元素设置容器宽⾼或设置zoom:1.在添加overflow 属性后，浮动元素⼜回到了容器层，把容器⾼度撑起，达到了 清理浮动的效果.
给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使⽤.
使⽤CSS的after伪元素
结合after伪元素(注意这不是伪类，⽽是伪元素，代表-个元素之后最近的元素)和Ehack，可以完美兼容当前主流的各⼤浏览器，这⾥的IEhack 指的是触发hasl ayout.给浮动元素的容器添加⼀⼀个clearfix的class，然后给这个class添加⼀个after伪元素实现元素末尾添加⼀个看不见的块元素(Block element)清理浮动.
怎么样让⼀个元素消失
display:none;
visibility:hidden;
opacity: 0;
盒模型
标准盒模型:
⼀个块的总宽度=width+margin(左右)+ padding(左右)+border(左右)
怪异盒模型:
⼀个块的总宽度=width+margin (左右) (既 width已经包含了padding和border值)
设置盒模型: box-sizing:border-box
定位position 相关属性
固定定位fiexd：
元素的位置相对于浏览器窗⼝是固定位置，即使窗⼝是滚动的它也不会移动。Fixed 定 位使元素的位置与⽂档流⽆关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
相对定位 relative：
如果对⼀个元素进⾏相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或⽔平位置，让这个元素“相对于”它的起点进⾏移动。 在使⽤相对定位时，⽆论是 否进⾏移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位 absolute：
绝对定位的元素的位置相对于最近的已定位⽗元素，如果元素没有已定位的⽗元素，那 么它的位置相对于 html 。absolute 定位使元素的位置与⽂档流⽆关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
粘性定位 sticky：
元素先按照普通⽂档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。⽽后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。 默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index
声 明）。 inherit: 规定应该从⽗元素继承 position 属性的值。
盒⼦垂直⽔平居中
1、⽗级元素设置 text-align：center，然后设置 line-height 和 vertical-align 使其垂直居中， 最后设置 font-size：0 消除近似居中的 bug
2、⽗级元素设置 display：table-cell，vertical-align：middle 达到⽔平垂直居中
3、采⽤绝对定位，原理是⼦绝⽗相，⽗元素设置 position：relative，⼦元素设置 position： absolute，然后通过 transform 或 margin 组合使⽤达到垂直居中效果，设置 top：50%，left： 50%，transform：translate（-50%，-50%）
4、绝对居中，原理是当 top,bottom 为 0 时，margin-top&bottom 设置 auto 的话会⽆限延 伸沾满空间并平分，当 left，right 为 0 时,margin-left&right 设置 auto 会⽆限延伸占满空 间并平分，
5、采⽤ flex，⽗元素设置 display：flex，⼦元素设置 margin：auto
6、视窗居中，vh 为视⼝单位，50vh 即是视⼝⾼度的 50/100，设置 margin：50vh auto 0，transform：translate(-50%)
css最新
css预处理器
css有那些缺点：
代码不整洁，不灵活，
不利于维护, ⽆法嵌套，
什么是预处理：
使⽤⼀种新的语⾔将Css作为⽬标⽣成⽂件，然后只要使⽤这种语⾔进⾏编码⼯作。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护sass和less的不同之处
1.Sass的安装需要安装Ruby环境，Less基于JavaScript，是需要引⼊Less.js来处理代码输出css到浏览器，也可以在开发环节使⽤Less，然后编译成css⽂件，直接放在项⽬中，有less.app、SimpleLess、CodeKit.app这样的⼯具，也有在线编辑地址。
2. less使⽤较sass简单:LESS 并没有裁剪 CSS 原有的特性，⽽是在现有 CSS 语法的基础上，为 CSS 加⼊程序式语⾔的特性。只要你了解 CSS 基础就可以很容易上⼿。
3.功能上，sass较less略强⼤:
①sass有变量和作⽤域。
a.  $variable，like php
b. #｛$variable｝like ruby
c.变量有全局和局部之分，并且有优先级。
②sass有函数的概念；
a.@function和@return以及函数参数（还有不定参）可以让你像js开发那样封装你想要的逻辑。
b.@mixin类似function但缺少像function的编程逻辑，更多的是提⾼css代码段的复⽤性和模块化，这个⽤的⼈也是最多的。
c.ruby提供了⾮常丰富的内置原⽣api。
③进程控制：
-条件：@if @else；
-循环遍历：@for @each @while
-继承：@extend
-引⽤：@import
④数据结构：
$list类型=数组；
$map类型=object；
其余的也有string、number、function等类型
JavaScript
js数据类型有哪些
JS的基本类型和引⽤类型有哪些呢？
基本类型（单类型）：除Object。 String、Number、boolean、null、undefined。
引⽤类型：object。⾥⾯包含的 function、Array、Date。
Number: 数字类型，表⽰数据的整数和浮点数某些语⾔中也称为“双精值”。
String: 字符串可以有单引号、双引号表⽰。字符串是不可变的，⼀旦创建，值就不能改变 要改变某个变量保存的字符串，⾸先要销毁原来的字符串，然后于⽤另⼀个包含的字符串填充该变量。
Boolean: 使⽤最多的⼀个类型，有两个字⾯值，分别是true、false。true不⼀定等于1,false不⼀定等于0。boolean类型的字⾯值是区分⼤⼩写的。
undefined: 只有⼀个值，是undefined。没有初始化。undefined 是从 null 中派⽣出来的。
Null : 只有⼀个值，是 null。不存在的对象null是表⽰⼀个空对象指针，这也是typeof操作符检测 null 值时会返回 object 的原因
(ES6 Symbol ): Symbol 类型的对象永远不相等，即便创建的时候传⼊相同的值。因此，可以⽤解决属性名冲突的问题（适⽤于多少编码），做为标记。
object：对象其实就是⼀组数据和功能的集合。对象可以通过执⾏new操作符后跟要创建的对象类型的名称来创建。创建object类型的实例并为其添加属性（或）⽅法，就可以⾃定义创建对象。
Object 中包含:
其中包含了Data、function、Array等。这三种是常规⽤的
NaN 的数据类型是 number
数组(Array)的数据类型是 object
⽇期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined
null 不存在的因素及解决⽅案
原因是：
1､⽅法不存在
2､对象不存在
3､字符串变量不存在
4､接⼝类型对象没初始化
解决⽅法：
做判断处理的时候，放在设定值的最前⾯
JS 判断类型
1. typeof的语法
typeof是⼀个运算符，有2种使⽤⽅式：typeof(表达式)和typeof 变量名，第⼀种是对表达式做运算，第⼆种是对变量做运算。
2. typeof的返回值
typeof运算符的返回类型为字符串，值包括如下⼏种：
1. ‘undefined’ --未定义的变量或值
2. ‘boolean’ --布尔类型的变量或值
3. ‘string’ --字符串类型的变量或值
4. ‘number’ --数字类型的变量或值
5. ‘object’ --对象类型的变量或值，或者null
(这个是js历史遗留问题，将null作为object类型处理)
7. ‘function’ --函数类型的变量或值
3. 简单的⽰例
console.log(typeof a); //‘undefined’
console.log(typeof(true)); //‘boolean’
console.log(typeof ‘123’); //‘string’
console.log(typeof 123); //‘number’
console.log(typeof NaN); //‘number’
console.log(typeof null); //‘object’
数组常⽤⽅法
join() （数组转字符串）
数组转字符串，⽅法只接收⼀个参数：即默认为逗号分隔符（）
var arr=[1,2,3,4];
console.log(arr.join());//1,2,3,4
console.log(arr.join(":"));//1:2:3:4
console.log(arr);//[1,2,3,4]，原数组不变
push()：⽅法可向数组的末尾添加⼀个或多个元素，并返回新的长度。
pop()：⽅法⽤于删除并返回数组的最后⼀个元素。
var arr=[1,2,3,4];
//push
var push_arr=arr.push("Tom","Sun");
console.log(arr);//[1,2,3,4,"Tom","Sun"];
console.log(push_arr);// 6
//pop
var pop_arr=arr.pop();
console.log(arr);//[1,2,3,4,"Tom"];

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。