"One big factory a week" replayed the experience of fighting a lot of faces, and found deficiencies, and cracked them one by one!

Preface

Hello everyone, I’m Lin Sanxin, most difficult knowledge points in the most easy-to-understand is my motto, is the premise of advanced is my original intention

One big factory a week is a new series of articles published by me. The general process is as follows:

• I will collect some interviews from big factories and try to answer
• If they are all cities, wait for another round next week
• If you don’t, write it down, overcome them, write an article, and then the next round

The purpose of this series is: yourself to learn, write articles to consolidate new knowledge, and review old knowledge

Pinduoduo

Today is a giant one week second period, and today we look to re-set fight a lot face was found inadequate, and one by one break them!

one side

1. Inquiries about resume items-details

slightly. . . . .

2. Center vertically and horizontally

• 1、position: absolute + left: 50% + top: 50% + transform: translate(-50%, -50%)
• 2、display: flex + justify-content: center + align-items: center

• 3、display: table-cell + text-align: center + vertical-align: middle

  3. What fields will the header of a simple request have?

• Accept : MIME types supported by the browser
• Accept-Encoding：gzip, deflate : The compression codes supported by the browser are gzip and deflate
• Accept-Language：zh-cn,zh;q=0.5 : The languages supported by the browser are simplified Chinese and Chinese, the former is supported first
• Connection：keep-alive : The connection type between the client and the server is a persistent connection
• Content-length : content length
• Content-type : content format
• Host : domain name
• Origin : Visit source address (protocal + host)

• Referer : Visit source address (complete)

  4. How to use map, filter and reduce?

  You can read my article good foundation? Summarized 38 ES6-ES12 development skills, but to see how many points you can get? 🐶 Part in map、filter、reduce

  5. Have you ever learned about Symbol?

  You can read my article foundation good? Summarized 38 ES6-ES12 development skills, but to see how many points you can get? 🐶 Part in Symbol

  6. ES5 inheritance, ES6 class inheritance, static method?

• ES5 inheritance: basic knowledge encountered in the work of 50 JavaScript in the inheritance

• ES6 class inheritance: good foundation? Summarized 38 ES6-ES12 development skills, but to see how many points you can get? 🐶 in Class

  7. Promise timeout control?

  Use Promise.all

  const request = (delay) => (
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('数据')
    }, delay)
  })
  )
  
  const time = (delay) => (
  new Promise((resolve, rejct) => {
    setTimeout(() => {
      resolve('超时啦！')
    }, delay)
  })
  )
  
  const getData = (delay1, delay2) => (
  Promise.race([request(delay1), time(delay2)])
  )
  
  // 不超时情况
  getData(1000, 2000).then(res => console.log(res))
  // 超时情况
  getData(2000, 1000).then(res => console.log(res))

  8. DFS find node

  function depthFirstSearchNoRecursion (target) {
    const res = [];
    const stack = target.slice();
    // console.log(stack)
    while (stack.length > 0) {
        const node = stack.shift(); // 最上层节点出栈
        res.push(node.id);
        // 如果该节点有子节点，将子节点存入栈中，继续下一次循环
        const len = node.children && node.children.length;
        for (let i = len - 1; i >= 0; i--) {
            stack.unshift(node.children[i]);
        }
    }
    return res;
  }

  9. What are the characteristics of Node and what is it suitable for?

  characteristic

• 1. It is a Javascript runtime environment
• 2. Rely on Chrome V8 engine for code interpretation
• 3. Event-driven
• 4. Non-blocking I/O
• 5. Lightweight, scalable, suitable for real-time data interactive applications

• 6. Single process, single thread

  Scenes

• 1. High concurrency (the most important advantage)
• 2. Suitable for I/O intensive applications

10. What are the advantages of midway over egg?

As far as I know, typescript is very good

11. Has typescript been practiced?

Practiced:

• Vue3 + TS + Vite

• React + TS + Vite

  12. Are there any design patterns in normal use?

  It may be used, but I didn’t pay attention to it, and I didn’t summarize it.

  13. Usual packaging tools-Webpack related

  Recommend a few articles:

• 2020, and the code won't be fragrant if you don't type webpack again (

• webpack ten consecutive questions how many questions you can answer

  14. Do you have anything I didn't ask you to say?

  slightly

  15. Cache-related, CDN cache processing?

  CDN cache is similar to browser http cache, this one is not proficient, you have to take a look

  16. What do you want to ask?

  Am I handsome?

Two sides

1. Pressure side, questioning opinions?

slightly

2. Flatten the array

Require

const flatten = (list, level = +Infinity) => {
  // ...
};
const array = [1, [2, [3, 4, [5]], 3], -4];
const list1 = flatten(array);
const list2 = flatten(array, 2);
console.log(list1); // [1, 2, 3, 4, 5, 3, -4]
console.log(list2); // [1, 2, 3, -4]

Problem solving

const flatten = (list, level = +Infinity) => {
  let res = list
  for (let i = 0; i < level; i++) {
    res = [].concat(...res)
    if (!res.some(item => Array.isArray(item))) break
  }
  return res
};

3、Promise

Require

const myPromise = val => Promise.resolve(val);
const delay = duration => {
  // ...
};
myPromise(`hello`)
  .then(delay(1000))
  .then(val => console.log(val)); // 一秒之后输出 hello

Problem solving

const delay = duration => {
  return (val) => (
    new Promise((resolve, reject) => {
      setTimeout(() => resolve(val), duration)
    })
  )
};

Three sides

1. Inquiry about project details

slightly. . .

2. Do you read the Vue source code?-Responsive principle, nextTick

You can see my Vue source code analysis column

3. Have you studied any new technologies recently?

Rap

4. What are the practices for project optimization?

slightly. . . Answer these aspects according to your own project:

• 1. Business optimization
• 2. Optimize the request
• 3. Optimized packaging

• 4. Optimized architecture

  5. How does V8 execute a piece of code?

• The first step: Parser convert the code to AST (Abstract Syntax Tree)
• Step 2: interpreter Ignition generates bytecode

• Step 3: Implementation

  6, 72-Edit distance

  Will not. . Has been collected in Dachang algorithm questions

  7, 226-flip binary tree

  Will not. . Has been collected in Dachang algorithm questions

  8. The practice of performance optimization?

  slightly. . . Answer according to your own project. .

  9. Any other questions?

  Am I handsome

Concluding remarks

I am Lin Sanxin, an enthusiastic front-end rookie programmer. If you are motivated, like the front-end, and want to learn the front-end, then we can make friends, fish together haha, fish school, add me, please note [think]