本身出的一套前端筆試題

前端高級軟件工程師筆試題A卷

1、選擇題(每題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.代碼必需要編譯後才能運行

2、填空題(每題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.隊列是先進___(先)出,棧是先進___(後)出

3、綜合題(共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、選擇題(每題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.代碼必需要編譯後才能運行

2、填空題(每題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.描述算法性能的兩個重要指標是____(空間)複雜度和____(時間)複雜度

3、綜合題(共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) } }