上海面试总结（一）

第一天面试，需要学习的地方有很多，在这里写一下面试官询问的问题，并查找到结果，希望下次面试可以用到，加油！

1. JavaScript的typeof返回那些数据类型

String（字符串）、Number（数值）、Object（对象）、Undefined（未定义）、Boolean（布尔值）

2. JavaScript的基本数据类型

String（字符串）、Number（数值）、Object（对象）、Null（空值）、Undefined（未定义）、Boolean（布尔值）

3. 操作节点

（1）操作节点的属性

getAttribute(“属性名”)
setAttribute(“属性名”)

（2）创建和插入节点

createElement(tagName)创建一个标签为tagName的新元素节点
A.appendChild(B) 把B节点追加到A节点的末尾
insertBefore(A,B) 把A节点添加到B节点之前

（3）删除和替换节点

removeChild(node) 删除节点
replaceChild(newNode, oldNode) 属性attr用其他节点替换指定的节点

4. $(document).ready和window.onload的区别

（1）执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行
$(document).ready()是DOM结构绘制完毕后就执行，不用等到加载完毕
（2）编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
（3）简化写法
window.onload没有简化写法

$(document).ready(function(){})可以简写为$(function(){})

5. v-if和v-show的区别

（1）实现方式
v-if是根据后面数据的真假判断，直接从DOM树上删除或者重建元素节点
v-show只是修改元素的css样式，也就是display属性值，元素始终在DOM树上
（2）编译过程
v-if切换有一个局部编译或卸载的过程
v-show只是简单的css切换
（3）编译条件
v-if是惰性的，只在初始条件为真时，才开始局部渲染
v-show是在任何条件下都被编译，然后被缓存
（4）性能消耗
v-if有更高的切换消耗，不适合做频繁的切换
v-show有更高的初始渲染消耗，适合做频繁的切换

6. html5新增的标签

（1）新增主体元素
article、section、nav、aside、time、pubdate
（2）新增非主体元素
header、footer、address、main
（3）新增功能元素
video、audio、source、canvas、embed
meter、progress
ruby
mark
（6）新增表单元素
email、url、date、time、month、week、number、range、search、color

7. 如何解决跨域问题

（1）response添加header
（2）JSONP（Ajax请求时，修改dateType: “jsonp”,并且新增jsop的属性值“backFunction”）
（3）HttpClien请求转发
（4）nginx转发（nginx-反向代理服务器，将客户端的请求分发到部署项目的tomact）

8. jsonp的核心

jsonp动态添加script标签用来调用服务器提供的脚本

9. 盒模型包括哪些

（1）内容(width, height)（2）padding(内边距)（3）margin(外边距)（4）border(边框)
改变盒模型的方式：box-sizing（content-box标准盒模型，border-box IE模型）

10. document.getElementById(“id”)与$("#id")的性能比较

document.getElementById(“id”)的性能比较好

11. 运行项目的时候怎样减少运行时间

（1）v-loading减慢table的渲染速度
（2）减少http请求
（3）减少DOM操作
（4）压缩图片
（5）v-if、keep-alive路由切换等缓存
（6）减少date初始变量，去掉不必要的冗余变量
（7）将js库进行打包优化

12. 清除浮动（解决父级塌陷问题）

（1）设置父级元素的高度
（2）父级添加伪类after

:after{
	content: ' ';
	display: block;
	clear: both;
}

（3）父级添加overflow属性 overflow: hidden;

13. js中怎么设置元素的属性值，jquery怎么设置元素的属性值

js：element.setAttribute("属性名", "属性值");
jquery: $("name").attr("属性名", "属性值");    
$("name").attr(value);

14. Vue中自定义指令

Vue.directive('指令名称', {
    钩子函数:function(函数){}
    // 钩子函数：bind、inserted、update、componentUpdate、unbind
    // 钩子函数中的参数 el、binding
    // binding.name; binding.value; binding.expression;
})

15. http的状态码

（1）200服务器正确返回响应
（2）500服务器内部错误
（3）404请求的资源不存在
（4）403没有访问权限

16. Vue封装组件的步骤

（1）使用webpack打包组件
（2）发布到npm
（3）进行单元测试

17. 组件传值

（1）父组件向子组件传值（通过属性的方式进行传值）
（2）子组件调用父组件的方法，并将值传给父组件（通过事件触发向子组件传值）

父组件：@方法="方法名"
子组件：this.$emit("方法名", "子组件的值")

（3）父组件调用子组件的方法，并将值传递过去

this.$refs.refName.方法(子组件的值)
this.$refs.refName.子组件data中的值（直接获取子组件的值）

18. Git上传步骤

（1）git add
（2）git pull
（3）git commit
（4）git push

19. ajax请求步骤

通过XMLHTTPRequest发送请求信息——服务器处理——JavaScript接收

20. “2019-01-01”转换成“2019/01/01”

var str = "2019-01-01"
str.replace("/-/g", "/")