Recently began a long time interview journey, feeling gold three silver four feeling or existence. So I would like to share with you a few recent interviews to the company, although it is not a frontline factory, but the questions asked feel there are a lot of common points, after sorting out the front-end interview is also a lot of confidence. Feel the company name directly posted up a little is not very respectful, temporarily hidden. I recorded the questions of the video interview immediately after the interview, and sorted out the telephone interview bit by bit according to the recording. I hope I can give you a little help.

The first company

  • Number of Social Security participants: 737
  • Company industry: Software and information technology services

1. What did you do with VUE?

Here it means confused, the problem is quite large. It turns out later that the interviewer wants to ask you what features you’ve recently implemented with VUE, and then ask further questions based on what you’ve answered.

2. Json.stringfy () Json.parse () How many parameters are there?

Str_pretty2 = json.stringify (STR, null, 4) json.parse () : str_pretty2 = json.stringify (STR, null, 4) Parse (text[, reviver]) json.parse ('{"p": 5}'.function (k, v) {
    if(k === ' ') returnv; // If you reach the top level, return the attribute value directly,returnv * 2; // Otherwise double the value of the property. }); // { p: 10 }Copy the code

3. How to implement a deep copy?

Refer to the link below, mainly to make the simple idea clear. The proposal arranges a simple train of thought by oneself first, otherwise speak out meeting is very disorderly. Deep copy implementation

4. What are the interfaces of webSocket?

new Websocket(' ')
this.ws.onopen = ()=>{}
this.ws.onclose = ()=>{}
this.ws.onmessage = ()=>{}
this.ws.onerror = ()=>{}
Copy the code

5. What apis do you know about arrays?

Including the content of the next answer, pop, push,shift, unshift, slice, splice, reverseCopy the code

6. Besides for of, what other ways are there to iterate over groups of numbers?

1. For loop 2. ForEach loop 3. Map loop 4. For of loop 5. Filter loop 6 Keys, values, entries 13. WhileCopy the code

7. How to filter the following data?

arr: [
  {
    key: '01',
    value: 'beauty'
  }, {
    key: '02',
    value: 'Wang Zhaojun'
  }, {
    key: '03',
    value: 'Yang Yuhuan'
  }, {
    key: '04',
    value: 'the sable cicada'
  }, {
    key: '01',
    value: 'beauty'
  }, {
    key: '01',
    value: 'beauty'}]};let finalResult = []
let attr = {}
for(let item of this.arr){
    if(! attr[item.key]){ finalResult.push(item) attr[item.key]=true}}Copy the code

8. What apis do you know ES6 uses?

A little. Usually what you say leads to a deeper question.Copy the code

9. What are the use scenarios of Promise and Async?

Promise and async/await are commonly used to optimize multiple asynchrony and asynchronous nesting to prevent callback hell. Load files, images, interfaces need to be called sequentially, etc.Copy the code

10. How to call the next interface immediately if one of the first two interfaces returns?

Promise.race

const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    fetch('/resource-that-may-take-a-while2')})]); p .then(console.log) .catch(console.error);Copy the code

11. What if five interfaces are called simultaneously?

const p = Promise.all([p1, p2, p3, p4, p5]);
Copy the code

12. How to intercept vUE route navigation?

router.beforeEach

13. What are the communication modes of VUE components? How do you communicate across components?

Six kinds of communication, basically do not need to answer out, commonly used to understand good.

14. What are the common usage scenarios of VUEX?

Vuex is a state management tool built specifically for VUE to address the issue of state sharing among multiple components. The emphasis is on centralized management. Common scenarios: shopping cart data sharing, login registration

15. How do you use the Destroy lifecycle of Vue? How to reclaim memory?

BeforeCreated is used to write a loading created file. Loading is used to request data. You can remove Mounted from loading and perform DOM related operations. Mounted beforeDestroy is triggered only after dom parsing is complete. This is usually used when removing timers, bound events, etc

