自己出的一套前端笔试题

前端高级软件工程师笔试题A卷

一、选择题(每题4分，共20分)

1.typeof [0,1] == _____ A
A.object B.array C.number D.string

2.关于session 和 cookie 描述不正确的是 C
A.sessionid是一种cookie
B.session的内容储存在服务端
C.session的过期时间有客户端决定
D.cookie只在客户端存储

3.下列关于跨域描述不正确的是 C
A.跨域可以通过服务端代理实现
B.跨域可以通过jsonp实现
C.所有的跨域方式必须设置crossDomain为true 才能携带cookie
D.跨域是前端后端分开部署的基础

4.下列提高性能方法错误的是 C
A.合并压缩Js文件，减少网络请求耗时
B.尽量减少Dom操作，提高js执行性能
C.在引用js文件的时候加入版本号，例如test.js?1000
D.减少Dom的复杂度

5.下列关于Vue的描述错误的是 D
A.支持服务端渲染
B.异步渲染
C.双向绑定
D.代码必须要编译后才能运行

二、填空题(每题4分，共40分)

1.function fun(){
temp = 0;
}
fun()
console.log(temp)
控制台的输出为____(0)

2.var obj1 = {
name:"张三",
say:function(){
console.log(this.name)
}
}
var obj2 = {
name:"李四",
say:obj1.say
}
obj2.say()
控制台输出为___(李四)

3.function a(){
this.name = "张三"
}
function b(){
this.name = "李四"
a.call(this)
console.log(this.name)
}
new b()
控制台的输出为____(张三)

4.在定义构造函数b，以原型继承的方式继承a，请在横线处补齐代码
function a(){
this.name = "张三"
}
a.prototype.say = function(){
console.log("我的名字"+this.name)
}
function b(){
this.age = 18;
}
b.prototype = ____(new a())

5.如果控制台输出 "hello",请在横线上补齐代码

function fun() {
return new Promise(function(resolve, reject){
setTimeout(function(){

_______(resolve("hello"))
})
})
}
fun().then(function(value){
console.log(value)
})

6.var obj = {
name:"张三"
}
function fun(o){
o.name = "李四"
}
fun(obj)
console.log(obj.name)
控制台的输出值为____(李四)

7.我们要在子组件里接收父组件传来的参数，请在横线处补齐代码
<child message="hello!"></child>
Vue.component('child', {
____(props): ['message'],
template: '<span>{{ message }}</span>'
})

8.现在需要在add函数理给input元素赋值，请在横线处补齐代码
<div id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</div>

new Vue({
el: "#app",
methods:{
add:function(){
this.______($refs.input1).value ="22";
}
}
})

9.当add函数第一次执行时，控制台输出_____(张三)
<div id="app">
<span ref="test">{{ msg }}</span>
<button @click="add">添加</button>
</div>

new Vue({
el: "#app",
data:{
msg:"张三"
},
methods:{
add:function(){
this.msg = "李四"
console.log(this.$refs.test.innerHTML)
}
}
})

10.队列是先进___(先)出,栈是先进___(后)出

三、综合题(共40分)

1.简述用服务代理跨域的原理(5分)
答：
客户端发送请求时,不直接到服务器
再将请求发送到服务器
比如部署在a域名下前端代码，发送请求时，先发到本域名下的服务代理，服务代理再根据配置的规则，把请求转到到b域名下，
整个过程中，前端请求感觉不到b域名的存在

2.为什么Vue根实例data是一个对象，而组件中data必须是一个函数？(10分)
答：
根实例中只有一个data属性，共用该data。
组件中
因为如果data是一个对象，对象是引用类型，那复用的所有组件实例都会共享这些数据，就会导致修改一个组件实例上的数据，其他复用该组件的实例上对应的数据也会被修改。
如果data是一个函数，函数虽然也是引用类型，但是函数是有作用域的，函数内的变量不能被外部访问到，这样每个组件实例都会有个独立的拷贝同时又因为函数作用域的限制修改自己的数据时其他组件实例的数据是不会受到影响的

3.有一个字符串数组，var arr = ['11','22','aab','11',...]，里面有重复元素，写一个去重函数(10分)

答：
function fun(list) {
var map = {}
var nList = []
for (var i = 0; i < list.length; i++) {
var value = list[i]
if (!map[value]) {
map[value] = 1
nList.push(value)
}
}
return nList
}

4.已知jQuery 有类似的链式调用用法(15分)
$("#test").show().hide()
扩展自定义方法的写法类似
$.fun.xxxx=function(value){
return this
}
请写出实现jQuery 这种链式调用的示意代码
答：
var $ = function (selector) {
var dom = selector
if (typeof selector === 'string') {
dom = document.querySelector(selector)
}
function _jq() {
this[0] = dom
}
_jq.prototype = $.fun
return new _jq()
}
$.fun = {}

