preface

Although various frameworks have emerged to replace Js operations, at the end of the day, it is implemented in Js, and a solid foundation will serve you well in moving forward

directory

  • Javascript data types
  • Javascript commonly used array manipulation methods
  • Javascript common object manipulation methods
  • Javascript event model – Bubble – Event object – Event delegate/proxy

First, the data type of Javascript

What data types Javascript has

Javascript generally has two types of data, the basic data type and the reference data type. Basic data types include Undefined, Null, Boolean, Number, String, and Symbol (added in ES6 to represent unique values). Reference data types include objects, arrays, and functions. Object,

So how do you verify these data types?

1. Common typeof basic data types

Return a string representing the data type. The returned result includes: number, Boolean, string, symbol, object, undefined, function and other 7 data types

typeof ' '; // string 
typeof 1; // number 
typeof true; //boolean 
typeof undefined; //undefined 
typeof new Function(a);// function 
typeof Symbol(a);// symbol 
typeof null; //object 
typeof[];//object 
typeof{};//object
Copy the code

You can see that the array, the object, the return is all object, so you need to use another method.

2. ES6 grammar instanceof

[] instanceof Array; 
//true
{} instanceof Object; 
//true
Copy the code

3. By tracing the prototype to check its properties type Object. The prototype. ToString. Call

Object.prototype.toString.call({})
//"[object Object]"
Object.prototype.toString.call([])
//"[object Array]"
Copy the code

4. Constructor

var obj = {}
obj.constructor == Object
//true
var arr = []
arr.constructor == Array
//true
Copy the code

Two, Javascript commonly used array operation methods

1. Push incrementing (parameter) at last bit of array

var arr = [1.2.3.4.5.6]; arr.push(7);/ /,2,3,4,5,6,7 [1]
Copy the code

2. Pop removes the last bit of the array and returns the last element without any arguments

var arr = [1.2.3]
arr.pop() / / 3
arr / / [1, 2]
Copy the code

3. Unshift increments the first digit in the array

var arr = [1.2.3.4.5]
arr.unshift(0) / / 6
arr // [0, 1, 2, 3, 4, 5]
Copy the code

4. Shift removes the first digit from the array and returns the first element without arguments

var arr =  [0.1.2.3.4.5]
arr.shift() // [1, 2, 3, 4, 5]
Copy the code

5. Splice replaces elements

/ / 1
var arr = ['aa'.'bb'.'cc'.'dd']
arr.splice(1.2.3.4) // ["bb", "cc"]
arr //(4) ["aa", 3, 4, "dd"]

/ / 2
arr.splice(1.2.3) / / [3, 4]
arr //(3) ["aa", 3, "dd"]

// Three parameters
//1. Start with the digit of the subscript
//2. Replace several digits
//3. The value to be replaced
// Affect the array itself
// There is a small interchange. when you replace more than two and it is equally worthwhile to use the second example, the result will merge, which needs to be noticed
Copy the code

6. Slice the elements between subscripts

var arr = ['aa'.'bb'.'cc'.'dd']
arr.slice(0.3)
//(3) ["aa", "bb", "cc"]
// Cut three elements from index 0 to index 3
// Does not affect the array itself
Copy the code

7. Join to convert a string

var arr = ['aa'.'bb'.'cc'.'dd'];
arr.join(The '-') // "aa-bb-cc-dd"
// arr.join() is separated by a, by default, and is separated by a delimiter
Copy the code

A. in reverse b. in reverse C. in reverse D. in reverse

var arr = [12.321.312.32.43]
arr.reverse() // [321, 312, 43, 32, 12]
Copy the code

9. Sort Sort the array

var arr = [12.321.312.32.43]
arr.sort() // [12, 312, 32, 321, 43]
// We can see that sort() doesn't return in the right order! See below
arr.sort(function(v1,v2){ return v1-v2 }) // [12, 32, 43, 312, 321]
// We need to pass a sort function to define the sort
// If you are interested in the sort of sorting, you can search for the console debugging, I will not say here ha
Copy the code

10. Concat is used to merge multiple arrays

var a = [1.2.3]
var b= [4.5.6]
a.concat(b) // [1, 2, 3, 4, 5, 6]
Copy the code

Three, Javascript commonly used object operation methods

1. Add elements

var obj = {a:1.b:2.c:3}
obj['d'] = 4; 
//obj {a: 1, b: 2, c: 3, d: 4}
Copy the code

2. Delete the element

var obj = {a:1.b:2.c:3}
delete obj.a
// obj {b: 2, c: 3}
Copy the code

3. In determines whether an element exists

var obj = {a:1.b:2.c:3}
"a" in obj // true
obj.hasOwnProperty('b') // true
Copy the code

4. Object.keys Gets the Object key

var obj = {a:1.b:2.c:3}
Object.keys(obj)
// ["a", "b", "c"] 
Copy the code

