Shulou(Shulou.com)06/03 Report--

What are the 27 JavaScript skills that intermediate front-end engineers must master? in view of this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

1. Determine the data type

Using Object.prototype.toString with closures can not only ensure the accuracy of judging data types, but also make this function very flexible, and return different judgment functions by passing in different judgment types (note that the first letter of the type parameter is capitalized)

2. ES5 to implement array map method

It is worth mentioning that the second parameter of map is the this point in the first parameter callback. If the first parameter is an arrow function, setting the second this will fail because of the lexical binding of the arrow function.

3. Using reduce to implement Array map method

4. ES5 to implement array filter method

5. Using reduce to implement Array filter method

6. Some method of realizing array by ES5

The array that executes the some method will always return false if it is an empty array, while the array in the every method of another array will always return true if it is an empty array

Here the editor has built a front-end learning and exchange QQ group: 132667127, I have sorted out the latest front-end materials and advanced development tutorials, if you want, you can join the group to learn and communicate together.

7. Reduce method of realizing array by ES5

8. Using reduce to implement the flat method of array

Because selfFlat depends on this pointing, you need to specify the this point of selfFlat when traversing the selfFlat, otherwise it will point to window by default and an error will occur.

The principle traverses the array through reduce. When an element of the array is still an array, it is reduced by the extended operator of ES6 (ES5 can use the concat method), and the array element may be nested internally, so you need to call selfFlat recursively.

At the same time, the native flat method supports a depth parameter to indicate the depth of dimensionality reduction, which defaults to 1, which reduces the dimension of the array by one level.

Passing in Inifity turns the incoming array into an one-dimensional array

The principle is to subtract the depth parameter by 1 per recursion. If the depth parameter is 0, the original array is returned directly.

9. Implement the class syntax of ES6

The class of ES6 is based on parasitic combinatorial inheritance, which is the most ideal inheritance method at present. Create an empty object through the Object.create method, inherit the parameters of the Object.create method, and then make the prototype object of the subclass (subType) equal to the empty object, so that the prototype of the subclass instance is equal to the empty object, and the prototype of the empty object is equal to the inheritance relationship of the parent class prototype object (superType.prototype).

While Object.create supports the second parameter, that is, defining properties and property descriptors / accessor descriptors for the generated empty object, we can define a constructor property for this empty object that is more consistent with the default inheritance behavior, and it is an internal property that cannot be enumerated (enumerable:false).

ES6's class allows subclasses to inherit static methods and static properties of parent classes, while ordinary parasitic combined inheritance can only achieve inheritance between instances. Additional methods are needed for class-to-class inheritance. Here, Object.setPrototypeOf is used to set superType as the prototype of subType, so static methods and static properties can be inherited from the parent class.

10. Corialization of function

How to use it:

Corialization is an important technique in functional programming, which converts a function with multiple parameters into a series of functions with one parameter.

Another important function of functional programming, compose, can combine functions, and the combined functions accept only one parameter, so if there is a need to accept multiple functions and need to use compose for function combination, you need to use Corialization to partially evaluate the function to be combined, so that it always accepts only one parameter.

To borrow an example from Qianyu's blog

11. Corialization of functions (placeholders are supported)

How to use it:

The idea is that the parameters passed in each round first fill in the placeholders of the previous round, and if the parameters of the current round contain placeholders, they will be placed at the end of the internally saved array. The elements of the current round will not fill in the placeholders that act as the parameters of the front wheel, but will only fill the placeholders previously passed in.

twelve。 Partial function

How to use it:

The concept of partial function is similar to that of Corialization. Personally, I think the difference between them is that the partial function will fix several parameters you pass in, and then accept the remaining parameters at one time, while the function Corrialization will constantly return the function according to the parameters you pass in. Until the number of parameters satisfies the number of parameters of the function before it is Corialized.

The Function.prototype.bind function is a typical representative of a partial function. The second argument it accepts starts with a parameter that is pre-added to the parameter list of the binding function. Unlike bind, the above function also supports placeholders.

13. Fibonacci sequence and its Optimization

Using function memory to save the results of previous operations can save a lot of time for calculations that frequently rely on previous results, such as Fibonacci series, but the disadvantage is that the obj objects in the closure will take up extra memory.

14. Implement the function bind method

The core of the bind method of the function is the use of call, taking into account some other situations, such as

When the function returned by bind is called by new as the constructor, the bound value is invalidated and changed to the object specified by new

