Q: If you can understand 80%, please send me your resume

The introduction

Update: wechat search “advanced front interview” small program, brush on the way to work, half a year assault into dafang!

Update: the current has reached “23K” Star, thank you for your support, recently a blog site out, convenient for everyone to read, the follow-up will have more content and more optimization, fierce poke here to view

—— The following is the text ——

In half a year, thousands of people participated in the interview and selected 100 high frequency questions, which is “one question”.

On January 21, 2019, the “One Question” project officially started. After that, a high-frequency interview question will be set every working day, mainly covering large companies such as Ali, Tencent, Tiaotiao, Baidu, netease and common questions. Thanks to your enthusiastic participation, there are many answers to each question, and the ideas and answers provided have greatly increased my knowledge. Up to now, I have accumulated 100 questions, “8000+” Star. It can be said that you have met the questions in the interview, and I am sure that you can find familiar figures here.

In the later stage, in addition to continuously updating “one question”, we will also sort out very detailed answer analysis, provide a complete thinking link, and help you better understand the topic, as well as the knowledge behind the topic. “Our goal is not to memorize the topic, but to make up for the gaps through the topic, and to review the old and new”.

For more details and answers, check out here

Questions 1 to 10

When writing React/Vue projects, why do we write key in the list component and what is its function?

Question 2:`['1', '2', '3'].map(parseInt)` what & why ?

Question 3 :(dig money) what is shockproof and throttling? What’s the difference? How?

Topic 4: Introduce the difference between Set, Map, WeakSet and WeakMap?

Question 5: how to implement depth-first traversal and breadth-first traversal?

Question 6: Can you implement a copy function using depth-first and breadth-first ideas, respectively?

Question 7: What is the difference in ES5/ES6 inheritance other than the way it is written?

8. What is the difference between setTimeout, Promise and Async/Await

9. How can Async/Await be implemented in a synchronous way

Question 10 :(headline) asynchronous pen test questions

Write the result of the following code

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');
Copy the code

Problem 11 to 20

11 :(ctrip) algorithm handwriting problem

The following array is known:

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

Write a program that flattens and divides the duplicate parts of the array, resulting in an ascending and non-duplicate array

Question 12 :(didi, wacai, weidoctor, haikang) JS asynchronous solution development process and advantages and disadvantages.

Question 13: Is the Promise constructor executed synchronously or asynchronously? What about the THEN method?

14. How to implement a new on Valentine’s Day

Question 15 :(netease) briefly explain http2 multiplexing

Question 16: Tell me about your understanding of the TCP three handshake and four wave

Question 17: After the normal connection of machine A and B, machine B suddenly restarts. What is the TCP state of MACHINE A at this time

If A and B have established A normal connection but have never sent data to each other, then B suddenly restarts. What is the TCP status of A at this time? How do I eliminate this state in my server program? (Super outline question, understand can)

Q: When is setState synchronized in React? When is setState asynchronous?

19. React setState: What does the following code output?

class Example extends React.Component {
  constructor() {
    super(a);this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // The first log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // The second log

    setTimeout(() = > {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // The third log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // Fourth log
    }, 0);
  }

  render() {
    return null; }};Copy the code

Question 20: Introduce the installation mechanism of NPM module. Why can you automatically install the corresponding module by typing NPM install?

Problem 21-30

Question 21: There are three ways to judge an array. Please describe the differences between them

Object. The prototype. ToString. Call (), instanceof and Array. The isArray ()

Question 22: What about Repaint & Reflow and how to optimize it

Question 23: Describe the difference between the observer pattern and the subscription-publish pattern. What scenarios does each apply

Question 24: Talk about the design ideas of Redux and Vuex

Question 25: Describe the difference between browser and Node event loops

Question 26: Introduce the development of modularity

This can be considered from IIFE, AMD, CMD, CommonJS, UMD, Webpack (require.ensure), ES Module,

In global scope, variables declared as const and let are not in Windows. Where are they? How to get it? .

Question 28: Both cookies and tokens are stored in the header. Why not jack the token?

Question 29: How does the Model change the View and how does the View change the Model

Problems 31-40

Problem 30: Merge two arrays into one array

Please put the two arrays [‘ A1 ‘, A2, B1, B2, C1, C2, D1, ‘D2] and [‘ A’, ‘B’, ‘C’, ‘D’]. Combined into [‘ A1 ‘, ‘A2’, ‘A’, ‘B1, B2,’ B ‘, ‘C1, C2,’ C ‘, ‘D1, D2,’ D ‘].

Problem 31: Modify the following code to output 0-9, and write all the solutions you can think of.

for (var i = 0; i< 10; i++){
	setTimeout(() = > {
		console.log(i);
    }, 1000)}Copy the code

Question 32: Is the Virtual DOM really faster than the native DOM? Tell me what you think.

