An interview question from a big guy who has worked in the front-end for 5 years, see how many you can answer correctly

Hits: 0

JS interview questions

  • What is the output of the following code?

function sayHi() {
        console.log(name)
        console.log(age)
        var name = 'Lydia'
        let age = 21
      }
      sayHi()

Undefined error report (var has variable promotion, let does not, so an error will be reported when using let, and it is not defined before use)
  • What does the following code output?

const shape = {
        radius: 10,
        diameter() {
          return this.radius * 2
        },
        perimeter: () => 2 * Math.PI * this.radius
      }
      shape.diameter()
      shape.perimeter()

20 NAN (this points to the problem, the second is NAN because of implicit conversion, this.radius in the arrow function is undefined, so the Number method is used by default for implicit conversion, and finally it is NAN)
  • What is the output of the following program?

function Foo(){
        var i = 0;
        return function(){
          console.log(i++);
        }
      }
      where f1 = Foo(),
      f2 = Foo();
      f1();
      f1();
      f2();

0 1 0 (closure, two points of attention, save the parent scope variable, i++ is used first and then added)
  • Create a function to convert strings to camel case

var res = /-([a-z])/g
        var ss = "ss-qsd-i"
        ss = ss.replace(res,(p,v)=>{
            console.log(p)
            console.log(v)
            return v.toUpperCase()
        })

  • What does the following code output?

const promise = new Promise((resolve, reject) => {
        console.log(1)
        resolve()
        console.log(2)
      })
      promise.then(() => {
          console.log(3)
      })
      console.log(4)

1243 (Event loop, note: promise is synchronous, it will be executed when it comes up, .then is the asynchronous operation executed.)
  • Difference between GET and POST, when to use POST?

1. The parameters of the  get request are in plain text (http: //localhost:8080?id=1) The parameters of the post request are placed in the request body, so relatively speaking, post is more secure than get 
2.  The length of the url of the get request Due to the limitations of the browser and the web server, the length will be limited, but the parameters of the post are not limited
 . 3. The  get request will be recorded by the browser (for example, I often delete the history) but the post request will not.
4. For the data type of parameters, GET only accepts ASCII characters, while POST has no restrictions.
5. GET generates one TCP packet; POST generates two TCP packets. For a GET request, the browser sends the http header and data together, and the server responds with 200 (returning data); for POST, the browser sends the header first, the server responds with 100  continue , the browser sends the data, and the server responds 200 ok (return data).
6. GET has cache, POST does not

View Interview Questions

  • Talk about the difference between v-show and v-if
v-if determines whether to create and destroy DOM nodes, which consumes a lot, while v-show controls the CSS style (display: none, display: block). It consumes less, so when the page needs to judge whether it appears more often, it is suitable to use v-show.
  • How to communicate between Vue components
$emit props vuex v-model provide inject browser local storage ref $children $parent $attr $listener etc.
  • The life cycle execution order of Vue parent component and child component (when initialized, when child component data is updated)
The parent component processes its own data data (beforecreate created) –> to start rendering (beforeMount) –> parses the child component, the child component processes its own data (beforeCreate created) –> the child component starts rendering (beforeMount mounted) –> The parent component is rendered (mounted)
When subcomponent data is updated
Child component’s own update: beforeUpdate Updated parent component unchanged (diff algorithm, virtual DOM will try to reduce reflow and redraw)
When the parent component changes the child component: parent beforeUpdate child beforeUpdate Updated parent Updated
  • Why does Vuex divide modules and add namespaces

Modules: Due to the use of a single state tree, all the state of the application will be concentrated into a relatively large object.
When the application becomes very complex, the store object has the potential to become quite bloated.
To solve the above problems, Vuex allows us to split the store into modules.
Each module has its own state, mutations, actions, getters , and even nested submodules.
Namespaces: By default, actions, mutations and getters inside modules are registered
in the global namespace - this enables multiple modules to respond to the same mutation or action
. If you want your module to have higher encapsulation and reusability, you can add
namespaced: true
 way to make it a namespaced module. When the module is registered,
 All its getters , actions and mutations are automatically named according to the path registered by the module.

  • Vuex page refresh data loss how to solve
Store data in the browser’s local cache (LocalStorage, SessionStorage) or some other third-party plugin
  • What Vue performance optimizations have you done during development?

The object hierarchy should not be too deep, otherwise the performance will be poor
Do not put data that does not require responsiveness in data (you can use Object.freeze() to freeze data)
v-if and v- show distinguish usage scenarios
Computed and watch distinguish usage scenarios
v - for traversal must add key , the key is preferably the id value, and avoid using v- if at the same time
Big Data List and Table Performance Optimization - Virtual List/Virtual Table
Prevent internal leakage, destroy global variables and events after the component is destroyed
image lazy loading
Route lazy loading
On-demand introduction of third-party plugins
Appropriate use of keep -alive cache components
Anti-shake, throttling application
Server-side rendering SSR or pre-rendering

You may also like...

Leave a Reply

Your email address will not be published.