前端進階軟體工程師筆試題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(){
a.prototype.say = function(){
console.log("我的名字"+this.name)
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函數第一次執行時，控制台輸出_____(張三)
<span ref="test">{{ msg }}</span>
el: "#app",
data:{
msg:"張三"
},
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卷
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
1.function fun() {
var temp = 0;
fun()
console.log(typeof temp)
控制台的輸出為___(undefined)
2.var obj = {
setTimeout(()=>{
console.log(this.name)
obj.say()
控制台的輸出為___(張三)
3.var obj1 ={
function fun(){
this.name = "李四";
fun.apply(obj1)
控制台的輸出為___(李四)
4.var obj = {
name: "張三"
obj.__proto__.name = "李四"
return new Promise(function(resolve, reject){
_______(reject("hello"))
})
fun().catch(function(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')
}
<input type="text" ____(ref)="input1"/>
this.$refs.input1.value ="22";
9.當add函數第一次執行時，我們需要控制輸出"李四"，請在橫線處補齊代碼
<span ref="test">{{msg}}</span>
add:function(){
this.msg = "李四"
this.______($nextTick)(() => {
console.log(this.$refs.test.innerHTML)
})
}
10.描述算法性能的兩個重要名額是____(空間)複雜度和____(時間)複雜度
1.簡述XSS攻擊原理(5分)
在部落格裡可以寫文章，同時偷偷插入一段<script>代碼
釋出部落格，有人檢視部落格内容
打開部落格時，就會執行插入的js攻擊代碼
在攻擊代碼中，擷取cookie(其中可能包含敏感資訊)，發送到攻擊者的伺服器，攻擊者就得到了部落格閱讀者的資訊
2.new Vue({
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)
var push = list.push;
list.push = function (value) {
push.call(this, value)
console.log(value)