Bytedance Data front-end development internship interview.

One side

Because the original interviewer had a temporary meeting, so I had to wait for a new interviewer. The interview atmosphere is still very harmonious, each content is involved, and will be some in-depth. Probably JavaScript basics, algorithms, computer networks, design patterns.

To introduce myself
This discussion
- Talk about some ways to change the direction of this
  
  This is determined by the execution environment. There are call, apply, bind methods, and this is also modified when new objects are used
- Read the code and say the result
  
  From the basic to the complex, there are a lot of questions, so I probably remember those
```
function a() {
  console.log(this.name);
}

a();
Copy the code
```
```
var name = 1;
a();
Copy the code
```
```
a.prototype.name = 2;
a()
Copy the code
```
```
function b() {
  this.value = this.name;
}
b();
Copy the code
```
```
let c = {name: 3};
c.say = a;
let d = c.say;

c.say();
d();
Copy the code
```
The bind to realize
- If you want to be compatible with IE, simply implement bind.
```
// Write the code at that time without considering parameters
Function.prototype.bind = function (obj) {
  return (a)= > {
    this.call(obj); }}Copy the code
```
- Why is arrow function used here? Can the above function be replaced by arrow function
  
  Since the arrow function doesn’t have this itself, bind the outer this. The function above cannot be replaced with the arrow function

Have you read the source code for Vue? A simple publish-subscribe model

Source code shallow read 😀, but not all understand.

On, emit, off and once came into my mind. I was called off halfway through my writing. Finally, I met the easy one.

class EventHelper {
  construct() {
    this._eventMap = {}
  }

  on(fn, cb) {
    this._eventMap[fn]
      ? this._eventMap.push(cb)
      : this._eventMap[fn] = [cb]; } emit(fn, ... args) {if (this._eventMap[fn]) {
      this._eventMap[fn].forEach((cb) = > cb.apply(this, args))
    }
  }

  off(fn) {
    if (this._eventMap[fn]) {
      delete (this._eventMap[fn])
    }
  }

  once(fn, cb) {
    this.on(fn, () => {
      cb();
      setTimeout((a)= > {
        this.off(fn); }}})})Copy the code

UDP & TCP
- Tell me the difference
- How do I determine whether this packet is UDP or TCP
  
  That’s really hard. I didn’t think of it. At the beginning of the answer to the TCP three handshake 😂, then calm to think about the IP message segment seems to have this logo.
HTTPS
- Tell me about the principle of
  
  Blah blah blah, TLS, asymmetric encryption, symmetric encryption…
- Man-in-the-middle attack
  
  I gave you a little bit of an overview of the process
- Whether the data cannot be modified or the receiving end does not recognize the modified data
  
  I talked a little bit about digital signatures
Browser cache
- Talk about some of them
  
  Cache-control, ETag, and last-modify
- Tell me when you must use ETag
  
  When should I use last-modify? (thank goodness the interviewer spared me 😝)
  
  Last-modified does not recognize changes in s units, so if a resource is modified in s units, last-Modified does not change

Binomial tree on the left

My idea is a tree hierarchy traversal. The interviewer said that the idea was similar, except that using null as an identifier might not look good

                1
            2       3
         4   5    6   7
                         8= >1248

// The approximate code at that time
function leftSee(node) {
  const arr = [];
  arr.push(null)
  arr.push(node);
  while (arr.length > 0) {
    let t = arr.shift();
    if (t === null) {
      arr.push(null);
      t = arr.shift();
      if (t == null) return;
      console.log(t.value);
    }
    if (t.left) {
      arr.push(t.left)
    }
    if (t.right) {
      arr.push(t.right)
    }
  }
}
Copy the code

Second interview

The second interview can come across as “casual” and the whole interview feels like a conversation. But the content of the question is very divergent, and there may be a lot of knowledge involved in one question.

Self feeling answer is not very good, the main point is reached, but many did not answer the whole, the end of the face thought that they should hang up. I feel that I need to think more about the advantages, advantages, reasons and disadvantages of writing projects like this.

To introduce myself
Talk about the new features of VU3

Real, real!

Object. DefinePropetry can’t listen for nested properties, which requires recursion, and can’t listen for arrays, which requires rewriting methods. 2. Support custom rendering, currently Vue2 bottom rendering API is not provided to developers, like MPVue is fork the entire Vue source code, and then changed the bottom rendering. Also mentioned are TypeScript, object declarations, and runtime package sizes.
Virtual DOM
- Talk about the pros and cons of the virtual DOM compared to the original DOM
  
  1. Use JS computing in exchange for DOM operations to improve performance. 2. DOM manipulation is not required. 3. Cross-platform development, Weex
