自己出的一套前端笔试题

⾃⼰出的⼀套前端笔试题前端⾼级软件⼯程师笔试题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()
}
}
var obj2 = {
name:"李四",
say:obj1.say
}
obj2.say()
控制台输出为___(李四)
3.function a(){
= "张三"
}
function b(){
= "李四"
a.call(this)
console.log()
}
new b()
控制台的输出为____(张三)
4.在定义构造函数b，以原型继承的⽅式继承a，请在横线处补齐代码
}
a.prototype.say = function(){
console.log("我的名字"+)
}
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){
= "李四"
}
fun(obj)
console.log()
控制台的输出值为____(李四)
7.我们要在⼦组件⾥接收⽗组件传来的参数，请在横线处补齐代码<child message="hello!"></child>
ponent('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:{
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
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()
})
}
}
obj.say()
控制台的输出为___(张三)
3.var obj1 ={
name:"张三"
}
function fun(){
= "李四";
console.log()
}
fun.apply(obj1)
控制台的输出为___(李四)
4.var obj = {
name: "张三"
}
obj.__proto__.name = "李四"
console.log()
控制台的输出为___(张三)
5.如果控制台输出 "hello",请在横线上补齐代码function fun() {
return new Promise(function(resolve, reject){ setTimeout(function(){
})
})
}
fun().catch(function(value){
console.log(value)
})
6.console.log(0 === false)
控制台的输出值为____(false)
7.我们要在⼦组件⾥调⽤⽗组件的⽅法，请在横线处补齐代码
<button-counter v-on:increment="incrementTotal"></button-counter>
ponent('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(其中可能包含敏感信息)，发送到攻击者的服务器，攻击者就得到了博客阅读者的信息
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, 14
4...,写代码计算第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)
}
}。