Memory reclamation: removeEventListener is used to remove events ClearTimeOut and ClearInterval is used to remove timers

16. How do I load components dynamically?

Dynamically loaded components of VUE

17. How does the pure front end control permissions? How do you control project permissions?

Reference link. Feel probably answer out with the back end, in vue-Router with navigation interception is about the same.

18. How to structure assignment of the following data to get the second data of line?

Const node = {loc: {start: {line: [1,2,3], column: 5}}};let { loc: { start: {line:[,num]}} } = node;
Copy the code

19. How does Webpack configure a loader to traverse only part of the file?

Reference link. Configure include in the Loader to set the traversal scope.

20. How does WebPack set aliases?

Vuecli3.0 is configured in the vue.config.js file. module.exports={ chainWebpack:(config)=>{ config.resolve.alias .set(The '@',resolve('./src')) / /setThe first parameter: set an alias, the second parameter: set the path}} pure webpack, may refer to: https://www.cnblogs.com/Jimc/p/10282969.html.Copy the code

21. What language do you use on the back end? How are your projects packaged? Is it packaged with the back end?

slightly

22. Are you familiar with different versions of browser optimization? How about optimizing your current project to a specific version of IE?

I don’t know much about this, I just know that Vue family bucket will convert es6 and above to ES5 readable with Babel.

23. What does the version management tool use?

slightly

24. Have you read anything lately?

slightly

25. Do you have any questions?

slightly

Second company

  • Number of social Security participants: about 200
  • Industry: Education industry

1. How does Flex achieve horizontal and vertical centering? What’s the API for changing the spindle?

The context-content attribute defines the alignment of items on the main axis. .box { justify-content: flex-start | flex-end | center | space-between | space-around; } the align-items property defines how items are aligned on the cross axis. .box { align-items: flex-start | flex-end | center | baseline | stretch; } the direction of the spindle flex - direction: row | row - reverse | column | column - reverse;Copy the code

2. How do I override Element’s native style?

