美团前端实习一面
美团前端实习一面,面试时长约38分钟
# 简历相关
# 自我介绍
# 介绍项目
- 项目中遇到的问题,怎么解决的
- 怎么和后端进行持续的数据交互
# JavaScript
localStorage和sessionStorage的区别
# localStorage
- 永久存储机制:将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,
- 浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用
# sessionStorage
- 跨会话存储机制:将数据保存在session对象中。
- session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间
- 存储的数据不受页面刷新的影响,但只能在最初存储数据的页面使用,在多页应用程序中的用处有限
捕获和冒泡与事件代理
- 事件代理(Event Delegation),又称之为事件委托。是JavaScript中常用绑定事件的常用技巧
- 事件传播
- 捕获阶段:从window对象传导到目标节点(上层传到底层)称为“捕获阶段”(capture phase),捕获阶段不会响应任何事件
- 目标阶段:在目标节点上触发,称为“目标阶段”
- 冒泡阶段:从目标节点传导回window对象(从底层传回上层),称为“冒泡阶段”(bubbling phase)。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层
js判断数据类型
- typeof,只能判断简单数据类型,不能具体区分object
- 对于基本类型,除 null 以外,均可以返回正确的结果。
- 对于引用类型,除 function 以外,一律返回 object 类型。
- 对于 null ,返回 object 类型。
- 对于 function 返回 function 类型
- instanceof:instanceof 检测的是原型
- constructor:当一个函数F被创建时,JS引擎会为其添加prototype原型,然后在原型上添加一个constructor属性,并让其指向F的引用。也就是说F.prototype.constructor === F // ---> true
- toString() :toString 方法默认返回其调用者的具体类型,更严格的讲是toString运行时,this指向的对象类型
箭头函数和普通函数的区别
- 箭头函数没有this,所以需要通过查找作用域链来确定this的值,这就意味着如果箭头函数被非箭头函数包含,this绑定的就是最近一层非箭头函数的this
- 箭头函数没有自己的arguments对象,可以在箭头函数中使用rest参数代替arguments对象,来访问箭头函数的参数列表
- 不能通过new关键字调用,同样也没有new.target值和原型
- 箭头函数继承而来的this指向永远不变,.call()/.apply()/.bind()无法改变箭头函数中this的指向
- 箭头函数不能作为构造函数使用
- 箭头函数没有原型prototype
- 箭头函数不能用作Generator函数,不能使用yeild关键字
- 箭头函数不具有super,不具有new.target
var let const 变量提升的理解
# var
- var存在变量提升
- 函数作用域
- 可以重复声明
- 全局声明时会变成windows对象的属性
# let
- 块级作用域
- 全局声明时不会变成windows对象的属性
- 不能进行条件式声明(判断是否声明然后再确定是否声明),因为会声明在条件符合的块级作用域里
- let没有变量提升
- 不允许重复声明
- 暂时性死区:js引擎会注意到后面的let声明,但并没有变量提升,会抛出ReferenceError,而不是not defined
# const
- 块级作用域
- 全局声明时不会变成windows对象的属性
- 没有变量提升
- 不允许重复声明
- 声明变量时必须赋值
- 变量不能修改,但仅限于变量引用的对象,对内部属性的修改不报错
# 变量提升的理解
var变量的时候会把所有变量声明都拉到函数作用域的顶部
# 浏览器
如何解决跨域
- 目前最常用的 CORS:服务器端可以在 HTTP 响应头上通过 Access-Control-Allow-(Origin/Headers/Methods/Credentials/) 等响应头字段设置允许访问该资源的请求源,请求头,请求方法,是否允许携带 cookies 等
- webpack 提供的 proxy:仅适用于开发阶段
- Nginx 添加请求头:允许的源很难动态更改
- JSONP
- 只允许 GET 请求,因此 URL 长度受限,不安全
- 需要服务器端进行配合
JSONP的处理流程
- 浏览器端声明需要执行的 callback 函数,比如叫 run
- 浏览器端动态生成 script 标签,将 src 属性指向目标 url 同时携带上参数 callback=run
- 服务器端接收到请求后将结果包装成 json 格式,同时返回字符串 run(json 格式的结果)
- 浏览器端接收到数据后就会执行相应的 run 函数
cors的处理流程
- 提到简单请求和非简单请求,只有非简单请求才会触发预过程
- 简单请求必须同时满足下面三个条件
- 请求方式只能是:GET、POST、HEAD
- HTTP请求头限制这几种字段:Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID
- Content-type只能取:application/x-www-form-urlencoded、multipart/form-data、text/plain
- 简单请求必须同时满足下面三个条件
- 浏览器首先发出一个 OPTIONS 请求,包含非简单请求中存在的请求信息,如请求方法,请求头,源等等
- 服务器端返回它所允许的上述内容,并且如果预检请求能够通过就返回 200 响应
- 浏览器接收到响应后,再判断是否真正发出非简单请求
# HTML/CSS
盒子模型
- 盒模型包括margin、border、padding、content四个部分,主要的设置属性是margin、border、padding
- 正常设置盒子模型的width时不包括padding和margin,当box-sizing设置为border-box时则包括padding和border
CSS选择符,权重
![]()
div中的img如何上下左右居中
# flex布局
- 利用flex的
alignItems:center
垂直居中 justifycontent:center
水平居中
# margin:auto
相对定位下,使用绝对定位将上下左右都设置为0,再设置margin:auto
即可实现居中
# 利用相对定位和绝对定位,再加上外边距和平移的配合
相对定位下,使用绝对定位,利用margin偏移外容器的50%,再利用translate平移回补自身宽高的50%即可
# 利用textAlign和verticalAlign
- 利用
textAlign:center
实现行内元素的水平居中 - 再利用
verticalAlign:middle
实现行内元素的垂直居中 - 前提是要先加上伪元素并给设置高度为100%
# webpack
- webpack的理解,如何打包的
- webpack怎么实现ES6到ES5
- webpack怎么配置参数
# VUE
VUE2.x和VUE3的区别 VUE2.X和VUE3的数据响应式原理区别
- 响应式原理的重写
- vue2 响应式是基于
Object.defineProperty
实现的,存在较大的问题- 对数组等集合类型的支持不佳
- 对嵌套属性的深层响应支持不佳
- 对新增属性的支持不佳)
- vue3 响应式是基于新的 API
proxy
实现的,功能更加强大
- vue2 响应式是基于
- 组合式 API 的引入,使 vue 可以写出更加解耦的代码
- vue3 各模块之间更加解耦,响应式相关封装成了 reactivity 包,组合式 API 相关封装成了
composition-api
包,因此可以按需引入了 - 对 typescript 的支持更好
VUE2.x怎么实现复杂数据结构的数据监听 VUE开发组件方面 Angular和VUE的区别,使用起来的 谈谈pinia
上次更新: 2023/03/27, 17:41:36