web前端面试题js部分
-
ES6新增内容有哪些
class、
module、
const/let、
箭头函数、
解构赋值、
扩展运算符、
promise -
什么是 Promise?Promise.all,Promise.race
Promise是es6中新增的对象,可以通过链式调用的方式解决回调地狱问题
.then接收成功的回调函数
.catch接收失败的回调函数
then可以实现链式调用,回调函数的参数为上一次then的返回值
Promise.all 接收一个Promise对象组成的数据,表示数组中所有的Promise对象都执行完之后触发
Promise.race 接收一个Promise对象组成的数据,表示数组中只要有一个完成就结束
-
箭头函数和一般函数的区别(this 指向)
-
如何改变 this 指向(bind,call,apply):call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加。
a、 call;通过在call方法,给第一个参数添加要把b添加到哪个环境中,简单来说,this就会指向那个对象。call方法除了第一个参数以外还可以添加多个参数
b、 apply;apply方法和call方法有些相似,它也可以改变this的指向。同样apply也可以有多个参数,但是不同的是,第二个参数必须是一个数组
c、 bind方法返回的是一个修改过后的函数。bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。 -
原型和原型链
通过function定义的对象有一个显式的原型prototype
所有的对象都有一个隐式的原型__proto__ -
闭包一个函数的内部的函数使用了外部函数的局部变量产生的一个对象;(在函数执行完后,局部变量还会存在)
-
递归(自己调用自己)
-
在 js 如何和服务器端实现数据通信?
a. ajax – XMLHttpRequest
b. websocket
c. form表单提交 – method; action -
开发的时候如何实现数据的实时更新?
a. websocket
b. 轮询(定时向服务器发送请求) -
你常用的定时器实现方式有哪些?
a. setInterval----间隔一定的事件之后调用一个方法,重复执行
b. setTimeout----等待一段时间之后执行一个方法,只执行一次(延迟执行)
c. requestAnimationFrame(推荐使用)----动画帧,和显示器的刷新频率有关(每秒钟60次) -
你在开发的时候怎么解决跨域问题?(不知道为什么前端面试会问这个问题?前端工作用不会遇到跨域问题)
a. cors
b. web服务器反向代理
c. jsonp -
事件传播流程?事件阻止
- DOM2级事件规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段
- 捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象
- 目标阶段:到达目标事件位置(事发地),触发事件;
- 冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。
- 事件阻止
- DOM2级事件规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段
//阻止浏览器的默认行为
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}
//阻止事件冒泡
function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
-
事件监听方式(on,addEventListener)有什么区别?
为某元素设定事件触发函数时,可能会觉得addEventListener和on事件的功能差不多,但是,addEventListener除了可以设置元素触发顺序外,还能多次绑定事件,因为 on 事件多次绑定的话会出现覆盖。 -
自定义事件
-
深拷贝和浅拷贝?(lodash)
- 浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用
- 深拷贝: 创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用
a. 实现深拷贝:递归;
b. 借用JSON对象的parse和stringify
-
本地存储(localStorage,sessionStorage,cookies)
-
数组中常用的操作:(find,findIndex,filter,sort,map,forEach,reduce,splice,join,push,pop,shift,unshift…)
-
字符串常见操作?(replace,substring,substr,split)
-
对象的常见操作(.keys,for in,动态设置属性)
-
常见的设计模式有哪些?(原型模式;发布订阅者模式;单例模式;工厂模式;组合模式)
-
面向对象?(封装、继承、多态)
- 封装:隐藏对象的属性和实现细节,仅对外提供公共访问方式,将变化隔离,便于使用,提高复用性和安全性。
- 继承:提高代码复用性;继承是多态的前提。
- 多态:父类或接口定义的引用变量可以指向子类或具体实现类的实例对象。提高了程序的拓展性。
-
get和post区别:
- post相较于get更安全一些
- post请求的数据在请求体中进行传递,get在url地址中传递。get没有请求体
- get请求每一次都是幂等的。get请求不会对数据产生副作用
- post请求传递的数据量相对于get更大。post请求传递的数据大小由服务器端做限制
- post常常用来做数据的新增
-
rest 风格的 api(get/post/put/delete)
-
http 请求常见状态码(2xx,3xx,4xx,5xx)
-
2XX 成功
201 (已创建) 请求成功并且服务器创建了新的资源。
202 (已接受) 服务器已接受请求,但尚未处理。
203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源。
204 (无内容) 服务器成功处理了请求,但没有返回任何内容。
205 (重置内容) 服务器成功处理了请求,但没有返回任何内容。
206 (部分内容) 服务器成功处理了部分 GET 请求。 -
3XX 重定向
301 (永久移动) 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。
302 (临时移动) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
303 (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。
304 (未修改) 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。
305 (使用代理) 请求者只能使用代理访问请求的网页。 如果服务器返回此响应,还表示请求者应使用代理。
307 (临时重定向) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。 -
4XX 客户端错误
400:(错误请求) 服务器不理解请求的语法,一般是参数错误
401 (未授权) 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。
403 (禁止) 服务器拒绝请求。
404 (未找到) 404:请求地址不存在,前端请求的接口而后台不存在此接口。
405 (方法禁用) 禁用请求中指定的方法。
406 (不接受) 无法使用请求的内容特性响应请求的网页。
407 (需要代理授权) 此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。
408 (请求超时) 服务器等候请求时发生超时。你的请求发送到该网站花的时间比该网站的服务器准备等待的时间要长,即链接超时。
409 (冲突) 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 (已删除) 如果请求的资源已永久删除,服务器就会返回此响应。 -
5XX 服务器错误
500 (服务器内部错误) 服务器遇到错误,无法完成请求。
501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。
502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。
503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。
504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。
505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。
-
-
http 和 https 有什么区别?
http(80)和https(443)的区别;端口号不一样;
https进行加密处理了 -
http 请求报文?请求报文:
请求行
请求头
请求体
请求体中的数据是有请求头中的content-type决定
下一篇: 十种方法解决--- 1-100累加和