- According to the Svelte framework, what other weaknesses can you name by analogy?
  
  I had never heard of Svelte, and the interviewer briefly explained the framework’s selling points.
  
  Meng 🙃 forced face
BFC
- What is the
  
  Block-level formatting context, IFC, FFC, GFC
- Under what circumstances
  
  The margin collapses to clear the inner child element float
- How to trigger it
  
  . 😐 : float is not none
The mobile terminal
- Mobile adaptation
  
  @media media query loads different CSS, Flex, float layouts.
- Difference between REM and EM
  
  Rem is based on the font size of HTML elements
Vuex: Modules. How can actions in A file change the state of B
1. Import B file directly into A file and invoke B’s actions😁. 2. Dispatch the third parameter is {root: true}
TypeScript
- What does it mean to put an exclamation mark after a variable
  
  Forget 🙃, should be a non-null assertion
- Method of type assertion
- Advantages and disadvantages
Node

Ask me how Node works and I’ll say I only know how to use it and I’m still learning the principles… Used Express and Egg

asynchronous

Look at the code

async function test() {
  return 1
}
async function call() {
  const a = test();
  const b = await test();
  console.log(a, b);
}
call();
Copy the code

What is the result of this writing? Is there anything that can be improved
```
async function test() {
  const resp1 = await getApi1();
  const resp2 = await getApi2();
  console.log(resp1, resp2);
  return 1
}
Copy the code
```
Since await blocks, getApi2 will not fire until getApi1 returns a result, using promise.all at the same time

Promise.all

Write down the principle of promise.all

Haven’t seen, can only rely on extemporaneous play (oneself dig pit, crying also want to climb out 😭)

While writing and communicating with the interviewer, later said that the general idea is the same, but I need to go back to see…

Promise.prototype.all = function(promiseArr) {
    const len = promiseArr.length;
    const result = new Array(len);
    let flag = 0;
    return new Promise((resolve, reject) = > {
      promiseArr.forEach((cb, index) = > {
        Promise.resolve(cb).then(
          res= > {
            result[index] = res; // Notice the order in the array: push🙃 was written
            if (++flag === len) {
              resolve(result);
            }
          },
          error => {
            reject(error)
          })
      })
    })
  }
Copy the code

On three sides

Three of the interviewer should be a director, very kind, a come up to ask me to eat a meal, face for a long time, do not want to rest 😊

It does not involve how to implement specific API, but mainly focuses on how to give a feasible solution to a problem. I have strong divergent thinking, and the interviewer will guide me step by step to give a comprehensive solution. During the interview, I mentioned using Vuex to manage data, and the interviewer directly said that this has nothing to do with Vuex. The needs expressed by the interviewer are clear, as long as the requirements are realistically addressed

Fortunately, three meetings are over. The interviewer said it was a little late for HR but tomorrow.

To introduce myself
Introduction of key projects, difficulties and challenges

I mainly talked about the iteration of the project version, the permission control of the middle stage, modularization…
Authority control scheme, how to achieve, the overall idea of how
How is modularity divided, what has been done specifically
An input box remote search prompt function is proposed
- Talk about your ideas for implementation
  
  It’s a general idea. Brace up. Blah, blah, blah
- What if you type the same thing multiple times
  
  It can be cached in localStorage and checked locally before making a request
- In this way, we need to go to localStorage to get it every time. Is there a better solution
  
  The page is loaded from localStronge and stored in a Map. When the page leaves, the new Map is stored in localStronge
- How do I synchronize data in localStronge if the server is up to date
  
  You can learn from the browser cache and add an identifier to divide the data into two parts: if it won’t change for a while, use a “strong cache”; Use “negotiated cache” for frequent changes. Check with the server each time you use it to see if it has changed
How does the version iterate
When do you start your internship

I asked the question

A:
- During this period, I learned Flutter and React. Do you think I should learn more frameworks to use in my limited time, or do I need to learn one more framework in depth?
- Byte technology stack
2:

The interviewer behind something, did not give me the opportunity to ask 😥
Three sides:
- Is there any way byte can train new people?
- Is it r&d oriented or business driven?

link

Thanks to PanJiaChen (vue-element-admin) for inputting code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Bytedance -Data- Front-end development intern Interview

One side

Second interview

On three sides

I asked the question

link

Bytedance -Data- Front-end development intern Interview

One side

Second interview

On three sides

I asked the question

link

Related Posts

70. Take the stairs

Git command list required for front-end engineers

Css3-2d transformation and 3D transformation, transition and animation all done