便利蜂前端⾯试题2019秋季
便利蜂2019秋季(11⽉)web前端笔试题
前端技能试题v2.6
⼀、单选题（总共8分，每题2分）
1、以下不属于HTTP缓存控制协议头是（）
A. Cache-Control
B. Content-Type
C.Etag
D.Vary
考点：web缓存只http技术
答案：B
分析：已经系统了解了web缓存策略，总结了笔记，可以查看。Content-Type是响应头告诉浏览器返回的资源的MIME类型。
2、cookie特性下列说法正确的是（）
A. cookie没有长度限制，可以⽆限存储
B. 浏览器可以获取任⼀域名的cookie
C. cookie不需要⼿动处理，请求时会⾃动携带
D. 浏览器请求image时不会携带cookie
考点：web缓存只本地存储技术中的 cookie
答案：D
分析：cookie的个⼩、条数都有限制。不同浏览器表现也不⼀值。
⼤概都给4kb空间，每个域名50条左右。超出这阀门后，将会被忽略主键可以用update修改么
cookie获取有严格限制，不同域名（domain）下⽆法取的，同域名不同路径下（pach）下也不能取得。必须是同域名，和同路径（以及⽗⼦路径）
只要设置了cookie，浏览器每次请求均会⾃⼰携带。所以c对，d不对
3、cors中不属于简单请求的请求类型是（）
A. GET
B. HEAD
C.POST
D.DELETE
考点：跨域技术之cors
答案：C
分析：CORS即跨来源资源共享，通俗说就是我们所熟知的跨域请求。
众所周知，在以前，跨域可以采⽤代理、JSONP等⽅式，⽽在Modern浏览器⾯前，这些终将成为过去式，因为有了CORS。
CORS可以分成两种：简单请求、复杂请求。⼀个简单的请求⼤致如下
// HTTP⽅法是下列之⼀
HEAD
GET
POST
// HTTP头信息不超出以下⼏种字段
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type，但仅能是下列之⼀
application/x-www-form-urlencoded
multipart/form-data
text/plain
4、关于https以下描述错误的是（）
A. http是超⽂本传输协议，信息是明⽂传输。https则是具有安全性的ssl/tsl加密传输协议
B. https⼀直使⽤⾮对称加密协议来保证数据安全
C. http默认使⽤80端⼝，https默认使⽤443端⼝来进⾏通信
D. https公钥默认使⽤CA证书进⾏签名⽅式防⽌被修改
考点：⽹络传输协议之https
答案：D
分析：考察https相关知识点。https证书需要⾃⼰申请，默认没有
⼆、多选题（总分20分，每题4分）
1、已知
// finally⽅法的回调函数不接受任何参数，所以data参数⽆意义，永远是undefined
fn.finally((data)=>{
console.log(data);
});
请选择正确的fn，保证打印输出为‘我爱中国’（）
A.
fn = new Promise((res,rej)=>{
setTimeout(()=>{
res('我爱中国');
});
// 第⼀步：
// promise⼀旦状态改变就不会再变，所以上边定时器没有意义，将只会执⾏rej，
// 加了个return是防⽌构造函数内之后的代码执⾏，这⾥return后边没代码，所以没有意义，⼲扰视觉
return rej('我爱中国');
}).then(
data => {
solve(data);
},
data => {
/
/ 第⼆步：
// 这⾥抛出的异常，⼜没有catch处理，所以会报错，此函数内程序终⽌，但是不影响外边的（⽐如finally）throw 'I LOVE CHINA';
}
)
//第三步执⾏题⽬代码finally
// 最终执⾏结果：先打印undefined，再报错
B.
//没有then处理状态改变，所以resolve也⽆意义，最后执⾏题⽬的finally
fn =  solve('我爱中国');
// 最终执⾏结果：打印undefined
C.
//触发了reject状态，
//但是then却没有第⼆个回调（其实连then都没有），所以会⾛到catch，并将值传⼊catch的回调内
fn = ject('我爱中国').catch((data)=>{//所以data是'我爱中国'
})
//接着⾛题⽬的finally
//最终执⾏结果：打印undefined
D.
//没有then的第⼆个参数，也没有catch，所以只会执⾏finall，最终打印undefined
fn =  ject('我爱中国');
答案：这题是个坑，没有⼀个对的选项
分析：
/*
Promise有三种状态，pending（进⾏中）、fulfilled（已成功，也叫做resolve）和rejected（已失败）
其状态⼀旦改变，就不会再变
*/
let pm = new Promise((resolve,reject)=>{
});
/*
Promise有3个实例⽅法then、catch、finally
then：状态变更会执⾏此函数，此函数传⼊两个回调（⾮必须全传）
*/
pm
.then(()=>{
//状态为resolve的回调
},()=>{
//状态为rejected的回调
})
.catch((e)=>{
//⽤于补货构造及其3个实例函数的异常，需要注意的是如果then中没有第⼆个参数也会⾛到catch
})
.finally(()=>{
//不管promise最后的状态，在执⾏完then或catch指定的回调后，都会执⾏finally⽅法指定的回调
})
考点：es6的Promise
2、以下JSX组件使⽤⽅式写法错误的是（）
A. <MyComponents.DataPicker color='blue'/>
B. <hello toWhat='world'/>
C. <components[props.storyType] store={props.story}/>
D. <Greeting {...props}/>
答案：B C
A属于点表⽰法，⽐如MyComponents是⼀个对象，⾥边有很多导出jsx元素的⽅法
const MyComponents = {
DataPicker:function(props){return '<div></div>'}
}
B选项不对，jsx明确规定，为区分与html元素。react的元素都必须以⼤写字母开头
C想考察在运⾏时选择，但是这种写法是错误的。如果你的确想通过表达式来确定 React 元素的类型，请先将其赋值给⼤写开头的变量。这种情况⼀般会在你想通过属性值条件渲染组件时出现。要解决这个问题，我们需要先将类型赋值给⼤写开头的变量就可以了。参考
const SpecificStory = components[props.storyType];
<SpecificStory story={props.story}>;
3、以下⽣明周期中，不可以setState() 的是（）
A. render() //不能写，会引起死循环
B. componentWillReceiveProps()
C. componentWillUpdate()// 不能使⽤，会引起死循环
D. componentDidMount() //可以，但是会警告。因为会引起重绘，但是此函数只执⾏⼀次。推荐在构
造或者⽤定时器包裹setState
答案：A  C
4、React三⼤原则是（）
A. 单⼀数据源
B. State是只读的
C.单项数据流
java代码批量替换D. 使⽤纯函数来执⾏修改
答案：A B D
分析：C是其核⼼概念
三、简答题（总分52分）
1、有如下代码
const MENU = {
'FE':'前端开发⼯程师',
'DEV':'后端开发⼯程师',
'QA':'测试开发⼯程师'
};
function getTestScore(...args){ //第⼀步：“数组的扩展运算符，将⼀个个参数反转为数组
const [userInfo = {}, type = 'FE'] = args; //第⼆步：数组的解构赋值，解构赋值时的默认值。
const { userId } = userInfo; //第三步：解构userInfo对象⾥边的userId属性
consle.log(`我的名字叫${userId}，职位是${MENU[type]}`); // 第四步：打印
};
请根据要求，分析答案。（如有异常，填写报错并指出报错代码段）
（1）getTestScore(); //我的名字叫undefined，职位是前端开发⼯程师
（2）getTestScore('DEV');//我的名字叫undefined，职位是前端开发⼯程师
（3）getTestScore(null,'QA');//Cannot destructure property `userId` of 'undefined' or 'null'
考点：es6 变量的解构运算符、es6的扩展运算符
答案：已在题⽬后标出
分析：⼀段针对⼀个分析，下边是具体
没有任何参数，所以第⼆步解构的⽆果，均⽤默认值。所以userInfo解构的userId为undefined，type为FE
只有DEV⼀个参数，这个参数将会被映射到userInfo上，⽽type依然是默认值。因为UserInfo被解构为字符串DEV所以会再被隐式转换为对象去解构userId，为undefined。type为FE
第三种情况，null不能被解构，直接挂了
2、有如下代码
class a {
name='a';
count=1;
getName(){
return 'a'+1;
serice是什么接口
}
getCount = () => {
unt;
}
}
class b extends a {
name='b';
count=2;
getName(){
return this.unt;
}
getCount = () => {
unt;
}
}
var c = new a();
var d = new b();
织梦网站源码被起诉
请写出函数返回值（10分）
（1）c.getName();// 'a1'
  Js中，字符串与任意数据类型⽤加号连接，都表⽰字符串的拼接。JS中+、+= 运算符既是算术运算符，也是字符串的连接符
