[JavaScript知识库]前端面试题以及平时碰到的小问题

随便写随便看，随时补充，有不对的地方请指正

1.解决图片和文字并行，居中对齐
答：vertical-align:middle

2.rgba和opacity的区别
答：rgba作用于元素自身或者背景色，子元素不继承透明度
opacity：作用于元素自身以及元素的所有内容

3.js的数据类型
基础数据类型：undefined null number bolean string aymbol
引用类型：object array function

4.delete和vue.delete删除数组有什么区别
答：delete:只是被删除元素变成了empty/undefined，其他元素的键值还是不变，例如【1，empty，3，4】
vue.detele：只删除了key值，没有改变键值，例如【1，3，4】

5.v-show和v-if的区别
答：v-if是通过控制dom节点的存在与否控制元素的显示隐藏
v-show：是通过操作元素的display样式控制的
如果操作频繁使用v-show，如果运行是条件很少改变用v-if

6.vue组件传参
父子：父组件引入子组件v-bind绑定参数，子组件props接收参数
子父：使用$emit正常传参：(1)$router.name (2)router-link的to属性传参，$router.params接收（3）使用path匹配路由，query传参数，$router.query接收

7.懒加载和预加载（待详细补充）
懒加载：按需求加载，例如图片到了可视区域内才会加载，减少或者延迟请求次数
预加载：提前加载，查看是从本地缓存中渲染，牺牲服务器，有很好的用户体验

8.v-if和v-for的优先级
答：v-for>v-if,同时出现先执行v-for，在执行v-if，为避免浪费性能，外层添加templat，先判断在循环。例如，一个商品分类的商品列表，返回的数组length为0，就可以先v-if=“array.length > 0”时候在执行循环

9.判断js类型的方法
typeof：只能判断基础类型
object.property.toString.call：复杂数据类型也能返回相应的类型

console.log(Object.prototype.toString.call(''));//[object String]

instanceof：左边放你要判断的内容，右边放类型，用于检测构造函数的prototype属性是否出现在某个实例对象的原型链中

console.log({} instanceof Object);//true

10.js怎么进行深拷贝，深拷贝和浅拷贝的区别
答：js深拷贝方法： （1）递归，但是该方法写起来很复杂 （2）使用转json的方法，JSON.stringify(),然后使用JSON.parse()解析拷贝的数据 （3）通过jquery的extend（）方法
（4）object.assign()

区别：浅拷贝是拷贝了对象引用，原数据变化时，拷贝的数据跟着变化。深拷贝时申请了另一块内存存放，原数据变化时，拷贝的数据不会跟着变化

11.map和foreach的区别
map不会改变原数组的值，会返回一个新数组，使用场景改变数据值的时候
foreach（）针对每一个元素执行提供的函数，对数据的操作会改变原数组。使用数据：只是像用数据做一些事情。例如存入数据库或者打印出来

12.vue的watch（）方法深度监听
答：vue实例在实例化调用$watch(),遍历watch对象的每一个property。watch（）中有个deep属性，默认值false，要想深度监听必须改为true。使用场景，父组件引用子组件，父组件一旦数据又变化，子组件必须进行监听数据并进行实时更新

13.vue项目中做哪些优化
答：（1）路由懒加载 （2）减少http请求，尽量减少多个接口并发请求 （3）最好使用字体图标 （4）图片懒加载（到可视区域在加载） （5）组件优化。按模块划分路由。如组件复用，重复代码重复布局编写组件使用 （6）webPack打包优化（待补充）

14.cookies sessionStorage和localstorage区别
答：cookie数据大小不能超过4k。
cookie的数据可以自动传递到服务器，其他两个仅在本都保存
sessionStorage数据在当前浏览窗口关闭后自动删除
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

15.一个url从输入会发生什么？
答：（1）浏览器会先查看浏览器缓存-系统缓存-路由缓存，如果有缓存会直接显示页面内容
（2）如果没有缓存，在发送http请求前需要先解析域名，解析获取相应的ip地址
（3）浏览器像服务器发起tcp连接，浏览器建立tcp三次握手
（4）握手成功后，浏览器向服务器发送http请求，请求数据包
（5）服务器处理收到的请求，将数据返回至浏览器
（6）浏览器收到http相应，读取页面内容并进行渲染，解析html源码，生成dom树，解析css样式，js交互
（7）客户端和服务器交互，ajax查询

16.常见的HTTP状态码
答：2开头：请求成功，成功处理了请求的状态代码
3开头：请求重定向，表示要完成请求，需要进一步操做
4开头：请求错误，状态码表示请求可能出错，妨碍了服务器的处理
5开头：服务器错误。
常用：200：请求成功，204：无内容 ，400错误请求，401：未授权，403：服务器拒绝请求，404：找不到，408：请求超时，500：服务器内部错误