一、flex布局是啥?
答:Flex布局,可以简便、完整、响应式地实现各种页面布局,是一种弹性布局。(这个flex布局平常都有用到,突然问到就很蒙蔽了,不知道怎么说,然后就大概说了一些flex的属性,使用方法,不是很满意)
二、垂直居中方法
答:(1)设置margin:0 auto
(2)使用flex弹性布局
(3)使用transform:transition
三、数组常用方法
答:
(1)Array.map()
此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组
(2)
Array.forEach()
此方法是将数组中的每个元素执行传进提供的函数,没有返回值,注意和map方法区分,
改变原来的数组
(3)
Array.filter()
此方法是将所有元素进行判断,将满足条件的元素作为一个新的数组返回,没有改变原数组
(4)push
此方法是在数组的后面添加新加元素,此方法改变了数组的长度:
(5)shift
此方法在数组后面删除第一个元素,并返回数组,此方法改变了数组的长度:
(6) unshift
此方法是将一个或多个元素添加到数组的开头,并返回新数组的长度:
(7) pop
此方法在数组后面删除最后一个元素,并返回数组,此方法改变了数组的长度:
(8) isArray
判断一个对象是不是数组,返回的是布尔值
(9)toString
此方法将数组转化为字符串:
(10).splice
万能方法,可以实现增删改:
四、.map和foreach区别
forEach(),不改变原数组,不会返回一个新的数组,没有返回值
map(),不会改变原数组,会返回一个新的数组
五、vue虚拟dom?
它可以代表一个真实的 dom 节点。通过 createElement 方法能将 VNode 渲染成 dom 节点。简单地说,vnode可以理解成节点描述对象,它描述了应该怎样去创建真实的DOM节点。
六、
浏览器缓存机制
答:详细看https://blog.csdn.net/i13738612458/article/details/80383390
七、es6去重的方法
(1)[...newSet(test)]; es6 newSet + 解构赋值
(2)Array.from(new Set())
八、查看对象中是否有某个属性
(1)
- 使用in关键字
该方法可以判断对象的自有属性和继承来的属性是否存在。
(2)
- 使用对象的hasOwnProperty()方法
该方法只能判断自有属性是否存在,对于继承属性会返回false。
(3)
- 用undefined判断
自有属性和继承属性均可判断。
九、xss和csrf原因及预防方法
XSS 攻击是指攻击者在网站上注入恶意的客户端代码,通过恶意脚本对客户端网页进行篡改,从而在用户浏览网页时,对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。
预防方法:不要相信用户的任何输入。 对于用户的任何输入要进行检查、过滤和转义
csrfCSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任,可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器,从而在并未授权的情况下执行在权限保护之下的操作。
预防方法:可以在 HTTP 请求中以参数的形式加入一个随机产生的 token,并在服务器端建立一个拦截器来验证这个 token,如果请求中没有 token 或者 token 内容不正确,则认为可能是 CSRF 攻击而拒绝该请求。
十、vuex中action理解
action 和 mutations 也很类似,主要的区别在于mutations 只能是同步操作,,action 可以包含异步操作,而且可以通过 action 来提交 mutations
action 也有一个固有参数 context,但是 context 是 state 的父级,包含 state、getters
十一、get和post请求的区别
主要区别:GET产生一个TCP数据包;POST产生两个TCP数据包
官方回答:
-
GET在浏览器回退时是无害的,而POST会再次提交请求。
-
GET产生的URL地址可以被Bookmark,而POST不可以。
-
GET请求会被浏览器主动cache,而POST不会,除非手动设置。
-
GET请求只能进行url编码,而POST支持多种编码方式。
-
GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。
-
GET请求在URL中传送的参数是有长度限制的,而POST么有。
-
对参数的数据类型,GET只接受ASCII字符,而POST没有限制。
-
GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。
-
GET参数通过URL传递,POST放在Request body中。
十二、移动端1px变粗原因及解决方案
viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。
解决方法:这种方法的原理就是把原来元素的border去掉,然后用 :before 或者 :after 重做 border ,原先的元素相对定位,新做的 border 绝对,定位使用 transform 的 scale 把线条高度缩小一半,新边框就相当于0.5px