首页 > 其他分享 >前端笔试题

前端笔试题

时间:2023-03-15 22:12:47浏览次数:34  
标签:function console name 前端 笔试 var fun log

前端高级软件工程师笔试题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.我们要在子组件里接收父组件传来的参数,请在横线处补齐代码

Vue.component('child', {
____(props): ['message'],
template: '{{ message }}'
})

8.现在需要在add函数理给input元素赋值,请在横线处补齐代码

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

9.当add函数第一次执行时,控制台输出_____(张三)

{{ msg }}

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.我们要在子组件里调用父组件的方法,请在横线处补齐代码

Vue.component('button-counter', {
template: '',
methods: {
incrementHandler: function () {
this.____($emit)('increment')
}
}
})

8.现在需要在add函数理给input元素赋值,请在横线处补齐代码

new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="22";
}
}
})
9.当add函数第一次执行时,我们需要控制输出"李四",请在横线处补齐代码

{{msg}}

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

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

三、综合题(共40分)

1.简述XSS攻击原理(5分)
答:
在博客里可以写文章,同时偷偷插入一段

标签:function,console,name,前端,笔试,var,fun,log
From: https://www.cnblogs.com/cat-eol/p/17220346.html

相关文章

  • 前端自动化测试jest
     持续集成和前端自动化测试持续集成是互联网软件开发上线流程中的核心一环,自动化测试是持续集成得以实现的核心步骤,缺乏了自动化测试,持续集成自然无从谈起。​在日常的......
  • 公众号前端访问后台500 疑难问题解决
     后台日志联调,发现前端根本无法进入后台方法中去经过仔细对比发现referrer请求过长在主设置页面增加<metaname="referrer"content="origin">配置问题解决 ......
  • WEB前端开发-蚂蚁金服电话面试-React
        记录一下自己面试的感触,上周投了杭州的蚂蚁金服,然后第二天早上的时候,就收到了面试的邀请,晚上7点到9点等待面试,自己心里面还是慌慌的,当时自己在上班,下午一下班就......
  • 前端实现玻璃卡片悬停动画
          <!doctypehtml><htmllang="zh-CN"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>玻璃卡片悬停</......
  • 前端架构工作
    工作中所涉及到的工作,也有一些PM的工作,比如:协调人员、拆分任务并分配给相关人员,把控工作进度、评审、变更管理等等。项目立项,资源申请(服务器资源、人员)需求评审(业......
  • 拿到大厂前端offer的前端开发是怎么回答面试题的
    什么情况会阻塞渲染?首先渲染的前提是生成渲染树,所以HTML和CSS肯定会阻塞渲染。如果你想渲染的越快,你越应该降低一开始需要渲染的文件大小,并且扁平层级,优化选择器。然......
  • 一文彻底搞懂前端缓存机制
    浏览器缓存步骤1)浏览器在加载资源时,先根据这个资源的一些httpheader判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。比如某个......
  • 前端常考面试题整理
    display:none与visibility:hidden的区别这两个属性都是让元素隐藏,不可见。两者区别如下:(1)在渲染树中display:none会让元素完全从渲染树中消失,渲染时不会占据任何空间;vi......
  • 2023秋招前端面试必会的面试题
    判断数组的方式有哪些通过Object.prototype.toString.call()做判断Object.prototype.toString.call(obj).slice(8,-1)==='Array';通过原型链做判断obj.__proto......
  • 前端经典面试题(有答案)
    作用域作用域:作用域是定义变量的区域,它有一套访问变量的规则,这套规则来管理浏览器引擎如何在当前作用域以及嵌套的作用域中根据变量(标识符)进行变量查找作用域链:作用域......