Front end intern – Byte interview

This side of the byte is still relatively simple, and the general company side is not too much, as long as the basic review of JS and ES6, in fact, almost can answer. Next, write down the specific interview and process, and hope it can be helpful to XDM

This time in the interview room on the cattle from the interview, some interviewer will use tencent conference interview, some interviewer will use the telephone interview, so touched on the cattle from the interview situation, you can prepare as much as possible to something relevant algorithm, because often have questions need your hand to code, and then the interviewer asked

CSS

  • Align center
  • position

First of all, the interviewer asked you to introduce yourself, after the introduction began to ask the knowledge of CSS, this part of the less asked, what are the center alignment solutions, position center alignment solutions explain the principle, these two questions answered directly JS part. CSS review is more extensive and cumbersome, try to accumulate experience in daily use

JS

  • Event loop
  • Promise
  • call bind
  • Pat down plan
  • Status code

The first part of this part is the event loop question, which is a familiar question, I didn’t remember the question, here is a similar question, at that time only five printed questions, this question just pay attention to the Promise, setTimeout in the microtask execution order, the expression will execute immediately upon the encounter with await, Then put the code following the expression into the microtask queue, leaving the execution stack to let the synchronous code execute first

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');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

/** * script start * async1 start * async2 * promise1 * script end * async1 end * promise2 * setTimeout */
Copy the code

The following is a hand-written title, which requires handwritten call function and Promise function (this actually did not let me write, just said the idea of implementation, the Redux simple implementation is also only required to say the idea), note that the following is not written at the time of the code

Function.prototype.myCall = function(context) {
    context = context || window;
    context.func = this;
    const params = [...arguments].slice(1);
    constresult = context.func(... params);return result;
}

function MyPromise(executor) {
    var self = this;
    this.status = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    function resolve(value) {
        if (self.status === 'pending') {
            self.status = 'resolve';
            self.value = value;
            self.onResolvedCallbacks.map((fn) = >{ fn(); }}})function reject(reason) {
        if (self.status === 'pending') {
            self.status = 'rejected';
            self.reason = reason;
            self.onRejectedCallbacks.map((fn) = >{ fn(); }}})try {
        executor(resolve, reject);
    } catch (err) {
        reject(err)
    }
}

MyPromise.prototype.then = function (infulfilled, inrejected) {
    var self = this;
    if (this.status === 'resolve') {
        infulfilled(this.value)
    }
    if (this.status === 'rejected') {
        inrejected(this.reason)
    }
    if (this.status === 'pending') {
        this.onResolvedCallbacks.push(function () {
            infulfilled(self.value)
        });
        this.onRejectedCallbacks.push(function () { inrejected(self.reason) }); }};Copy the code

After the Promise part, the interviewer asked if it was flat. Flat. I said simple toString+split schemes, recursive schemes, and array.prototype. Flat can do this

// Error demonstration
// This is what I wrote at the time, num didn't work, and the interviewer asked me to follow up
function flat(arr, num){
    let res = [];
    if(num > 0){
        arr.map(item= > {
            if(Array.isArray(item)){
                res = [...res, flat(item, num - 1)]}else {
                res.push(item)
            }
        })
    }else {
        res = arr
    }
    return res;
}

console.log(flat([1.2.3[1.2[3.4].5].6].1))
Copy the code

Then the interviewer asked me which status codes I knew. After I said that, he took out the 304 status code and asked me when he would see this status code. This place is actually asking you about your understanding of cache

React

  • The diff algorithm
  • This.setstate Asynchronous synchronization
  • Life cycle say it again
  • Why can’t this.setstate be used in render
  • Why can’t hooks be used in if-else
  • Redux implementation

First of all, he asked the principle of diff in React, the function of key, and then he asked what are the life cycles. Let me say it from my memory, because I used hooks in the last part, so I only said six or seven life cycles, and then he asked me whether this. SetState is synchronous or asynchronous. Because this. SetState is sometimes synchronous and sometimes asynchronous, you can see how this. SetState behaves in listener events, binding events, and life cycles. This. SetState triggers rerender, you can set restrictions on it and so on to control its rerender. * hooks can’t be used in if-else. * hooks can’t be used in if-else. It is worth mentioning that the interviewers of big factories will not change their attitude towards you because you do not understand, and they will always be more gentle in the interview attitude, so this is more comfortable for the interviewees, and will not appear the situation of mental collapse after the interview. Then asked me if I understand the simple implementation of Redux, just this I have written a simple implementation, and then on the side of the dozen a few lines, while talking about specific code and design ideas, specific code in the bottom

export default function createStore(reducer){
    let state = null;
    const listeners = [];
    const getState = () = > state
    
    const dispatch = (action) = > {
        state = reducer(state, action)
        listeners.forEach(listener= > listener())
    }
    
    const subscribe = (listener) = > listeners.push(listener)
    
    // The reason for initializing Dispatch is that before that,state was null
    dispatch({});
    return {
        dispatch,
        subscribe,
        getState,
    }
}
Copy the code

other

  • The significance of graphql

Finally, the interviewer also asked me what the meaning of graphQL is. This is because MY resume said THAT I had used graphQL, so I asked the reason for using this. Here I answered some differences with Restful, if you can use this, you don’t need to review. Don’t worry if the interviewer will ask you about the technology other than your resume (unless it is very basic, such as CSS, HTML). Finally, let me ask a question. I asked the front end team about the technology stack, which is also GQL + Apollo plus the middle layer, but didn’t ask in detail. I hope my interview can be helpful to your interview