table of Contents
The distal end surface side warp Tencent
EDITORIAL
Bloggers now a junior, a white front-end, on a recent essay issued a US group on one side of the face questions and considerations, where bloggers finishing her first Tencent February 29 and the first face questions problem-solving ideas, notes, interview we want to help.
Face questions related
Vertical center problem
Title
screen has a middle element A, with the increase in the width of the screen, need to meet the following criteria:
- A center of the screen to the vertical center element;
- A left and right margins of the screen element from each 10px;
- A text element inside the "A" of the font-size: 20px; horizontal vertical center;
- A height of the element is always 50% A width of the element; (if the element A can not handle may be implemented as fixed height of 200px)
Please html and css implemented
Problem-solving ideas
on this topic visit is mainly centered vertically measures, specific ways we can look for yourself, here put my own code. The main place is calculated using calc attributes to set the left and right margins, and then passing height can achieve 50% A width of the element height is always an element A
<!-- CSS -->
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.fa-area {
position: relative;
width: calc(100% - 20px);
height: calc(50% - 10px);
margin-left: 10px;
background-color: #376AF3;
}
.fa-area>div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 20px;
}
<!-- html -->
<div class="fa-area">
<div>A</div>
</div>
arguments
Title
function in an array of arguments is it? If not, how will it into real array?
Problem-solving ideas
on this topic investigated awareness of the arguments, and the call of use, and no mention of handwriting function call.
不是
Transformation protocol:
arguments = [].slice.call(arguments);
Implicit type conversion
Topic
Please state the result of the following code prints
if([] == false) {console.log(1);}
if({} == false) {console.log(2);}
if([]) {console.log(3);}
if([1] == [1]) {console.log(4);}Problem-solving ideas
this topic mainly on the knowledge of JS implicit conversion.
Notably, when using == time, JS will be converted into a number of data values on both sides, then == determination, then converted to bool value. Therefore, the first line is printed, the second line is not printed (the reason for this is that when the target number of revolutions, calls toString () method returns a string literals, js this string into a digital type, and this number is returned. this period can be found in the "JavaScript the Definitive Guide").
And if transferred directly bool empty array, then all the objects Object, when the determination condition used will be converted to true, the third row will print.
The fourth line, then the object is a reference type, looks the same two empty array, but actually two objects different address in memory are different, so the fourth line is not printed.
Here I was not quite understand, so played only answer according to their own imagination, but there is no reason to speak out, 2, 3 row.
answer:1 3
Asynchronous problem
Topic
Please state the result of the following code prints
async function async1(){
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2(){
console.log('async2');
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
});
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
Problem-solving ideas
this topic mainly on the induction of JS, JS knowledge of the mechanism of execution.
In fact, I do not have this problem a great chance, so allow me to put the interviewer asked me why after printing the next node environment, and then write the corresponding statement in accordance with Promise async1, look async2 of.
new Promise((resolve) => {
console.log('async1 start');
new Promise((resolve1) => {
console.log('async2');
})
}).then(() => {
console.log('async1 end');
})JS is a single-threaded language, it is performed in accordance with the order of execution of the statement. General tasks fall into two categories
- Sync task: the task queue on the main thread, the first performance
- Asynchronous task: the task is not performed immediately, on the task execution queue
In addition to these two, the task can be divided into the following two
- Macro task: the whole Code script, setTimeout, setInterval, etc.
- Micro tasks: Promise, process.nextTick etc.
In the event loop, the macro task after the implementation, will determine whether the internal micro perform the task, if it is executed perform micro tasks, if not then perform the next task of the macro.
So we can say analyze such topics: first implementation of macro code encountered micro task to join the queue waiting to be executed, after the implementation of the macro task execution queue according to the order, and then execute the code setTimeout queue.
answer:
script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout
this point
Subject
to minimal changes to resolve the following error code (you can use ES6)
const obj = {
name: 'jsCoder',
skill: ['es6', 'react', 'angular'],
say: function () {
for (var i = 0, len = this.skill.length; i < len; i++) {
setTimeout(function() {
console.log('N0.' + i + this.name);
console.log(this.skill[i]);
console.log('------------------');
}, 0);
console.log(i);
}
}
}
obj.say();
// 期望得到以下结果
1
2
3
N0.1 jsCoder
es6
------------------
N0.2 jsCoder
react
------------------
N0.3 jsCoder
angular
------------------
Problem-solving ideas
this problem major study on this point, the closure of knowledge.
Initially run time is being given, display array bounds, so the for loop in theichangedi + 1, thenvar i = 0changed tolet i = 0deal with the closure problem here (I do not wantsetTimeoutthe inside ofiall4), and thenthispoint to me is the use of anonymous function replaces thesetTimeoutfunction inside or outside we can usevar that = this;to bindthis.
Here is my answer:
const obj = {
name: 'jsCoder',
skill: ['es6', 'react', 'angular'],
say: function () {
for (let i = 0, len = this.skill.length; i < len; i++) {
setTimeout(()=> {
console.log('N0.' + (i + 1) + this.name);
console.log(this.skill[i]);
console.log('------------------');
}, 0);
console.log(i + 1);
}
}
}
obj.say();Handwriting bind
Topic
realize the bind method Function
Problem-solving ideas
that bind method in each blog in principle have a very detailed and analytical, so here I will just paste my answer, I hope light spray.
Function.prototype.bind = function (context) {
// 这里要存一下this而不能把返回里的函数对象转为匿名函数
// 因为这本身就是为了因为bind()函数发布在ES5中，不能很好的兼容所有浏览器
var self = this;
return function () {
return self.apply(context, arguments);
}
}Hand throttle function
Topic
achieve a throttling function
here to actually use the benefits of a throttle map is very complex, then let me write throttling.
At that time I will not write throttling function, but I'll write image stabilization, so I said the principles and the interviewer shake on my project, so I let the interviewer to write an anti-shake function, explained after the finish throttling function, let me write again. Have to boast about, the interviewer very patient, throttle and points are and I talked about, so I can feel at ease to write this I have not talked to function. A Method for Solving posted this question below.
Problem-solving ideas
window.onload = () => {
// 这两行代码大家可以不用管，是因为我想演示效果，所以大家随便用一个点击div的事件就可以
let myInput = document.getElementById('myInput');
let inputSet;
// 节流函数
myInput.addEventListener('click', () => {
if (!inputSet) {
// 第一次执行
console.log(myInput.value);
inputSet = setTimeout(() => {
inputSet = undefined;
}, 500);
}
})
}Algorithm title
Title
handwritten sorting algorithm
here is to ask the interviewer, you know what common sorting algorithm? Then I said bubble sort, quick sort, merge sort, Hill (Hill note that I will not, so do put behind that, if the interviewer to quickly merge or are interested in, and you will stop the do not say you do not understand the technology hard, or very down interviewer brownie points), then he asked me to write a quick sort, which I have written, but when the time of writing there is no sort of logic, the interviewer It has been accompanied combing ideas, but finally finished this algorithm.
Problem-solving ideas
function sort(arr, flag) {
function swap(arr, a, b) {
let temp = arr[a];
arr[a] = arr[b];
arr[b] = temp;
}
function partition(arr, left, right) {
// 基准
let pt = arr[right];
// 指针
let storeIndex = left;
for (let i = left; i < right; i++) {
if (arr[i] < pt) {
swap(arr, i, storeIndex);
storeIndex++;
}
}
swap(arr, right, storeIndex);
return storeIndex;
}
function quickSort(arr, left, right) {
if (left > right) return;
var storeIndex = partition(arr, left, right);
quickSort(arr, left, storeIndex - 1);
quickSort(arr, storeIndex + 1, right);
}
quickSort(arr, 0, arr.length - 1);
return arr;
}
console.log(sort([1, 4, 2, 10, 5, 7, 2, 4, 6, 7]));to sum up
In fact, on one side are some very basic question, but it will examine all the points in the doping problem, once you reach this regard, he will ask you this knowledge, so you need to extract the question he wanted asked knowledge, do not wait for him to ask : "this call can be used to do it?", but you're aware of it when he answered , and show directly.
But for you are not familiar with the technology, do not reveal hard-doped out in a series of nouns, the interviewer in case you feel that you might not be hard to ask this, you rub the top.
I hope everyone can harvest their own desired offer!