Question 33: What does the following code print and why?

var b = 10;
(function b(){
    b = 20;
    console.log(b); }) ();Copy the code

Question 34: Simply modify the following code to print 10 and 20, respectively.

var b = 10;
(function b(){
    b = 20;
    console.log(b); }) ();Copy the code

Question 35: Browser cache reading rules

Can be divided into Service Worker, Memory Cache, Disk Cache and Push Cache. What is the basis for the request from Memory Cache and from Disk Cache? What data is stored in Memory Cache and Disk Cache and when?

Problem 36: Implement the flatten function iteratively.

Question 37: Why can’t asynchronous operation be performed in the reducer of Vuex mutation and Redux?

Question 38 :(jd) under what circumstances does a in the following code print 1?

vara = ? ;if(a == 1 && a == 2 && a == 3) {console.log(1);
}
Copy the code

Question 39: Introduce BFC and its applications.

Question 40: In Vue, why can’t child components modify Prop passed by parent components

If so, how does Vue monitor the property changes and give warnings?

Problem 41 to 50

Question 41: What does the following code output

var a = 10;
(function () {
    console.log(a)
    a = 5
    console.log(window.a)
    var a = 20;
    console.log(a)
})()
Copy the code

Problem 42: Implement a sleep function

For example, sleep(1000) means waiting for 1000 milliseconds and can be implemented from the perspective of Promise, Generator, Async/Await, etc

Problem 43: Use sort() to sort the arrays [3, 15, 8, 29, 102, 22] and output the result

Question 44: Introduce the HTTPS handshake process

Question 45: How does the client verify the validity of the certificate during the HTTPS handshake

Question 46: Output the result of the following code execution and explain why