Defines the length property and name property of the bound function (non-enumerable property)

The prototype of the bound function needs to point to the original function.

15. Implement the function call method

The principle is to execute the function as a property of the incoming context parameter (context). Here, the Symbol type of ES6 is used to prevent property conflicts.

16. Simple CO module

How to use it:

The run function accepts a generator function, and whenever the generator function wrapped by the run function encounters the yield keyword, it will stop. When the promise after the yield is parsed successfully, it will automatically call the next method to execute to the next yield keyword. Eventually, whenever a promise is parsed successfully, the next promise will be parsed. When all the parsing is successful, the results of all parsing will be printed, which evolves into the most frequently used async/await syntax.

17. Function anti-shaking

Leading is whether it is executed immediately upon entry, and trailing is whether it is triggered again after the event is triggered. The principle is to use a timer. If the event is triggered again within a specified time, the last timer will be cleared, that is, the function will not be executed and a new timer will be reset until the function in the timer is triggered automatically after the specified time is exceeded.

At the same time, a cancel function is exposed through the closure, so that the external counter can be cleared directly.

18. Function throttling

Similar to function anti-shake, the difference is that an additional timestamp is used internally as a judgment, and no event is triggered for a period of time to allow the next event to be triggered.

19. Picture lazy load

How to implement getBoundClientRect: listen for scroll events (it is recommended to add throttling to the events). After the images are loaded, they will be deleted from the DOM list composed of img tags. Finally, you need to unbind the listening events after all the images have been loaded.

The implementation of intersectionObserver, instantiating an IntersectionObserver and having it look at all img tags

When the img tag enters the visual area, the callback is instantiated, and an entries parameter is passed to the callback, which stores some states of all the elements observed by the instance, such as the boundary information of each element, the corresponding DOM node of the current element, the ratio of the current element to enter the visual area, and each time an element enters the visual area, it assigns the real picture to the current img tag and removes its observation.

20. New keyword

21. Implement Object.assign

The principle of Object.assign can refer to my other blog.

twenty-two。 Instanceof

The principle is to recursively traverse the prototype chain of the right parameter, comparing it with the left parameter each time, returning false when traversing to the end of the prototype chain, and returning true if found.

23. Implementation of private variables

Use the Proxy proxy to make all variables that start with _ inaccessible to the outside world

Save private variables in the form of closures. The disadvantage is that all instances of the class access the same private variables.

Another implementation of closures solves the shortcomings of the closures above. Each instance has its own private variable. The disadvantage is that it abandons the conciseness of class syntax and stores all privileged methods (methods that access private variables) in the constructor.

With WeakMap and closures, objects composed of the current instance and all private variables are saved at each instantiation. The WeakMap in the closure cannot be accessed externally. The advantage of using WeakMap is that there is no need to worry about memory overflow.

24. Shuffle algorithm

Earlier chrome would use insert sorting for arrays with elements less than 10, which would cause the array to be out of order. Even if the latest version of chrome uses an in-place algorithm to make sorting a stable algorithm, the problem of out-of-order has not been solved.

Through the shuffle algorithm, the real disorder can be achieved. The shuffle algorithm is divided into in-situ and non-in-situ. Figure 1 is the in-situ shuffle algorithm, which does not need to declare additional arrays to save memory occupancy. The principle is to traverse the elements of the array in turn, randomly select one of the current elements and all subsequent elements, and swap them.

25. Singleton mode

A singleton pattern implemented by the execution method of the Proxy interception constructor of ES6

twenty-six。 Promisify

How to use it:

The promisify function is an auxiliary function that changes the callback function into promise, which is suitable for the callback function of error-first style (nodejs). The principle is that the callback function of error-first style will execute the last callback function no matter whether it succeeds or fails. What we need to do is to let this callback function control the state of promise.

Here, Proxy is used to proxy the entire fs module and intercept the get method, so that there is no need to manually wrap all the methods of the fs module with a layer of promisify functions, which is more flexible

twenty-seven。 Elegant handling of async/await

How to use it:

There is no need to wrap a layer of try/catch every time you use async/await, which is more elegant. Here is another idea. If you use webpack, you can write a loader, analyze the AST syntax tree, encounter await syntax, and automatically inject try/catch, so that even auxiliary functions do not need to be used.

The answers to the 27 JavaScript skills that intermediate front-end engineers must master are shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.