preface

Is the author’s face in shenzhen bytes to beat the front of the post, has been heard that headlines notice algorithm, so has spent a lot of time to prepare before the interview, but in the end to the second interview is stopped, algorithm based solid enough ah – – | | | | | | | | | so everyone must face headlines or want to prepare for the algorithm, multiple do what the ~

Written test + one side

On the blackboard! The headline is that there must be a pen test oh, CSS, JS, algorithms will be examined oh. I’ll try my best to restore the title. Some are really forgotten

1. Implement the CSS layout

A div is centered vertically 10px to the left and right of the screen and is always 50% of the width. Inside the div is the text 'A' and the font -- size:20px text is centered horizontally and verticallyCopy the code

My answer:

<div class="wrap">
    <div class="box">
        <span class="text">A</span>
    <div>
</div>
Copy the code

.wrap {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 0;
    bottom: 0;
}

.box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 50%;
    background: red;
}

.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    background: blue;
}
Copy the code

The height is always 50% of the width. The height is always 50% of the width.

<div class="box">
    <div class="Abox">A</div>
</div>
Copy the code

*{
    padding:0;
    margin: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
.box{
    position: relative;
    background: red;
    width: 100%;
    height: 100%;
}
.Abox{
    margin-left:10px;
    width: calc(100vw - 20px);
    height: calc(50vw - 10px);
    position: absolute;
    background: yellow;
    top:50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
Copy the code

2. Is arguments an array? Class array to array method understand?

Arguments are not arrays, of course.

• […arguments]
• Array.from(arguments)

3. Type comparison

if([]==false){console.log(1)};
if({}==false){console.log(2)};
if([]){console.log(3)}
if([1]==[1]){console.log(4)}
Copy the code

3 a: 1

• == is a non-strict comparison operator, false is converted to 0, [] is converted to ”, {} is converted to “[object object]”, so it prints 1, not 2. See below for details

Refer to the article

Why is [] false

• [] and {} are “empty” objects, not “empty”, so they print 3
• The last reference address is inconsistent, not the same object, so 4 will not be printed

4. EventLoop

async function a1 () {
    console.log('a1 start')
    await a2()
    console.log('a1 end')
}
async function a2 () {
    console.log('a2')
}

console.log('script start')

setTimeout(() => {
    console.log('setTimeout')
}, 0)

Promise.resolve().then(() => {
    console.log('promise1')
})

a1()

let promise2 = new Promise((resolve) => {
    resolve('promise2.then')
    console.log('promise2')
})

promise2.then((res) => {
    console.log(res)
    Promise.resolve().then(() => {
        console.log('promise3')
    })
})
console.log('script end')
Copy the code

Correct answer:

Script start a1 start a2 promise2 script end // start the asynchronous queue promise1 promise2. I thought it would be after promise1. // The macro task setTimeout is executed after all the micro tasks are completedCopy the code

5. Correct the code and print 0123401234

function a () {
    for (var i = 0; i < 5; i++) {
        this.i = i
        setTimeout(function () {
            console.log(i)
        }, 0)
        console.log(this.i)
    }
}

a()
Copy the code

A: First notice var, can be changed to let, and then add an immediate execute function; And then notice that this points to, you can change it to an arrow function. (That’s how myopic my thinking was…)

function a () {
    for (let i = 0; i < 5; i++) {
        (function (i) {
            this.i = i
            setTimeout(() => {
                console.log(i)
            }, 0)
            console.log(this.i)
        })(i)
    }
}

a()
Copy the code

My colleague of a cow force big god used this method, admire really ah ha ha ha 👇

var count = 0;
Object.defineProperty(window, 'i', {
    get: function() {
        return count++
    },
    set: function() {}
})

function a () {
    for (let i = 0; i < 5; i++) {
        (function (i) {
            this.i = i
            setTimeout(() => {
                console.log(this.i)
            }, 0)
        })(i)
    }
}

a()
Copy the code

Five minutes later he came up with a new idea! My knees snap down 👇

function a () {
    for (var i = 0; i < 5; i++) {
        this.i = i
        setTimeout(function () {
            console.log(this.i)
        }.bind({i: i}), 0)
    }
}
Copy the code

6. Write a bind as required.

A :(the following is a normal handwritten implementation of bind.)

Function.prototype.bind2 = function (context) { if (typeof this ! == "function") { throw new Error("Function.prototype.bind - what is trying to be bound is not callable"); } var self = this; var args = Array.prototype.slice.call(arguments, 1); var fNOP = function () {}; var fbound = function () { self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments))); } fNOP.prototype = this.prototype; fbound.prototype = new fNOP(); return fbound; }Copy the code

7. Write a throttle function as required

A: First throw a normal anti – shake function out

function throttle(callback, ms) {
    var pending = false;
    var _this;

    return function () {
        if (!pending) {
            var args = arguments;
            pending = true;
            _this = this;

            setTimeout(function () {
                callback.apply(_this, args);
                pending = false;
            }, ms);
        }
    };
}
Copy the code

As a result, the interviewer was not satisfied. Although he did not execute the third time, he would execute the third time immediately after the first time. I couldn’t do it in the end anyway,

8. Select N numbers from an unordered and unequal array and make the sum equal to M to implement the algorithm

Hahahahaha can not do it, the interviewer is very patient guide, if choose 2 numbers of words how to achieve it, I thought of recursive functions, but in the end, I still can not write out…

The interviewer mainly looked at the questions to expand the relevant knowledge points, and THEN I do not know how to pass the one

Second interview

The two sides are almost algorithm questions, and then add js basic questions so. Emmm algorithm I say the practice at that time, feel to mistake people’s children, another day through the study alone to share

1. A dictionary [‘I’, ‘have’, ‘a’, ‘book’, ‘good’] that implements a function to determine whether a string is from the dictionary, printing true/false

Such as:

Type ‘I have a book’ and print true

Type ‘this is a good book’ and print false

A: I came up with a stupid method, which was to cut all the dictionary words in the string, and if there were any left, it would be false. Ha ha ha ha ha ha.

2. A long ladder has n steps, you can take one step at a time, and two steps at a time. How many ways are there?

A: AFTER some guidance I wrote a recursive function

function step (n) {
    if (n === 1) return 1
    if (n === 2) return 2
    return step(n - 1) + step(n - 2)
}
Copy the code

After r the interview is not very satisfied, said if in the browser on the step(40000) will be how, I said will explode it. He said why. I said memory would overflow. He asked me why.

After a lot of blablabla, I still didn’t answer well. When I got home, I thought that there should still be optimization space for tail recursion.

//////// after asked the algorithm I have not remembered. Let me share some more basic questions. Most of the answers have been mentioned in previous articles and interviews, so I won’t repeat them here

3. Talk about HTTP caching

4. Have you ever used typescript? What does it do?

A: Yes, I really just wanted to type check and provide default values, but then I thought about introducing the concept of “classes” and “modules”.

5. The usage of TS is used in decorators, do you know about it? Do you know how to do that?

A: I just wrote an article about decorators and know a little about it… The implementation basically uses Object.defineProperty to intercept object attributes for “processing”

6. Has PWA ever been used? How does serviceWorker work?

The last

. I really couldn’t remember some questions. In the last two interviews, the interviewer told me that they had requirements for the algorithm, including the front end. The interview was really rough, but it was a lot more rewarding and made me realize how important algorithms really are.