<style scoped>. Box >>>. Content {font-size:20px; </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style"less">
.select {
     /deep/ .ivu-card-body {
        width: 100%;
      }
    }
</style>
Copy the code

3. How do I make multiple elements 20px apart, but keep the first element the same?

div:not(:first-child){
    display:inline-block;
    margin-left:20px;
}
Copy the code

4. Are there any other parameters for the function of watch in Vue?

Observe a change in the evaluation result of an expression or function on a Vue instance. Deep: true, in order to detect changes in the object’s internal value immediate: true, the callback is immediately triggered with the current value of the expression

5. What does computed mean? What is the difference between computed and using a function directly to calculate attributes?

Evaluating a property evaluates the value of the property, listening for the original value. Computed is cached based on their responsive dependencies. They are reevaluated only when the associated reactive dependencies change. A function that performs a computed display is re-executed every time the render is refreshed.

6. Do you know any way to go through a number set?

Don't answer twice. slightlyCopy the code

7. What is the difference between forEach and for loops?

The for loop can be broken but forEach cannot

8. What is the difference between a deep copy and a shallow copy? What are the specific implementation methods?

Shallow copy: A copy of a value. [...a],concat() Deep copy: Copies a value with an address to another address. If an Object has only one layer, you can use object. assign to implement deep copy.Copy the code

9. What are the problems with implementing deep copy for json.stringify and json.parse?

Parse json. stringify if obj has a time object, then json. stringify will return the time as a string. Rather than a time object; If there are RegExp and Error objects in obj, the serialization result will be empty objects. If obj has a function called undefined, then the serialization result will lose the function or undefined. 4. If obj contains NaN, Infinity, and -infinity, the serialized result will be null; Json.stringify () serializes only the enumerable properties of the object. For example, if the object in obj is generated by a constructor, using json.parse (json.stringify (obj)) deep copy will discard the object's constructor.Copy the code

What’s the difference between let and var? What is the effect of printing a variable a outside the function using console.log before let?

var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

VM34:4 Uncaught ReferenceError: Cannot access 'tmp' before initialization
    at <anonymous>:4:7
Copy the code

11. What happens when functions and variables are promoted?

The function will be promoted to the top. 1. var tmp = 123;function tmp (){}
console.log(tmp) ///123

2.
function tmp (){}
console.log(tmp)
var tmp = 123; /// f tmp() {} function promotions have a higher priority than variable promotions and are not overridden by variable declarations, but are overridden by variable assignments.Copy the code

12. The difference between ‘equal’ and ‘congruence’? How is the conversion done?

When performing a double equal comparison: first check the two operand data types, if they are the same, then compare ===, if they are different, then perform a type conversion for you, then compare ===, and then compare ===, if the type is different, directly compare false. If it is already a primitive type, there is no need to cast it. If you want to cast it to a string type, x.tostring () is called. If you want to cast it to an underlying type, the value of the cast is returned. ValueOf is called if it is not a string type, and x.valueof () is called if toString is not an underlying type. If it is converted to the underlying type, it returns the converted value. If none of the original types are returned, an error is reportedCopy the code

13. How is then implemented inside a Promise? How to implement chain calls to.then?

Promise instances have THEN methods, that is, then methods defined on the prototype object Promise.Prototype. The then method returns a new Promise instance. So you can write it chained, where a then method is followed by another THEN method.

14. Where does block-level scope refer to?

  • The for loop
  • Braces for if judgment
  • Function of the internal

15. What does the arrow function do?

One use of the arrow function is to simplify the callback function.

The arrow function has several uses with caution.

(1) The this object inside the function is the object at which it is defined, not the object at which it is used. (2) Cannot be used as a constructor, that is, cannot use the new command, otherwise an error will be thrown. (3) You can’t use arguments. This object does not exist in the function body. If you do, use the REST argument instead. (4) Yield cannot be used, so arrow functions cannot be used as Generator functions.

16. How do I authenticate the login?

Refer to the link

17. What if the server address of the online environment is different from that of the test environment?

Refer to the link

Third company

  • Number of social security participants: 5,000 +
  • Company industry: Comprehensive industry

F (n)=f(n-1)+f(n-2); f(n)=f(n-1)+f(n-2); f(n)=f(n-1)

Recursive:

function f(n){
  if(n<=1){
      return n
  }
  return f(n-1)=f(n-2)
}
Copy the code

Cycle:

function f(n){
    if (n <= 1) return n;

    let first = 0;
    let second = 1;
    let result = 0;
    for (let i = 2; i <= n; i++)
    {
        result = first + second;
        first = second;
        second = result;
    }

    return result;
}
Copy the code

2. Implement the function sum (1) (2) (a) = 3 sum (1) (2) (3) (a) = 6 sum (2) = 2 sum () = 0

function sum() {
  let args = [...arguments];
  return function () {
    let inargs = [...arguments];
    if (arguments.length === 0) {
      let me = 0;
      for (let num of args) {
        me += num;
      }
      return me;
    }
    else
      return sum.apply(this, args.concat(inargs))
  };
}
Copy the code

3. Use the program to implement the input expression x = “1 2 + 2 + 5 4 + -“, and output the execution result of the expression. In the inverse Polish form, the operator comes after the operand. For example, when saying “three and four,” write “3, 4 +” instead of “3+4.”

function calc(expr) {
  if(! expr)return 0;  
  let arr = expr.split(' ')
  let elems = []
  let item;
  
  while (item = arr.shift()) { 
    if(! isNaN(+item)) { elems.push(+item) }else {
      var res = count(item, elems.pop(), elems.pop())
      elems.push(res)
    }
  }

  function count (opera, num1, num2) {
    switch (opera) {
      case '+':
        return num2 + num1
      case The '-':
        return num2 - num1
    }
  }
  return elems.pop()
}
Copy the code

4. Implement a React component

//+ has two parts, the top input box, the bottom name list, can use antD component, or not, can use native input and ul Li. The data in the list can be filtered in real time as input is entered. Displays the entire list when no input is entered. //+ Accordingly, the component has a property names on the props to accept the names of people. It’s an array of strings. For example [‘Zhang San’, ‘Li Si’, ‘Wang Wu’, ‘Zhao Liu ‘]. When we type the letter A, everything is filtered out except ‘Li Si’. Because they all contain the letter A.

import React, { Component } from 'react';
import { Input, List } from 'antd';

const { Search } = Input;

class trash extends Component {
    constructor(props) {
        super(props);
        this.state = {
            listData: []
        };
        this.originData = []
        this.changeInput = this.changeInput.bind(this);
    }
    componentDidMount() {
        this.setState({
            listData: this.props.names
        });
        this.originData = this.props.names
    }
    componentDidUpdate(prevProps){
        if(prevProps.names! ==this.props.names){ this.setState({ listData: this.props.names }); this.originData = this.props.names } } changeInput(e) {let restData = this.originData.filter(item=>{
            return! item.includes(e.target.value)||! e.target.value }) this.setState({ listData: restData }) }render() {
        const { listData } = this.state
        return (
            <div>
                <Search
                    placeholder="Please search the name you want."onChange={this.changeInput} style={{ width: 200 }} /> <List bordered dataSource={listData} renderItem={item => ( <List.Item> {item} </List.Item> )} /> </div> ); }}export default trash;
Copy the code

5. Do you understand higher-order functions? What are you doing with it?

A function that takes another function as an argument is called a higher-order function. For example, forEach and map

6. What’s the difference between recursion and loop? What kind of problem is recursion usually used to solve?

Recursive algorithm:

Advantages: The code is concise, clear, and easy to verify correctness.

Disadvantages: 1, its operation requires more times of function calls, if the call layer is deep, each time to create new variables, need to increase the stack processing, will have a certain impact on the execution efficiency, occupy too much memory resources. 2. The running efficiency of recursive algorithm is low. In the recursive call process, the system creates a stack for each layer of return points, local variables, etc. Too many recursion times may cause stack overflow

Loop algorithm:

Advantages: fast speed, simple structure.

Cons: Doesn’t solve every problem. Some problems are suitable for recursion rather than looping. Use loops if they are not difficult to use

7. What is the React lifecycle?

8. How does Flex achieve horizontal and vertical centering? How do I make two things of unequal height equal height?

Horizontal center: justify-content:center; Align -items:center; Make two items equal height: align-items:stretch;Copy the code

9. Explain what prototype chain means. What does the class in ES6 have to do with the prototype chain?

When accessing an object’s properties, look in the base properties first, and if not, look up the __proto__ chain, which is the prototype chain. Reference link. Classes can be inherited through the extends keyword, which is much cleaner and more convenient than ES5’s inheritance through modified prototype chains.

10. What is the significance of the arrow function? Where does this point to?

That was answered.

11. What do you find most enjoyable about a job?

slightly

12. If something goes wrong in the online environment, what is the current handling process of your project?

1. Locate the bug and find the corresponding error log. 2. 4. After passing the test, merge the code to master and go online. (The premise is to ensure that everything is ok, including the data generated by the bug will not affect the online, etc.)

13. Do you have any problem reading English documents?

14. What is your future front-end development direction? slightly

Fourth company

  • Number of social Security participants: 1000+
  • Company industry: Software and information technology services

1. How to solve the problem that the front-end processing speed is too slow?

Optimize the algorithm, put it in the back end, or use webworker

2. Have you ever done responsive layout? What is the specific implementation?

Refer to the link

3. Min – height and! What happens when you set important at the same time?

Min-height takes effect first and overwrites it! importantCopy the code

4. What are redraw and reflow? What causes redrawing? What causes reflux?

When part (or all) of the Render Tree needs to be rebuilt due to changes in element size, layout, hiding, etc. This is called backflow and does not affect layout, such as background-color. It’s called redrawing.

Backflow will certainly cause redrawing, and redrawing will not necessarily cause backflow. Refer to the link

5. How will the animation effect be different if it is implemented with JS and CSS?

CSS animation advantages:

(1) The browser can optimize the animation.

1. Browsers use a similar mechanism to requestAnimationFrame. RequestAnimationFrame The main benefits of setInterval are :1)requestAnimationFrame brings together all DOM operations in each frame in a single redraw or reflow, and the redraw or reflow interval closely tracks the browser refresh rate, which is typically 60 frames per second. 2) requestAnimationFrame does not redraw or recycle hidden or invisible elements, which of course means less CPU, GPU and memory usage.