var obj = {
    '2': 3.'3': 4.'length': 2.'splice': Array.prototype.splice,
    'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)
Copy the code

Question 47: does the bidirectional binding and vuEX conflict

48. What is the difference between call and apply

Question 49: Why are transparent 1×1 GIF images usually used when sending data burial requests?

第 50 题 :(baidu) implement (5).add(3).minus(2).

Example: 5 + 3-2, the result is 6

Problems 51 to 60

Question 51: What are the defects in the response principle of Vue’s Object. DefineProperty?

Why does Vue3.0 use Proxy instead of Object.defineProperty?

Question 52: How do I center a div horizontally or vertically

Question 53: Output the execution result of the following code and explain why

var a = {n: 1};
var b = a;
a.x = a = {n: 2};

console.log(a.x) 	
console.log(b.x)
Copy the code

Question 54: How is bubble sort implemented, what is the time complexity, and how can it be improved?

Question 55: A company’s sales from January to December are stored in an object

As follows: {1:222, 2:123, null, null, 888, NULL, null, null, null, null, null, null, null, null, null, null, null.

Question 56: The LazyMan class is required to implement the following functions.

LazyMan('Tony');
// Hi I am Tony

LazyMan('Tony').sleep(10).eat('lunch');
// Hi I am Tony
// Wait 10 seconds...
// I am eating lunch

LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
// Hi I am Tony
// I am eating lunch
// Wait 10 seconds...
// I am eating diner

LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
// Hi I am Tony
// Wait 5 seconds...
// I am eating lunch
// I am eating dinner
// Wait 10 seconds...
// I am eating junk food
Copy the code

第 57 题 : Analyze the advantages and disadvantages of opacity: 0, visibility: hidden, and display: None and their applicable scenarios.

Question 58: What is the difference between an arrow function and an ordinary function? Constructors (functions) can use new to generate instances, but can arrow functions? Why is that?

Problem 59: Given two arrays, write a method to calculate their intersection.

For example, given nums1 = [1, 2, 2, 1], nums2 = [2, 2], return [2, 2].

Question 60: Given the following code, how can I change the image width to 300px? Note that the following code cannot be modified.

<img src="1.jpg" style="width:480px! Important." >

Problems 61 to 70

Question 61: How to implement token encryption

Why should Redux design Reducer as a pure function

Question 63: How to design for seamless rotation

Question 64: Simulate the implementation of a promise.finally

65:`a.b.c.d` 和 `a['b']['c']['d']`, which has higher performance?

Question 66: What is the idea of translating ES6 code into ES5 code

Question 67: Array programming

Randomly generate an array of integer types of length 10, such as [2, 10, 3, 4, 5, 11, 10, 11, 20], and arrange it into a new array of the following form, such as [[2, 3, 4, 5], [10, 11], [20]].

Question 68: How to solve the problem of 1px pixels of mobile Retina screen

Question 69: How to invert the case of a string, such as’ AbC’ to ‘AbC’.

Question 70: Describe the principle of webpack hot update. How do you update a page without refreshing the browser

Problem 71 to 80

Question 71: Implement a string matching algorithm. From a string S of length n, it looks for a string T, whose length is m, and returns the position if it exists.

Question 72: Why ordinary`for`The performance of loops is much higher than`forEach`Please explain why.

Question 73: Introduce BFC, IFC, GFC and FFC

74. Simple data binding using JavaScript Proxy

Question 75: There are 100,000 pieces of data in the array. What is the time difference between the first element and the 100,000th element

Question 76: Output the following code run result

// example 1
var a={}, b='123', c=123;  
a[b]='b';
a[c]='c';  
console.log(a[b]);

---------------------
// example 2
var a={}, b=Symbol('123'), c=Symbol('123');  
a[b]='b';
a[c]='c';  
console.log(a[b]);

---------------------
// example 3
var a={}, b={key:'123'}, c={key:'456'};  
a[b]='b';
a[c]='c';  
console.log(a[b]);
Copy the code

Question 77: Algorithm “Rotate arrays”

Given an array, move the elements of the array k positions to the right, where k is non-negative.

Example 1:

Input:1.2.3.4.5.6.7] and k =3Output:5.6.7.1.2.3.4[Explanation: Rotate to the right1Step:7.1.2.3.4.5.6[Turn to the right2Step:6.7.1.2.3.4.5[Turn to the right3Step:5.6.7.1.2.3.4]
Copy the code

Example 2:

Input: [...1, -100.3.99] and k =2Output:3.99, -1, -100[Explanation: Rotate to the right1Step:99, -1, -100.3[Turn to the right2Step:3.99, -1, -100]
Copy the code

Question 78: What is the order in which Vue’s parent and child lifecycle hooks are executed

Question 79: How is the input search stabilized and how is the Chinese input handled

Question 80: Introduce the use, principle implementation and error handling of Promise.all

Problem 81-90

Problem 81: Print out all symmetric numbers between 1 and 10000

For example, 121, 1331, etc

Problem 82: Monday algorithm problem “Move zero”

Given an array nums, write a function to move all zeros to the end of the array while preserving the relative order of the non-zero elements.

Example:
Input: [0,1,0,3,12] output: [1,3,12,0,0]Copy the code
Description:

You must operate on the original array; you cannot copy additional arrays.

Minimize the number of operations.

Question 83: How is the distinction between var, let, and const implemented

Question 84: Please implement an ADD function that fulfils the following functions.

add(1); 			/ / 1
add(1) (2);  	/ / 3
add(1) (2) (3);/ / 6
add(1) (2.3); / / 6
add(1.2) (3); / / 6
add(1.2.3); / / 6
Copy the code

Question 85: From the React-Router`<Link>`The labels and`<a>`What’s the difference between labels

How to disable the TAB default event, and how to implement jump after disabling.

Question 86 :(jingdong, kuaishou)

Given an array of integers and a target value, find the two numbers in the array and the target value.

You can assume that each input corresponds to only one answer, and that the same elements cannot be reused.

Example:

Given nums = [2.7.11.15], target = 9Because the nums [0] + nums[1] = 2 + 7 = 9So return [0.1]
Copy the code

Question 87: How to determine if you have entered a correct url in the input box.

Problem 88: Implementing the convert method to convert the original list into a tree structure requires as little time complexity as possible

In the following data structure, id represents the department number, name is the department name, parentId is the parent department number, and 0 represents the primary department, we need to implement a convert method to convert the original list into a tree structure. The value of parentId is mounted in the children array of the id attribute. The structure is as follows:

// The original list is as follows
let list =[
    {id:1.name:'A'.parentId:0},
    {id:2.name:'B'.parentId:0},
    {id:3.name:'C'.parentId:1},
    {id:4.name:'D'.parentId:1},
    {id:5.name:'E'.parentId:2},
    {id:6.name:'department F'.parentId:3},
    {id:7.name:'department G'.parentId:2},
    {id:8.name:'H'.parentId:4}];constresult = convert(list, ...) ;// The result is as follows
let result = [
    {
      id: 1.name: 'A'.parentId: 0.children: [{id: 3.name: 'C'.parentId: 1.children: [{id: 6.name: 'department F'.parentId: 3
            }, {
              id: 16.name: 'department L'.parentId: 3}]}, {id: 4.name: 'D'.parentId: 1.children: [{id: 8.name: 'H'.parentId: 4}]}]}, ···];Copy the code

Question 89: Design and implement promise.race ()

Problem 90: Keyword highlighting for fuzzy search results

Problem 91-100

Question 91: Introduce HTTPS man-in-the-middle attack

Problem 92: Given the data format, implement a function fn to find all parent ids in the chain

const value = '112'
const fn = (value) = >{... } fn(value)// Output [1, 11, 112]
Copy the code

Problem 93: Given two ordered arrays of size m and n, nums1 and nums2. Find the median of the two ordered arrays. The time complexity of the algorithm is order log(m+n)).