5. Object.values Obtains the value of an Object

var obj = {a:1.b:2.c:3}
Object.values(obj)
/ / [1, 2, 3]
Copy the code

6.Object.assign can be interpreted to merge objects and deduplicate them

var obj = {b: 2.c: 3.a: 123}
/ / 1
Object.assign(obj,{d:4{})b: 2.c: 3.a: 123.d: 4}

// Example 2 - Builds on example 1
Object.assign(obj,{b:10{})b: 10.c: 3.a: 123.d: 4}

// Parameter 1: target object
// Parameter 2: the object to be merged or modified to the target object (obj)
// Key will also be overwritten, otherwise add
Copy the code

Third, event model

When it comes to the Js event model, we can also understand it as a stream of events; So what is the flow of events? It goes from the capture of events to the handling of events to the bubbling of events; Such a process is the flow of events. Let’s analyze it in detail:

1. In order to have an event flow (event model), we need to have events first, so there are only a few ways to bind events to the Dom: let's take a look

  • Elements are directly bound to events
<div onclick = "fun()"></div>
Copy the code
  • Events are bound through Js scripts
<div id="event"></div>
document.getElementById("event") =function(){}
Copy the code
  • Events can also be registered dynamically through scripts
<div id="event"></div>
document.getElementById("event").addEventListener(type, handle, false);
//type: event type, such as click,keypress, etc.
//handle: an event handler that defines the changes that may occur after the event starts.
//false: indicates the event bubble model, which is generally false
Copy the code

Emmmm ~ Well, binding events are introduced with a few simple examples;

2. Then we continue to talk about the event model. As mentioned above, event flow is a process from event capture to event processing to event bubble, which can be roughly divided into three stages:

  • Capture phase: When a node event is triggered, it will search down from the root node of the Document until the event node itself is triggered, and check whether the event handler function is registered. If yes, it will be executed.

  • Processing: when the event reaches the target element, the handler of the event is executed

  • Bubbling phase: The event node itself bubbles, and looks up the parent node successively until the root node Document to check whether the listener function of the event is registered. If yes, the event is executed

Here comes a key point => bubbling

Event bubbling HTML elements are nested DOM trees. When an event on an inner element is fired, an external event is also fired from the inside out. This phenomenon is called event bubbling

  <div onclick="alert('div')">
      <p onclick="alert('p')">
        <span onclick="spanClick()">Event bubble test</span>
      </p>
    </div>
    // Alert span, p, div
Copy the code

How do I stop events from bubbling

    // stopPropagation is a common method.
    function spanClick (event) {
		 event.stopPropagation()
	}
  	// This will prevent the event from bubbling
Copy the code

Event object In the example above, you see the keyword “event” again, so what is enevt? That’s right, the event object;

When an event is triggered on a Dom node, an event object is generated that contains information about the event. Event objects are supported by all browsers. A few common properties are listed:

// currentTarget: the element that the event handler is currently processing
// target: the target element of the event
// preventDefault() : preventDefault() : cancel the default behavior of the event, e.g. click on the A TAB default jump link, click on button default submit
// stopPropagation(): cancel further capture or bubbling of events. This is often used
/ /... There are many, tao friends interested in the words can baidu search yiha
Copy the code

Note: The event object exists only during the execution of the event handler; Once the event handler completes execution, the Event object is destroyed.

Event delegation | | event agent

In JavaScript advanced programming, event delegate is the use of event bubble, only specify a single event handler, can manage a certain type of all events.

Here’s a simple example:

 //HTML
 <div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
  </div>
  
//JS
var div1 = document.getElementById('div1')
div1.addEventListener('click'.function (e) {
// Here e is the event object
// e.t. get can listen to which element triggered the click event, using the event object attribute
　　vartarget = e.targetif (e.nodeName === 'A') { // Click on the  elementalert(target.innerHTML)// The target is not limited to the innerHTML of the element that you are currently clicking on}})Copy the code

Note: If each a tag is bound to an event one by one, it is very memory consuming. With the event broker, we only need to give the parent container div binding approach, so no matter which a descendant elements, click will be according to the transmission mechanism of transmission of bubbling, the parent container click behavior triggers, and then the corresponding method to carry out, according to the event source, we can know who it was, click to do different things.

Why use event delegation | | event agency

In JavaScript, the number of event handlers added to the page is directly related to the overall performance of the page, because it requires constant interaction with the DOM node. The more times the DOM is accessed, the more times the browser redraws and rearranges, which will extend the interaction ready time of the entire page. This is why one of the main ideas of performance optimization is to reduce DOM manipulation; If you want to use event delegate, you will put all the operations in THE JS program, and the operation with the DOM only needs to interact once, which can greatly reduce the interaction with the DOM, improve performance;

Welcome to like, a little encouragement, a lot of growth