2. Enforce hardware acceleration (using GPU to improve animation performance)

(2) The code is relatively simple and the direction of performance tuning is fixed

(3) For low version browsers with poor frame speed, CSS3 can be naturally degraded, and JS needs to write extra code

JS animation

(1)JavaScript animation control ability is very strong, you can control the animation in the process of animation playback: start, pause, replay, terminate, cancel can be done.

(2) animation effect than CSS3 animation rich, some animation effects, such as curve movement, impact flicker, parallax scrolling effect, only JavaScript animation can be completed

(3)CSS3 compatibility problems, and JS most of the time there is no compatibility problems

Disadvantages:

(1)JavaScript runs in the main thread of the browser, and there are other JavaScript scripts, style calculation, layout and drawing tasks that need to be run in the main thread, which may block the thread and cause frame loss.

(2) Code complexity is higher than CSS animation

6. What are the basic types of JS?

Basic types: String, Number, Null, Undefined, Boolean, Symbol, BigIntCopy the code

7. Which version of bigInt came out? Is it used at work?

es10

8. What is the difference between let and var? Variables declared by var can be read by window, but let can be read by window. why

Var has an enhancement that we can use before declaration. Let and const cannot declare variables in global scope using var before declaration due to temporary dead zones. This will cause variables to be mounted on the window

