前端可能问到的⾯试题（ts,js,css,es6）
1.void,null,undefined，never,NaN
void:⽆返回值，只能赋值undefined和nulljs脚本编程入门
null：空值，表⽰不存在
undefined：未定义，声明了但没有赋值，对象没有赋值的属性，对象没有返回值
never：永不存在的值的类型，是抛出异常或根本没有返回值的函数表达式的返回值类型
NaN：和任何值都不相等，包括⾃⾝
const：修饰的常量是静态属性。声明时必须赋值，赋值后不能再改变，实际上是变量⾄指向的内存地址所保存的数据不改动，对于简单类型，值就保存在变量指向的内存地址。对于复合类型的数据(引⽤类型)，const只能保证这个指针是固定的，⾄于指针指向的数据结构是否可变就不能控制。
readonly ：修饰的常量是动态属性(值在运⾏的时候获得)。可以在声明或构造函数中初始化
3.接⼝和泛型
接⼝：定义了要遵循的类的语法，实现接⼝的类必须实现它的所有成员。不同类之间公有的属性和⽅法可以抽象为⼀个接⼝
泛型：解决类，接⼝，⽅法的复⽤性（传⼊什么类型就返回什么类型），以及对不特定数据类型的⽀持
4.匿名函数和箭头函数
匿名函数：声明是没有任何命名标识符的函数，在运⾏时动态声明的，可以接受输⼊和返回输出，在初始创建之后通常是不可访问的
let fun=function(x:number,y:number):number{
return x+y;
}
箭头函数：相当于匿名函数并且简化了函数的定义。没有prototype原型，所有箭头函数本⾝没有this，this在箭头函数中已经按照词法作⽤域绑定了,this指向是固定的。没有构造函数
箭头函数的this指向该函数所在的作⽤域指向的对象
5.findindex()，indexof()，forEach()
findindex()对于空数组不执⾏，也不使适⽤于字符串。范围更⼴，可以根据不同条件进⾏查询。返回的是符合查询条件的第⼀个值的索引.
let arr =[1,1,2,2,8,8,5,4]
function check(a){
return a>1
}
let result = arr.findIndex(check)
console.log(result)//2
indexof()返回某个指定的字符串值在字符串中⾸次出现的位置。空数组和字符串都会执⾏。
forEach() 对于空数组不执⾏，⽤于调⽤数组的每个元素，并将元素传递给回调函数。
6.浏览器重定向页⾯，浏览器打开新页⾯
重定向页⾯
window.location.href="www.baidu/"
place("www.baidu/")
打开新页⾯，窗⼝
window.open("www.baidu/")
7.splice()与slice()
splice(2,7) 表⽰从索引2开始的位置，截取7个长度，会返回截取后的数据
slice(2,7) 表⽰从索引2开始的位置，截取到6索引的位置(不包含7)，不会改变原数组
8.promise
promise：是⼀个构造函数，可以实例化promise实例。有两个函数resolve（成功时的回调函数）和reject（失败后的回调函数）。在promise的构造函数的prototype属性上有then()⽅法。
9.px,em,rem
px：像素px是相对于显⽰器屏幕分辨率⽽⾔的。缺点没有弹性,IE可能不兼容
em：参考物是⽗元素的font-size，具有继承的特点。相对于当前对象内⽂本的字体尺⼨。如当前对⾏内⽂本的字体尺⼨未被⼈为设置，则相对于浏览器的默认字体尺⼨。
rem:rem是相对于根元素html, 不会被它的⽗元素影响
10.css选择器
标签选择器div 类选择器. id选择器# ⼦类选择器> 兄弟选择器~ 全局选择器* 相邻选择器+ 包含选择器 伪类选择器(:hover nth-child(n)：)伪类(before,after)与伪类选择器根本区别：是否创建了新元素
11.position有哪些属性
relative：相对于原来位置移动，元素设置此属性之后仍然处在⽂档流中，不影响其他元素的布局
absolute：元素会脱离⽂档流，如果设置偏移量，会影响其他元素的位置定位。绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）
fixed：相对于浏览器窗⼝，⽣成固定定位
inherit：继承⽗元素的position 属性的值
static：默认值。没有定位，元素出现在正常的流中
sticky：粘性定位，该定位基于⽤户滚动的位置。
12.垂直⽔平居中
<body>
<div id="aaa">
<div id="bbb"></div>
</div>
</body>
⽅法⼀ 相对绝对定位
body{
margin: 0px;
padding: 0px;
}
#aaa{
position: relative;
width: 500px;
height: 500px;
background: red;
}
#bbb{
position:absolute;
width: 300px;
height: 300px;
background: pink;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
⽅法2 flex布局
body{
margin: 0px;
padding: 0px;
}
#aaa{
display: flex;
width: 500px;
height: 500px;
justify-content: center;
align-items: center;
background-color: red;
}
#bbb{
width: 300px;
height: 300px;
background-color: pink;
}
13.清除浮动
⽅法⼀：添加额外标签，并在标签中使⽤clear:both （不推荐）
⽅法⼆：添加伪类元素(::after)，设置clear:both。注意必须块级元素且IE8以上
14.⾏内元素与块级元素
块级元素：独占⼀⾏，默认情况下，其宽度⾃动填满其⽗元素宽度
块级元素可以设置width,height，margin，padding
⾏内元素：不会独占⼀⾏，⾏内元素设置width,height属性⽆效，它的长度⾼度主要根据内容决定。⾏内元素的margin和padding属性⽔平⽅向有效果，垂直⽅向没有效果
15.js与ts的区别
ts是js的超集。js是脚本语⾔，ts是⾯向对象编程语⾔。ts⽀持可选参数，静态类型，接⼝，js不⽀持。ts在编译时就能报错，js运⾏时才暴报错。ts是强类型语⾔，可以明确知道参数类型。
16.axios,ajax,fetch
axios 基于promise⽤于浏览器和node.js的http客户端。是对ajax的封装，安全性更⾼。有then链，可以异步编程
function Callback<T>(promise: Promise<T>){
return promise
.then((data)=>{ data })
.
catch((err)=>{ err })
}
function test(){
return (""))
}
fetch只对⽹络请求报错，对400，500都当做成功的请求，需要封装去处理，是原⽣js，没有使⽤XMLHttpRequest对象
ajax底层使⽤XMLHttpRequest，
Ajax引擎在客户端运⾏，特点是实现局部刷新，⽀持异步请求的技术。不⽀持浏览器back，暴露了与服务器交互的细节
XmlHttpRequest可以在使⽤JavaScript向服务器提出请求并处理响应，⽽不阻塞⽤户。通过XMLHttpRequest对象，Web开发⼈员可以在页⾯加载以后进⾏页⾯的局部更新。
$.ajax({
type:'POST',
url: url,
data: data,
dataType: dataType,
success:function(){},
error:function(){}
});
17.http状态码
2xx：服务器成功处理请求
例如：200 (成功)表⽰客户端发送的请求在服务器被正常的处理了。
3xx：状态码⽤于重定向
例如：301 永久性重定向，请求的资源被分配了新的URI，以后都使⽤这个。
302 临时性重定向，请求的资源被分配了新的URI，本次使⽤这个。
4xx：请求错误，客户端或许有错误
例如：404 服务器不到资源 403 请求的资源访问被拒绝
5xx：服务器错误
例如：500 服务器执⾏请求时发送异常 503 服务器暂时⽆法处理请求
18.a标签的href和target属性
href属性⽤于指定超链接⽬标的url
target属性规定在何处打开链接⽂档
_blank 在新窗⼝打开链接
_self 在当前窗⼝打开链接(默认)
_top 在整个窗⼝中打开链接
_parent 在⽗框架集中打开链接
alt属性规定在图像⽆法显⽰时的替代⽂本
title属性规定的是在⿏标以上元素时显⽰的⽂本
19.for in 与 for of
for in 适合遍历对象，数组，通常⽤来遍历对象的键名，原型链上所有属性都会呗访问，⽤hasOwnProperty()解决for of （es6）适合遍历树，数组，数组对象，字符串等，通常⽤来遍历键值
20.for循环与setTimeout()
21.⽹站的登录状态是如何保存的，完整的登录流程是什么？
通过cookie保存登录状态。cookie存储token，每次请求到后端服务器都会带上token，从⽽验证⽤户是否登录。
1.客户端请求后台登录接⼝。
2.后台验证通过后，将⽤户的登录状态保存⾄cookie并写⼊客户端。
3.客户端再次登录⽹站，请求login接⼝时，后台直接从客户端获取到该⽤户写⼊cookie的登录状态。
4.通过对该状态的验证，确认⽤户是否需要再次登录。
5.如cookie过期，则跳转⾄登录页；如未过期，则直接显⽰为已登录状态。
22.DOCTYPE作⽤
声明位于⽂档中最前⾯的位置，处于标签之前。可以告知浏览器⽂档使⽤何种规范解析页⾯(html,xhtml)
23.call,apply,bind
let a=[1,2,3,4,5]
console.log(Math.Max,call(null,2,3,4,5,6))//6
console.log(Math.Max,apply(null,[2,3,4,5,6]))//6
let b=Math.Max,bind(null,2,3,4,5,6)
b()//6
call和apply直接执⾏，bind事先将⽅法的this改为我们想要的结果，需要时再调⽤执⾏。apply的第⼆个参数是以数组形式传⼊的。call和bind以列表参数传递。
23.src,href
href是元素或⽂档与指定资源联通，需要的时候再引⽤
src是下载后嵌⼊构成⽂档直接内容
24. get post
get：长度限制为2k，参数在url可见，速度更快
post：没有长度限制，参数写在请求头⾥⾯，安全性更⾼，速度不如get（因为在第三次握⼿时，会发送post请求头，服务器才会返回100 continue ，客户端此时才发送数据。⽽get在第三次握⼿时就已经携带了数据）
25.三次握⼿
why：为了保证可靠的数据传输，防⽌⽆效的请求⼜发送到服务器。
ACK=1 确认号有效
SYN=1 请求建⽴连接
seq 序列号
ack 期望下⼀次接收到的序列号
26.jsonp跨域
客户端通过script标签的src属性发送请求，并且定义⼀个回调函数。服务器端响应请求后会传⼊参数动态执⾏回调函数，就实现了跨域。因为是script标签，所以返回的数据会直接当作js语⾔执⾏就会产⽣错误，所以需要回调函数的存在，关键是服务器返回的数据外层需要需要包裹⼀层函数
react 使⽤代理中间件 http-proxy-middleware实现跨域请求

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