前端高級軟件工程師筆試題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)
}
}