The let command is not mounted to the window. It is valid in the code block where the let command is located.

9. What is the difference between const and let? Can an object declared by const change its contents after being set?

Const declares a read-only constant. Once declared, the value of a constant cannot be changed. Const has the same scope as the let command: it is only valid in the block-level scope in which the declaration is made. Declared constants are also non-promoted and have temporary dead zones that can only be used after the declared position.

10. What is the storage difference between reference types and primitive types?

Values of primitive types are stored directly in the stack, and values of reference types are stored in the heap

11. Explain what closure means.

According to the rules of lexical scope, internal function can always access the variable declaration in the outer function, and when by calling an external function returns after an internal function, even if the end of the external function have been executed, but the variables of internal function refer to external function is still kept in memory, we sent the collection of these variables is called closure.

How does the js garbage collection mechanism work?

ESP is released when it moves down the stack

In V8, the heap will be divided into new generation and old generation, with the new generation storing short-lived objects and old generation storing long-lived objects.

  • The secondary garbage collector is responsible for the new generation of garbage recycling: Scavenge algorithm to process. The Scavenge algorithm is the splitting of the Cenozoic space into two areas, half the insane and half the insane. .
  • Main garbage collector, mainly responsible for old generation garbage collection

13. What methods do loop arrays have?

Don’t answer twice. slightly

Can I loop for of objects? Can for in loop through an array?

It is not possible to loop objects. A data structure that deploys the Symbol. Iterator attribute is considered to have an iterator interface. The of loop iterates through its members. The object does not have symbol. iterator. For in loop can loop through an array. Yes, you can only get the key.

15. What is the value of the return parameter in the for in loop?

For in gets all key values.

16. What is the return value of map? What is it for?

Map returns a processed array

17. Can the map loop be broken?

The map loop cannot be broken and cannot be set to break

18. What is the return value of forEach?

Returns the undefinedCopy the code