（2）d.getCount();//2
　这⼀题没有难度，估计是靠我class基本语法
（3）Name;  d.getName();//b2
  delete操作只会在⾃⾝的成员（成员包含属性和⽅法）上起作⽤，
  如果你试图删除的成员不存在，那么delete将不会起任何作⽤，但仍会返回true。不会报错
  class中变量属性在⾃⾝成员内，但函数是定义在原型上的
  综上，删除对象d不存在的getName，其实⽆意义。根据原型知识，d会查到原型上的getName执⾏：b2
（4）d.__proto__.getName(); // NaN
  es6的继承，与如下写的还是有区别的
function E(){
this.name = 'e';
}
Name=function(){
console.log(this)
console.log(this.name)
}
function F(){
this.name = 'f'
}
F.prototype = new E()
Name=function(){
console.log(this)
console.log(this.name)
}
var f = new F();
View Code
  es6的继承，其实就是让⽗类的原型 = ⼦类的实例对象，但是跟如上传统写法⼜有区别，具体表现在
  如果⽗类有额外的（跟⼦类属性名称不同的）成员会将其属性添加到⼦类的成员属性上。传统不会融合到⼦类上⼦类b的原型对象 = a的实例。但是这个a的实例不包含成员属性。传统不会不包含⼦类的成员属性
  所以，d.__proto__其实就是⼀个不包含成员属性的a类的实例对象，
  然后a的实例对象去调⽤getName⽅法，该⽅法⾥不到成员属性name和count，就去a类的原型，发现依然没有，然后在向a的原型对象的原型对象上object，依然没有
