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

This article will explain in detail the example analysis of JS object and JSON conversion, New Function (), forEach (), DOM event flow. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1. Data types: the data types defined by JavaScript are string, number, Boolean, array, object, Null, Undefined, but the data classification that typeof can distinguish is number, string, boolean, object (null / array), function and undefined. The value of undefined indicates that the variable has no value, and null can be used to empty the variable.

Let a = 100 position typeof a, undefined;typeof, a, undefined;typeof, a,

2. Default type conversion: some of them are listed here

5 = = true;//false. True will first be converted to 1ther false and converted to 0mm 12'+ 1x max max 123'. The number is first converted into a string of'12'- 1'- 1 'position hand 11. The string is first converted to a number [] = = false;//true. When the array is converted to another type, it depends on the type of the other comparator [] = = 0 position object Object true [2] = ='2 [2] = 2 [2] = 2 [2] = 2 [2] = 2 [2]-2 []-2 the other comparator's type; / / "12 [helplink]". Here, the object is first converted to the string null = = false;//falsenull = = 0.

3. Conversion between JS object and JSON: if you want to copy object properties, you can convert them to string type by JSON.stringify (), assign values to copy variables and then convert them to object type by JSON.parse (), but this conversion will cause the original object methods to be lost and only properties can be preserved. If you want to copy a complete object, you need to traverse key:value to copy the methods and properties of the object. If a new value is assigned to one of the objects after an object assignment occurs, it points to the new address content. About the relationship between JSON and JavaScript: JSON is based on JavaScript syntax, but is not a subset of JavaScript

4. Switch case:

Let str = '23abGdH4d4Kdbath] / g, function (match, $1, $2) {return $1.toUpperCase () + $2.toLowerCase ()}); / / "23ABgDh5D4kD" str =' web-application-development';str = str.replace (/-([aMuz]) / g, (replace) = > replace [1] .toUpperCase ()); / / "webApplicationDevelopment" (hump conversion)

5. Generate random numbers:

Str = Math.random () .toString (36) .substring (2)

6. | 0, ~ ~ take an integer, such as 3.2 / 1.7 | 0 = 1, ~ (3.2 / 1.7) = 1. ~ Operation (bitwise inversion) is equivalent to symbol inversion and minus one, if (! ~ str.indexOf (substr)) {/ / do some thing}

7. No third variable exchange value: the following approach may not be better than declaring the third variable in space and time. It is written here just to expand your mind.

/ method 1: exchange let a = 1, b = 2 a = [b, b = a] [0] through the middle array; / / method 2: exchange let a = 1, b = 2 a = a + b ten b = a-b ten a = a-b ten a = a-b ten a / method 3: exchange a = 1, b = 2x a = a-b TX b = a + b ten a = b-a-a through addition and subtraction / / method 4: complete the exchange through two XOR restores. In addition, there is no overflow let a = 1, b = 2, a = a ^ b * * / method 5: exchange let a = 1, b = 2, a = b + (b = a) * 0 by multiplication.

8, /, and% operators:

. 4.53 / 2 = 2.265. 4.53% 2 = 0.53000000000002. 5% 3 = 2

9. Prototype chain (Prototype Chaining) and inheritance: prototype chain is the way to implement inheritance in ECMAScript. The inheritance mechanism in JavaScript is not explicitly defined, but is implemented through imitation. All inheritance details are not entirely handled by the interpreter, and you have the right to decide which inheritance method is most applicable, such as using object impersonation (constructor to define base class properties and methods) and mixing (defining base class properties with constructors and base class methods with prototypes).

Function ClassA (sColor) {this.color = sColor;} ClassA.prototype.sayColor = function () {alert (this.color);}; function ClassB (sColor, sName) {ClassA.call (this, sColor); this.name = sName;} ClassB.prototype = new ClassA (); ClassB.prototype.sayName = function () {alert (this.name);}; var objA = new ClassA ("blue"); var objB = new ClassB ("red", "John"); objA.sayColor () / output "blue" objB.sayColor (); / output "red" objB.sayName (); / / output "John"

10. Call, apply, and bind:call and apply are all used to call the current function, and the usage is similar. Their first parameter is used as a this object, but the other parameters call are enumerated separately, while apply is passed as an array. Bind returns this new function (modified copy of the original function after initialization parameters) after defining preset parameters to the current function. The first parameter of the preset parameter is the this assignment (the this assignment is invalid when the new function is called using the new operator). The parameters passed when the new function is called will be passed after the preset parameters and together with the preset parameters to form all of its parameters. The simplest use of bind is to have a function with the same this value no matter how it is called. The following list () is also called Partial Functions:

Function list () {return Array.prototype.slice.call (arguments);} var list1 = list (1,2,3); / / [1,2,3] / / Create a function with a preset leading argumentvar leadingThirtysevenList = list.bind (undefined, 37); var list2 = leadingThirtysevenList (); / / [37] var list3 = leadingThirtysevenList (1,2,3); / / [37, 1,2,3]

11. Memoization technology: replacing too many recursive calls in functions is a technique that caches the results of previous operations so that we don't have to recalculate the results that have already been calculated. In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. Although related to caching, memoization refers to a specific case of this optimization, distinguishing it from forms of caching such as buffering or page replacement. In the context of some logic programming languages, memoization is also known as tabling.

Function memoizer (fundamental, cache) {let cache = cache | | {}, shell = function (arg) {if (! (arg in cache) {cache [arg] = fundamental (shell, arg);} return cache [arg];}; return shell;}

12. Closure: a lexical representation of a function that includes variables that are not calculated (contextual variables, non-functional arguments). Functions can use variables defined outside the function. Let's take the singleton pattern as an example to show how to create a closure.

Let singleton = function () {let obj; return function () {return obj | | (obj = new Object ());} ()

13. New Function (): create a new function with a string. Function parameters can be called in the form of this.key:

Let variables = {key1: 'value1', key2:' value2'}, fnBody = 'return this.key1 + ":" + this.key2', fn = new Function (fnBody); console.log (fn.apply (variables))

14 、 DocumentFragment: Roughly speaking, a DocumentFragment is a lightweight container that can hold DOM nodes. The use of document fragment document fragments usually optimizes performance when maintaining a page DOM tree

Let ul = document.getElementsByTagName ("ul") [0], docfrag = document.createDocumentFragment (); const browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"]; browserList.forEach ((e) = > {let li = document.createElement ("li"); li.textContent = e; docfrag.appendChild (li);}); ul.appendChild (docfrag)

15. ForEach () traversal: in addition, you can also consider using for or for. In or for... Of statement structure

1. Array instance traversal: arr.forEach (function (item, key) {

/ / do some things

})

two。 Non-array instance traversal: Array.prototype.forEach.call (obj, function (item, key) {

/ / do some things

})

3. Non-array instance traversal: Array.from (document.body.childNodes [0] .attributes) .forEach (function (item, key) {

/ / do some things. Array.from () is a new addition to ES6

})

16. DOM event flow: Graphical representation of an event dispatched in a DOM tree using the DOM event flow.If the bubbles attribute is set to false, the bubble phase will be skipped, and if stopPropagation () has been called prior to the dispatch, all phases will be skipped.

(1) event capture (Capturing Phase): event propagates from window to the parent node of the target through the ancestors of target. IE does not support Capturing

(2) Target phase (Target Phase): event arrives at target of event. If the event type indicates that the event is not bubbling, event will stop after that phase is completed

(3) event bubbling (Bubbling Phase): event propagates among the target ancestors in reverse order, starting from the parent node of the target and ending with the window

Event binding:

1. Tag event attribute binding:

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.