19. What methods do arrays need to reuse? How to remove the weight of a pure number?

Points. New Set(array) to remove the weight.

20. What is the general idea of deep copy implementation? Why would you copy an object if you use recursion?

Refer to the link

21. What if an object nested within the same object forms a loop?

Refer to the link

22. What are the effects and differences between apply and call?

Both are this values specified when fun is run, except fun.call(thisArg, arg1, arg2… Fun. apply(thisArg, [argsArray]) apply puts the arguments of the function in the second argument in an array, call is passed in argument by argument.

23. What is the difference between arrow functions and ordinary functions? Does arrow function have arguments?

Don’t answer twice. A little.

24. Can arrow functions be used as constructors?

Can’t. This is already bound when the arrow function is created.

25. What are the other ways to implement function inheritance?

Refer to the link

26. How is stereotype chain inheritance or constructor inheritance implemented?

Same as above

27. How is factory code inherited?

On the same

28. How does object.definedProperty work? What’s the use?

The object.defineProperty () method directly defines a new property on an Object, or modifies an existing property of an Object, and returns the Object. Refer to the link

29. Vue3.x uses what to listen for data instead of Object.definedProperty. What are the benefits of Proxy?

Refer to the link

30. Do you know the common methods of Proxy?

Refer to the link

31. What are the usage scenarios of map and set?

Map is suitable for storing key-value pairs of data sets, but does not store duplicate elements. Therefore, it is inefficient to retrieve elements, and efficient to delete and insert elements.

32. What are the types of key values of objects?

String, Symbol

33. Do you know the scene of weakSet and weakMap? Generally speaking, the key value of map can also be an object, so why use weakMap?

WeakSet structure is similar to Set, which is also a collection of non-repeating values. However, there are two differences between it and Set: First, WeakSet members can only be objects, not other types of values. Secondly, all objects in WeakSet are weak references, that is, garbage collection mechanism does not consider WeakSet’s reference to the object.

WeakMap structure is similar to Map structure and is also used to generate a set of key-value pairs. The object to which the key name of WeakMap points is not included in the garbage collection mechanism. If it is not used, manually delete it. WeakMap differs from Map in API mainly in two aspects: first, there is no traversal operation (that is, no keys(), values() and entries() methods, and no size attribute. Second, it cannot be cleared, that is, the clear method is not supported.

34. What is the concept of ES6 decorator? What is an iterator?

The decorator is not installed. A Decorator is a class-related syntax for annotating or modifying classes and class methods. An Iterator is one such mechanism. It is an interface that provides a unified access mechanism for various data structures. The Iterator interface can be deployed on any data structure to complete traversal (that is, processing all members of the data structure in turn).

35. What is the browser’s event loop mechanism?

Refer to the link

36. What is a typical microtask? What about macro tasks? Who will be executed first?

Same as above

37. What are the routing modes of vueRouter? How does each pattern work?

Configure the routing mode:

Hash: Uses the URL hash value for routing. Support for all browsers, including those that don’t support the HTML5 History Api. History: Relies on the HTML5 History API and server configuration. Check out the HTML5 History mode. Support all JavaScript runtime environments, such as node.js server side. If you find no browser. API, routing is automatically forced into this mode.

Principle reference: juejin.cn/post/684490…

38. How to monitor hash route changes?

Refer to the link

39. How do cross-domain problems arise? What are the different interfaces that cross domains?

Refer to the link

40. How to deal with cross-domain problems? How is the underlying implementation implemented?

Same as above

41. What is Jsonp for?

Refer to the link

42. How does browser caching work? When does the Http status code return 304?

43. What are the common understandings of Webpack?

slightly

44. Have you used typeScript in your project?

slightly

The current summary

One side of the foundation of the relatively high frequency of the present encounter

  • How is cross-domain implemented
  • Array operations
  • How is deep copy implemented

Have more interview experience to share with you again ~ if you have any questions, welcome to correct ~ along with a thumbs up.