2020年4月大厂腾讯前端面经分享
- 2020 年 4 月 13 日
- 筆記
前言
本人很荣幸参加了一次腾讯大厂的一面，虽然结果不理想，但是总归是检测了一下自己，发现了自己的不足地方，以此督促自己加强学习。
本次面试共分为笔试题一个小时和面试一个小时。
一、编程题（请用es6实现编码）：
1、 二分查找
给定一个 n 个元素有序的（升序）整型数组 nums 和一个目标值 target ，写一个函数二分查找 nums 中的 target，如果目标值存在返回下标，否则返回 -1。
let arr = [1, 3, 5, 7, 9];
function search(nums, target) {
let left = 0;
let right = nums.length - 1;
while(left <= right) {
let mid = (right + left) / 2;
if (nums[mid] == target) {
return mid;
} else if (nums[mid] < target) {
left = mid + 1;
} else {
right = mid -1;
}
}
return -1;
}
console.log(search(arr, 7));
2、 编写一个异步查询等待结果的轮询组件
组件具体输入如下：
- 查询执行方法
- 轮询间隔
- 超时时长
- 最多轮询次数
组件输出： - 返回一个promise对象
- 查询方法执行无异常，则轮询结束，返回查询结果
解答：
// vue代码
data() {
return {
data: {}, // 请求结果
remainTime: 0, // 剩余限制时长
start: 0, // 开始时间
end: 0, // 请求得到数据的时间
}
}
mounted () {
// 请求之前计时 start
this.start = Math.floor(new Date().getTime()/1000);
this.query(50, 2, 10);
},
methods: {
// 只要轮询次数和最大限制时长任何一个达到阈值 就 停止轮询
query(num, interval, limitTime=60) { // 参数num：轮询次数 interval：定时器时间(s) l imitTime：最大限制时长(s)
let timer;
if (num > 1) {
return new Promise((resolve, reject) => {
let postParams = {
id: this.$route.params.id
}
Api.getArticleOne(postParams).then(res => {
this.data = res.data.data.content; // 这个只是接口返回的数据结构
this.end = Math.floor(new Date().getTime()/1000);
}, err => {
reject(err);
}).catch(err => {
console.log(err)
});
if (this.end !== 0) {
// 如果拿到数据了，就用当前的 剩余限制时长 - （结束时间 - 开始时间）
this.remainTime = limitTime - (this.end - this.start);
} else {
// 如果还没拿到接口数据 这个时候 end就为0 需要继续 轮询 这个时候的剩余时间还是 传过来的 限制时长
this.remainTime = limitTime;
}
if (this.remainTime <= 0) { // 如果剩余时间小于等于 0 或者 循环次数 为 1 就结束定时器
clearTimeout(timer);
return;
} else {
// 轮询一次 num就减少一次
num--;
this.remainTime = this.remainTime - interval; // 当前剩余时长 = 当前剩余时长 - 定时器
timer = setTimeout(() => { this.query(num, interval, this.remainTime)}, interval * 1000);
}
}).catch(err => {
console.log(err)
})
} else {
clearTimeout(timer);
return;
}
},
}
3、 逻辑题
共有60块砖，60人搬，男搬5，女搬3，两个小孩搬1块，一次搬完，需要小孩、男人、女人各多少人，有几种组合方案？
解答：
function solution() {
let x, y, z;
for(x =1; x < 12; x++) {
for(y = 1; y < 20; y++) {
z = 60 - x - y;
if (z%2 == 0) {
if (5*x + y*3 + z/2 == 60) {
console.log(x, y, z, '搬砖组合'); // 5 3 52
}
}
}
}
}
solution();
答案：只有一种方案：男人：5 ；女人： 3 ；小孩：52
二、问答题
1-5题
1. 请写出下面代码输出结果以及原因
var myname = "小明";
function showName(){
console.log(myname); // undefined
if(0){ var myname = "小红" }
console.log(myname); // undefined
}
showName();
2. 请写出下面代码输出结果以及原因
function letTest() {
let x = 1;
if (true) {
let x = 2;
console.log(x); // 2
}
console.log(x); // 1
}
letTest();
3. 请写出下面代码输出结果以及原因？并且用箭头函数实现
function bar() {
console.log(myName)
}
function foo() {
var myName = "腾讯1"
bar()
}
var myName = "腾讯2"
foo()；// 腾讯2
箭头函数：var foo = () => () => {
console.log(myName);
}
4. 请写出下面代码输出结果以及原因
var myObj = {
name : "腾讯1",
showThis: function(){
console.log(this);
var self = this;
function bar(){
self.name = "腾讯2";
}
bar()
}
}
myObj.showThis(); // myObject对象
console.log(myObj.name); // 腾讯2
console.log(window.name); // undefined
5. 请写出以下this指向情况：
// 情况1
function foo() {
console.log(this.a) //1
}
var a = 1
foo();
this指向window全局
// 情况2
function fn(){
console.log(this);
}
var obj = {fn: fn};
obj.fn(); // this => obj this指向obj对象
// 情况3
function CreateJsPerson(name,age){
// this是当前类的一个实例p1
this.name=name; // => p1.name = name
this.age=age; // => p1.age = age
}
var p1=new CreateJsPerson("尹华芝",48);
// 情况4
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a: 1, b: 3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 this指向o对象
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 this指向o对象
// 情况5
<button id="btn1">箭头函数this</button>
<script type="text/javascript">
let btn1 = document.getElementById('btn1');
let obj = {
name: 'kobe',
age: 39,
getName: function () {
btn1.onclick = () => {
console.log(this);//obj
};
}
};
obj.getName();
this指向obj，因为箭头函数的this是在外层函数定义的时候就指定了
