前端面试题十八@杨志刚

移动端1px问题，为什么会有？如何解决？

因为在移动端，由于屏幕分辨率的不同，现在分为一倍屏，二倍屏，三倍屏。在不同的分辨率上，有可能1像素，被渲染成两个像素，或者三个像素点，所有实际写代码时，写border:1px solid red;时，1px可能被渲染为2px或者3px

1px的解决方案

1.先使用伪类元素实现边框效果，然后通过媒体查询来操控transform（）: scale来适配不同分辨率

2.使用border-image来代替border

3.使用viewport+rem

解释jsonp的原理

动态创建 script 标签，在请求一个带参网址来实现跨域通信

在工作中你是如何优化自己的代码的？

命名规范；

注释覆盖率50%以上；

避免全局变量；

避免修改原生API；

拆分函数，避免函数过于臃肿；

函数专注于做一件事情；

模块化封装；

组件化开发；

对于常量始终保持先定义后使用；

对于两个分支的判断，使用三目运算符，对于多个分支的判断使用switch语句；

减少DOM操作，减少页面重绘；

尽可能使用 === 而不是 ==，避免隐式转换。

axios是什么？如何使用？描述其实现登录的流程

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1.支持promise

2.提供了一些并发请求的方法

3.提供拦截器

4.可以实例化，进行基础配置

5.提供支持

当我点击登录得时候，我先判断我输入的值是否是符合规则的，如果符合，就把参数拼到接口上，然后请求，它会返回一个token值，我把token值存储在cookie中，在全局路由守卫中，当我要访问一个需要登录才可以进入的路由的时候，我就判断cookie中有没有这个token值，如果有，就进入这个路由，没有就重新登录

用JS去掉数组里面重复的数据，并且打印出来

  var arr = [a,b,c,d,d,e,a,b,f,g]

function unique5(arr) {

            var newArr = []

            for (var i = 0; i < arr.length; i++) {

                if (!newArr.includes(arr[i])) {

                    newArr.push(arr[i])

                }

            }

            return newArr

        }

        console.log(unique5(arr));