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

This article mainly introduces "what are the JavaScript skills that intermediate front-end engineers must master". In daily operation, I believe many people have doubts about the JavaScript skills that intermediate front-end engineers must master. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "what JavaScript skills that intermediate front-end engineers must master". Next, please follow the editor to study!

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.

7. Reduce method of realizing array by ES5

8. Using reduce to implement the flat method of array

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

The principle traverses the array through reduce, and when it encounters that an element of the array is still an array, it is reduced by the extension operator of ES6 (ES5 can use the concat method), and the array element may also 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 that the depth parameter is subtracted by 1 each time recursive, and 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 way of inheritance 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, you can realize 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).

The class of ES6 allows subclasses to inherit the static methods and static properties of the parent class, while the ordinary parasitic combined inheritance can only achieve the inheritance between instances, and additional methods are needed for the inheritance between classes. Here, Object.setPrototypeOf is used to set superType as the prototype of subType, so that 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 that uses multiple parameters into a series of functions that use one parameter.

Functional programming another important function compose, can combine functions, and the combined function only accepts 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 Yuanyu'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 only 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 Corialization 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 binding function's parameter list. 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 to make use of call, while 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), where ES6's Symbol type 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 yield is parsed successfully, it will automatically call the next method to execute to the next yield keyword. Eventually, it will form every time a promise is parsed successfully, the next promise will be parsed. When all parsing is successful, all parsing results will be printed, which will evolve into the most frequently used async/await syntax.

17. Function anti-shaking

Leading is whether it is executed immediately when entering, 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 period of 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 automatically triggered after the specified time.

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

The implementation of getBoundClientRect is to listen to 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 are loaded.

The implementation of intersectionObserver is to instantiate an IntersectionObserver and make 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 DOM node corresponding to the current element, and the ratio of the current element to enter the visual area. Whenever an element enters the visual area, the real image is assigned to the current img tag and the observation is released.

20. New keyword

21. Implement Object.assign

The principle of Object.assign can refer to another blog post of mine.

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 for all variables that start with _ to make them inaccessible from the outside.

Saving private variables in the form of closures has the disadvantage 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 simplicity 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, and 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 will use insert sorting for arrays with elements less than 10, which will cause the array to be out of order and not really out of order. Even if the latest version of chrome uses the in-situ algorithm to make sorting a stable algorithm, the problem of disorder has not been solved.

Through the shuffle algorithm can achieve real disorder, shuffle algorithm is divided into in-situ and non-in-situ shuffle algorithm, figure 1 is the in-situ shuffle algorithm, there is no need to declare additional arrays to save memory occupancy, the principle is to traverse the elements of the array in turn, the current element and all the elements after randomly selected one, swapped.

25. Singleton mode

A singleton pattern implemented through the execution method of ES6's Proxy intercept constructor.

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 be executed after the last callback function is executed, regardless of success or failure. All we need to do is 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:

Do not need to use async/await to wrap a layer of try/catch, more elegant, here is another idea, if you use webpack, you can write a loader, analyze the AST syntax tree, encounter await syntax, automatically inject try/catch, so that even auxiliary functions do not need to be used.

At this point, the study of "what are the JavaScript skills that intermediate front-end engineers must master" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.