前端高级软件工程师笔试题B卷

一、选择题(每题4分，共20分)

1.typeof 4.5 == _____ D
A.float B.string C.Infinity D.number

2.关于session 和 cookie 描述不正确的是 A
A.sessionStorage是seesion的升级版
B.sessionid存储在客户端
C.session 会比cookie 储存更多信息
D.session的安全性高于cookie

3.下列关于jsonp 描述不正确的是 C
A.jsonp跨域需要服务端配合
B.jsonp跨域需要设置crossDomain为true 才能携带cookie
C.jsonp 是ajax 请求的一种，类似 get post
D.jsonp具有良好的兼容性，不需要现代浏览器支持

4.下列提高性能方法错误的是 A
A.用Vue双向绑定 代替原生Dom操作
B.把前端代码部署到多台服务器上，进行负载均衡处理
C.减少向后端发送请求的数量
D.把常用的，比较固定的信息放在客户端缓存

5.下列关于React的描述错误的是 C
A.支持服务端渲染
B.异步渲染
C.双向绑定
D.代码必须要编译后才能运行

二、填空题(每题4分，共40分)

1.function fun() {
var temp = 0;
}
fun()
console.log(typeof temp)
控制台的输出为___(undefined)

2.var obj = {
name:"张三",
say:function(){
setTimeout(()=>{
console.log(this.name)
})
}
}
obj.say()
控制台的输出为___(张三)

3.var obj1 ={
name:"张三"
}
function fun(){
this.name = "李四";
console.log(this.name)
}
fun.apply(obj1)
控制台的输出为___(李四)

4.var obj = {
name: "张三"
}
obj.__proto__.name = "李四"
console.log(obj.name)
控制台的输出为___(张三)

5.如果控制台输出 "hello",请在横线上补齐代码

function fun() {
return new Promise(function(resolve, reject){
setTimeout(function(){

_______(reject("hello"))
})
})
}
fun().catch(function(value){
console.log(value)
})


6.console.log(0 === false)
控制台的输出值为____(false)

7.我们要在子组件里调用父组件的方法，请在横线处补齐代码
<button-counter v-on:increment="incrementTotal"></button-counter>
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
methods: {
incrementHandler: function () {
this.____($emit)('increment')
}
}
})

8.现在需要在add函数理给input元素赋值，请在横线处补齐代码
<div id="app">
<input type="text" ____(ref)="input1"/>
<button @click="add">添加</button>
</div>

new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="22";
}
}
})
9.当add函数第一次执行时，我们需要控制输出"李四"，请在横线处补齐代码
<div id="app">
<span ref="test">{{msg}}</span>
<button @click="add">添加</button>
</div>

new Vue({
el: "#app",
data:{
msg:"张三"
},
methods:{
add:function(){
this.msg = "李四"
this.______($nextTick)(() => {
console.log(this.$refs.test.innerHTML)
})
}
}
})

10.描述算法性能的两个重要指标是____(空间)复杂度和____(时间)复杂度

三、综合题(共40分)

1.简述XSS攻击原理(5分)
答：
在博客里可以写文章，同时偷偷插入一段<script>代码
发布博客，有人查看博客内容
打开博客时，就会执行插入的js攻击代码
在攻击代码中，获取cookie(其中可能包含敏感信息)，发送到攻击者的服务器，攻击者就得到了博客阅读者的信息

2.new Vue({
el: "#app",
data:{
msg:"张三"
},
methods:{
add:function(){
console.log(this.msg)
}
}
})
我们知道，this的指向只函数所在的对象，上面代码中 add函数所在的对象为methods，
但是在add里面通过this可以访问data对象的内容，为什么？

答:
Vue 在创建组件对象或执行 new Vue的时候 会把 data 和 methods扁平化放在一个对象上
例如上面会变成这种形式
{
children: [],
$el: div#app
...
msg: (...)
add: ƒ n(n)
}
3.已知斐波拉契数列1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...,写代码计算第100项的值

答：
function fib(num) {
if (num === 0) return 0;
if (num === 1) return 1;
return fib(num - 2) + fib(num - 1);
}
4.有未知函数fun 可以实现下面功能
var list= [0,1];
fun(list)
调用数组的push方法，除了可以给数组增加相外，还可以在控制台打印出新增加的项，请写出实现函数fun的示意代码
list.push(5)
答：
function fun(list) {
var push = list.push;
list.push = function (value) {
push.call(this, value)
console.log(value)
}
}