基于TOP-K的面试题解总结（7）

31.数组去重有哪些方式？手写数组去重

• 去重方式：
• set方法
• map方法
• 两次循环删除重复元素
• 使用indexof()判断是否唯一，若当前元素不是第一个就删除

 

32.如何实现元素水平垂直居中

• 设置父元素display属性为flex，然后设置justifiy-content：center；align-items：center。即实现水平垂直居中
• 设置父元素position:relative，然后设置子元素position：absolute；top：50%；left：50%；宽高为父元素一半，最后设置margin-left和margin-top为负的子元素宽高的一半；
• 设置父元素position相对定位，子元素position绝对定位，子元素设置transform:translate(-50%,-50%)

 

33.简述 CORS 的用途以及基本设置

• CORS: 使用额外的Http头来告诉浏览器，允许运行在一个orign(domin)上的web应用访问不同源服务器上的指定资源。
• CORS请求的两种方式：
• 简单请求：
• 请求方法是HEAD、GET、POST
• HTTP头部只有language、accept、content-type字段
• content-type只有三种：text/plain、multipart/form-data、application/x-www-form-urlencoded
• 使用CORS首部字段处理跨域权限
• 对于简单请求，浏览器会直接发送CORS请求。同时在header中添加请求头origin字段
• 预检请求（复杂请求）：
• 请求方法是PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH
• content-type: application/json
• 预请求会已OPTIONS形式发送，包含实际请求方法，Origin源域等

 

34.Vue 组件间是如何进行通信的？

• props/$emit（父子之间）：
• 父组件通过import引入子组件，在标签上添加要传递的属性，子属性通过props接受
• 父组件向子组件传递事件方法，子组件通过$emit触发时间，回调给父组件
• $eimt/$on（父子、兄弟、跨级）：
• 组件A、B通过.$emit(事件名，数据)将数据传递，组件C通过.$on(事件名，data=>{})接收
• $parent/$children、ref（父子）：
• $parent访问父实例
• $children/ref当前实例的直接子组件
• provide/inject（祖孙）：
• 祖先组件通过provide提供变量，然后子孙组件通过inject注入变量

 

35.CSS 实现三列布局

• 左右固定宽度，中间自适应：
• 绝对定位
• 容器宽度定500px
• 左：left：0；宽度定200px
• 中：margin距离左边200px
• 右：right：0；宽度定200px
• 自身浮动：
• 左：float：left，宽度定200px；
• 右：float：right，宽度定200px；
• 中：margin距离左边200px
• flex：
• 容器：display：flex；宽度500px
• 左：宽度定200px；
• 中：flex：1
• 右：宽度定200px；