This is the third day of my participation in the Gwen Challenge

Js several ways to loop through the array

See article JS on four types of loops

  • for… In (traverses all properties of the object, as well as properties on the prototype chain).
  • ForEach (traversal cannot break), some can be used to break when certain conditions are met.
  • for… Of, iterating over iterables, is more suitable for arrays, and can be used to select iterated keys when iterating over other iterables.
  • Iterator, Iterator through [Symbol. Iterator], call Iterator interface Next method, iteration is more flexible.

Typeof and instanceOf

  • Using TypeOF to determine basic data types is OK. Note the problem with typeOF determining null types
  • Instanceof is used to determine an Object, but when instanceof determines an array, it can be judged as Object by Instanceof, which means that it is also true for array instanceof Object
  • Want to more accurately judge the type of Object instance, adopt Object. The prototype. ToString. Call () method

Event delegation and bubbling (how to prevent bubbling)

Using the event delegate mechanism, you can broker events for all child elements by simply registering an event listener for a common ancestor element.

See articles from the event propagation bubbling phase to event delegation

Tips:

  • Event handlers registered with addEventListner are executed in the order of registration
  • IE9 previously used attachEvent, which is now obsolete, so I won’t discuss it much
  • Dom event propagation phase: The event is captured, the target object invokes the event handler, and the event bubbles. Whether the event is fired in the capture phase or the bubble phase depends on the third parameter if addEventListner is used
  • There are ways to add events to the Dom: addEventListner (DOM2 level) and directly add event attributes (Dom level), as well as HTML additions, such as onClick, using JAVASCRIPT scripts that override htML-defined attributes.
  • According to the rules of the order in which event handlers are called, setting event handlers for attributes of a DOM element or other object is always executed first and then in the order in which they were registered, so it doesn’t matter where we place the event handlers for the ONclick property of a DOM element, The onclick event handler is always executed first in the console.

How to understand event delegation

Event delegation essentially takes advantage of event bubbles, and there are many events that do not bubble, such as focue,blur, etc. It proxies an event type for all its children by registering an event type for the ancestor element, and adds event listeners to the parent element to listen for events in the bubbling phase. This allows us to retrieve the time target object via the target attribute, which bubbles to the ancestor element. Let’s take click as an example of how to write a complete event delegate function:

<div class="wrap" id="wrap">
	<div class="btn" data-type="btn" data-feat="add">add</div>
	<div class="btn" data-type="btn" data-feat="delete">painting</div>
	<div class="btn" data-type="btn" data-feat="delete">Take a walk</div>
	<div class="btn" data-type="btn" data-feat="delete">sit</div>
</div>
Copy the code
document.getElementById('wrap').addEventListener('click'.function(e){
	var target = e.target;
	while(target ! = =this) {var type = target.dataset.type;
		if(type == 'btn') {var feat = target.dataset.feat;
			switch(feat){
				case 'add':
					this.innerHTML += 
      
 
      

					return;
				case 'delete':
					target.parentNode.removeChild(target);
					return; } } target = target.parentNode; }},false);

Copy the code

This article is also good: DOM events are all sorted out from the DOM event level, and DOM events flow to event delegates

DOM0, DOM2 and compatibility issues are covered

How do I stop bubbling

  • Window. The event. StopPropagation or set cancelBubble to true compatible (IE)

What are the ways to add events to the Dom

  • Dom0-level event handling vs. Dom1-level event handling: DOM1 can easily be overwritten by adding multiple event handlers, whereas DOM2 can.
  • There are ways to add events to the Dom: addEventListner (DOM2 level) and directly add event attributes (Dom level), as well as HTML additions, such as onClick, using JAVASCRIPT scripts that override htML-defined attributes.
  • The problem with HTML event handlers — because essentially eval is a function that executes javascript statements written in HTML tags, an error is reported if the user clicks on the interface as soon as it appears and js is not yet loaded. The second problem is that it violates the principle of light coupling, because a change in an event handler may change the function name in the HTML as well as the function implementation in the JS file.

What are the new features in ES6+ and which ones you use most often

  • New features in ES6 are particularly common. Classes, modularity, arrow functions, function parameter defaults, template strings, deconstructed assignments, extended operators, promises, lets, and const
  • ES7: Array.prototype.includes()
  • ES8: Async /await, String padding: padStart() and padEnd()
  • ES9: Rest/Spread property, for await of, promise.finally ()
  • ES10: array.prototype.flat (), array.prototype.flatMap (), String trimPad() and trimEnd()
  • ES11: Promise.allSettled, null-value merge operator and optional chain
  • ES12: Logical assignment operator, number separator, promise.any ()

The most useful

  • All ES6
  • ES8: Async /await(async ultimate solution)
  • ES9: for await of(async serial), promise.finally ()
  • ES11 promise.allSettled (resolve promise.all to return false results whenever a request fails)
  • Logical assignment operators, number separators, null value merge operators, optional chains.

See the es6 and ES6 + capability sets for details

The last

If you feel useful, welcome to support ~

Any inappropriate comments are welcome in the comments section.