最后就是undefined+undefined，最后是NaN
（5） d.__proto__.getCount(); //报错不到这个⽅法
  es6中的静态⽅法，并不会被转义到function的原型上，⽽是被定义到成员属性上。
因为⽤了extend，所以虽然getCount成为成员属性，但是通过类继承⽅式隐式创建的a实例，并⽆如上说的特性a的实例中并⽆成员属性，⾃然没有getCount，原型链也没有　
3、有如下代码，请填写执⾏效果（10分）
// 第⼀步：将异步代码放⼊宏任务的event table之中，
// 等时间到了，推⼊宏任务回调到event queue中，
// 等待第⼆轮开始的时候⾸先执⾏宏任务中的event queue中
setTimeout(()=>{
web前端基础面试题//第六步：（第⼆轮事件循环开始）打印1
console.log(1);
});
var data = {};
for (var i = 0; i < 10; i++) {
data[i] = function(){
//永远会是10，因为i是全局变量，for循环完毕，i是10
// ⽤let声明i或者⽤下边注释的⽅法利⽤闭包来保存变量就可以输出理想的值
console.log(i);
};
};
//    data[i] = ( function(i){
//      return function(){
//          console.log(i);
//      }
//    })(i)
// 第⼆步：将异步代码放⼊微任务的event table之中，
// 等执⾏完毕，推⼊微任务回调到event queue中，
// 等待第⼀轮同步代码执⾏完毕的时候，就去执⾏异步栈的微任务event queue中，即本轮event loop循环就执⾏var p = new Promise((res,rej)=>{
console.log(2);  //第三步：（第⼀轮事件循环）同步代码打印2
res(3);
});
//第五步：（第⼀轮事件循环）同步代码执⾏完毕，开始执⾏异步之微任务event queue
p.then(data=>{
console.log(data);
})
//第四步：（第⼀轮事件循环）同步代码打印10和undefined，其中undefined是函数的默认返回值
console.log(data['8']());
//打印顺序：2 10 undefined 3 1
4、请指出以下代码存在的问题（12分）；
const fetchDataList =()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
let result = [
{id:20190101,name:'张三'},svg图片长什么样
{id:20190102,name:'李四'},
]
resolve(result)
},2000)
})
}
import React from 'react';
class Page extends React.Component{
constructor(props){
super(props);
this.state = {
dataList:[]
};
}
componentDidMount(){
setInterval(()=>{
this.fresh()
},1000);
}
async fresh(){
const dataList = await fetchDataList();
console.log(dataList)
this.setState({dataList});
}
render(){
return(<div>
{this.state.dataList.forEach(item => (
<div>
<p>编号：{item.id}</p>
<p>名字：{item.name}</p>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。