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

This article mainly explains "what are the JavaScript skills that need to be mastered". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what JavaScript skills need to be mastered.

1. Determine the data type of the object

Using Object.prototype.toString with closures, return different judgment functions by passing in different judgment types, one line of code, concise, elegant and flexible (note that the first letter is capitalized when passing in type parameters)

It is not recommended to use this function to detect basic data types that may produce a wrapper type, because call will box the first parameter.

2. ES5 to implement array map method

Image

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.

Another is the processing of sparse array, through hasOwnProperty to determine whether the current subscript element exists in the array (thanks to the friends in the comment area)

3. Using reduce to implement Array map method

Image

4. ES5 to implement array filter method

Image

5. Using reduce to implement Array filter method

Image

6. Some method of realizing array by ES5

Image

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

If you are interested in the technology of front-end development, here is a recommendation to my front-end learning exchange group: 767273102, which is full of learning front-end from the most basic HTML+CSS+JavaScript. JQuery,Ajax,node,angular waited until the actual combat data of the mobile HTML5 project were sorted out and sent to every front-end partner. The latest technology, synchronized with the needs of the enterprise. Friends are inside to learn and communicate, every day there will be Daniel regularly explain the front-end technology!

7. Reduce method of realizing array by ES5

Image

Because there may be sparse arrays, the implementation of reduce is a little complicated, so you need to make sure to skip sparse elements, traverse the correct elements and subscripts, and have a more concise way to welcome comments in the comments area.

8. Using reduce to implement the flat method of array

Image

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.

Image

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

Image

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

Image

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

Image

How to use it:

Image

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

Image

11. Corialization of functions (placeholders are supported)

Image

How to use it:

Image

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

Image

How to use it:

Image

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

Image

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

Image

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

Image

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

Image

How to use it:

Image

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

Image

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

Image

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

Image

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.

Image

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

Image

21. Implement Object.assign

Image

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

twenty-two。 Instanceof

Image

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

Image

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

Image

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

Image

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.

Image

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.

Image

Image

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

Image

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

twenty-six。 Promisify

Image

How to use it:

Image

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 also 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

Image

How to use it:

Image

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.

twenty-eight。 Publish and subscribe EventEmitter

Image

The on method registers the event, and the trigger method triggers the event to achieve loose decoupling between events, and additional once and off helper functions are added to register events that are triggered only once and to log out events

Thank you for your reading, the above is the content of "what JavaScript skills need to be mastered". After the study of this article, I believe you have a deeper understanding of what JavaScript skills need to be mastered, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.