preface

It is time to wanke a wave of JS foundation, wanke cooked, silver ten speed take offer; In order to form a knowledge network, this paper does not comb from the traditional question and answer method, but from the knowledge dimension. This includes functions, arrays, objects, data structures, algorithms, design patterns, and HTTP.

1. The function

1.1 Three methods of defining functions

1.1.1 Function declaration

/ / ES5 function getSum {} () function () {} / / / / ES6 anonymous methods () = > {} / / if the single lines of {} {} content can be saved and the return keyword,Copy the code

1.1.2 Function Expressions (function literals)

/ / ES5 var sum = function () {} / / ES6 let sum () = = > {} / / if the single lines of {} {} content can be saved and the return keyword,Copy the code

1.1.3 Constructor

const sum = new Function('a', 'b' , 'return a + b')
Copy the code

1.1.4 Comparison of the three methods

1. Function declarations have pre-parsing, and function declarations take precedence over variables; 2. Using the Function constructor to define a Function as a Function expression causes the code to be parsed twice, affecting performance. The regular JavaScript code is parsed the first time, and the string passed into the constructor the second time

1.2. Four calls to functions in ES5

In ES5, the reference to this in the function content is related to calling the method

1.2.1 Function call mode

This includes the function name () and the anonymous function call, with this pointing to window

Function getSum() {console.log(this); function getSum() {console.log(this); () var getSum=function() {console.log(this)Copy the code

1.2.2 Method invocation

Object. The method name (),this refers to the object

Var objList = {name: 'methods', getSum: function() {console.log(this) //objList}} objlist.getsum ()Copy the code

1.2.3 Constructor invocation

The new constructor name (),this refers to the instantiated object

function Person() { console.log(this); } var personOne = new Person();Copy the code

1.2.4 Indirect invocation

This is the first argument to call and apply. If no value is passed or the first value is null,undefined refers to window If the first argument is string, number, or Boolean, call internally converts it to the corresponding instance object by calling its corresponding constructor string, Numer, or Boolean

function foo() { console.log(this); } foo.apply(' I'm the value that apply changed this '); Foo. Call (' I am the value that call changed this '); // I'm calling to change this valueCopy the code

1.3 Function calls in ES6

Arrow functions cannot be used as constructors. That is, they cannot instantiate an object with the new command. Otherwise, an error will be thrown

(() => { console.log(this)//window })() let arrowFun = () => { console.log(this)//window } arrowFun() let arrowObj = { ArrFun: function() {(() => {console.log(this)//this points to the arrowObj object})()}} arrowobj. arrFun();Copy the code

1.4. The call, the apply and bind

1.IE5 does not support call and bind, ES5 does not support bind. 2. Call and apply can call functions, change this, and implement methods that inherit and borrow from other objects.

1.4.1 Call and Apply definitions

Call (new this object, argument 1, argument 2, argument 3…..) Object. Apply (new this object,[argument 1, argument 2, argument 3…..] )

1.4.2 Call and apply usage

2. Hijack methods on other objects

Var foo = {name:" ", logName:function(){console.log(this.name); }} var bar={name: name}; foo.logName.call(bar); // Call changes foo's this point to bar, and calls the functionCopy the code

3. Two functions implement inheritance

function Animal(name){   
  this.name = name;   
  this.showName = function(){   
    console.log(this.name);   
  }   
}   
function Cat(name){  
  Animal.call(this, name);  
}    
var cat = new Cat("Black Cat");   
cat.showName(); //Black Cat
Copy the code

4. Add array methods push,pop to class array (Arguments and nodeList)

(function () {Array. Prototype. Push. The call (the arguments, 'Cathy'); console.log(arguments); //[' zhang SAN ',' Li si ',' Wang wu ']})(' Zhang SAN ',' Li si ')Copy the code

5. Merge arrays

Let arr1 = [1, 2, 3]; Let arr2 = (4 and 6); Array.prototype.push.apply(arr1,arr2); // Merge arR2 into ARR1Copy the code

6. Maximize the array

Math.max.apply(null,arr)
Copy the code

7. Check the character type

Object.prototype.toString.call({})
Copy the code

1.4.3 the bind

Bind is an extension of function. After the bind code is rebound to this in func, it returns a function, does not call the method, and is incompatible with IE8

Function (age) {console.log(this.name, age); } } var fooNew = foo.logName; var fooNewBind = foo.logName.bind(foo); FooNew (10)// li si,10 fooNewBind(11)// 3,11 Because bind changes the point to this in fooNewBindCopy the code

1.4.4 Native implementation of Call, Apply, and bind

The call:

Function.prototype.newCall = function(context, ... parameter) { if (typeof context === 'object' || typeof context === 'function') { context = context || window } else { context = Object.create(null) } let fn = Symbol() context[fn] = this const res =context[fn](... parameter) delete context.fn; return res } let person = { name: 'Abiel' } function sayHi(age,sex) { console.log(this.name, age, sex); } sayhi.newCall (person, 25, 'male '); / / 25 male AbielCopy the code

Apply:

Function.prototype.newApply = function(context, parameter) { if (typeof context === 'object' || typeof context === 'function') { context = context || window } else { context = Object.create(null) } let fn = Symbol() context[fn] = this const res=context[fn](... parameter); delete context[fn] return res } let person = { name: "Abiel" }; function sayHi(age, sex) { console.log(this.name, age, sex); } sayhi. newApply (person,[25, 'male ']) //Abiel 25 maleCopy the code

Call and apply encapsulation comparison: in fact, the core code is the same, but call needs to deconstruct the second parameter

The bind implementation:

Function.prototype.bind = function (context,... innerArgs) { var me = this return function (... finnalyArgs) { return me.call(context,... innerArgs,... finnalyArgs) } } let person = { name: 'Abiel' } function sayHi(age,sex) { console.log(this.name, age, sex); } let personSayHi = sayhi.bind (person, 25) personSayHi(' man ')Copy the code

1.4.5 Similarities and Differences

Bind and call accept a single argument. Apply accepts an array of arguments

1.5. Throttling and shaking of functions

type	concept	application
The throttle	After the event is triggered, the event is triggered at an interval. The event can be triggered multiple times	The Scroll and resize events are triggered multiple times within a period of time
Image stabilization	The event is triggered once a period of time after the action is completed	The Scroll and resize events are triggered after a period of time

1.5.1 throttling

// < span style> *{padding:0; margin:0; } .scroll-box{ width : 100%; height : 500px; background:blue; overflow : auto; } .scroll-item{ height:1000px; width:100%; } <div class="scroll-box"> <div class="scroll-item"></div> </div> </div> </div> </div> </div function (func, delay) { let timer = null; return function(){ if (! timer) { timer = setTimeout(() => { func.apply(this, arguments); Func () timer = null; }, delay); }}; }; Function handle() {console.log(arguments) console.log(math.random ()); function handle() {console.log(arguments) console.log(math.random ()); } / / test cases document. GetElementsByClassName (' scroll - box) [0]. AddEventListener (" scroll ", throttle (handle, 3000));Copy the code

1.5.2 stabilization

// let debounce = function (fn, wait) {let timeout = null; return function () { if (timeout ! == null) clearTimeout(timeout); Timeout = setTimeout(() => {fn.apply(this, arguments); // Or just fn() timeout = null; }, wait); }; } function handle() {console.log(arguments) console.log(math.random ()); } / / test cases document. GetElementsByClassName (' scroll - box) [0]. AddEventListener (" scroll ", debounce (handle, 3000));Copy the code

1.6. The prototype chain

1.6.1 definition

Object inherits a chain of properties

1.6.2 Constructors, the relationship between the instance and the prototype object

var Person = function (name) { this.name = name; Var o3personTwo = new person ('personTwo')//personTwo is an instanceCopy the code

Prototype objects have a default constructor property that points to the constructor

1.6.3 Methods for Creating An Instance

1. Literal

Let obj={'name':' three '}Copy the code

2.Object constructor creation

Let Obj=new Object() Obj. Name =' 1 'Copy the code

3. Create objects using the factory pattern

function createPerson(name){ var o = new Object(); o.name = name; return o; } var person1 = createPerson(' person1 ');Copy the code

4. Use the constructor to create the object

function Person(name){ this.name = name; } var person1 = new Person(' person1 ');Copy the code

1.6.4 The new operator

1. Create a new object; 2. This refers to the constructor; 3. If the constructor does return, it will replace the object from new. If it does not, it will replace the object from new 4. Manually encapsulate a new operator

var new2 = function (func) { var o = Object.create(func.prototype); Var k = func.call(o); If (k && k instanceof Object) {return k; // If yes, return k} else {return o; // Not return the result of the execution of the return constructor}}Copy the code

1.6.5 Prototype chain of the object

1.7 Methods of Inheritance

JS is a weakly typed dynamic language. Encapsulation and inheritance are its two major features

1.7.1 Prototype chain inheritance

1. The code implementation defines the parent class:

/ / define a Animal function Animal (name) {/ / attribute this. Name = name | | 'Animal'; This.sleep = function(){console.log(this.name + 'sleeping! '); }} function(food) {console.log(this.name + 'eating:' + food); };Copy the code

The subclass:

function Cat(){ } Cat.prototype = new Animal(); Cat.prototype.name = 'cat'; //Test Code var cat = new cat (); console.log(cat.name); //cat console.log(cat.eat('fish')); // use undefined console.log(cat.sleep()); // Cat is sleeping! undefined console.log(cat instanceof Animal); //true console.log(cat instanceof Cat); //trueCopy the code

2. Advantages and disadvantages are simple and easy to implement, but to add properties and methods to subclasses, must be executed after a statement like new Animal(), no multiple inheritance

1.7.2 Construct inheritance

Change this point in Cat by using a call.

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Copy the code

2. Advantages and disadvantages can achieve multiple inheritance, not inheritance of prototype properties/methods

1.7.3 Instance inheritance

Add a new feature to a parent class instance and return it as a subclass instance

function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}
Copy the code

2. Advantages and disadvantages do not limit the invocation mode, but can not achieve multiple inheritance

1.7.4 Copy inheritance

Copy the properties and methods of the parent class to the subclass.

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}
Copy the code

2. Advantages and disadvantages Multi-inheritance is supported, but it is inefficient and occupies memory

1.7.5 Combination inheritance

Function reuse is achieved by calling the superclass construct, inheriting the properties of the superclass and retaining the advantages of passing parameters, and then using the superclass instance as the prototype of the subclass 1. The subclass:

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
Copy the code

1.7.6 Parasitic composite inheritance

function Cat(name){ Animal.call(this); this.name = name || 'Tom'; } (function(){// create a class with no instance methods var Super = function(){}; Super.prototype = Animal.prototype; Cat.prototype = new Super(); }) ();Copy the code

1.7.7 ES6 Extends inheritance

ES6’s inheritance mechanism is to create an instance object of the parent class, this (so the super method must be called first), and then modify this using the constructor of the subclass

// class Person {//constructor {constructor(skin, language) {this.skin = skin; this.language = language; }} class Chinese extends Person {constructor() {console.log(' I'm a parent ')}} class Chinese extends Person {constructor(skin, language, constructor) positon) { //console.log(this); Super (skin, language); //super(); Equivalent to the superclass constructor //console.log(this); Call super after got this, is not an error, this points to a subclass, equivalent to call the parent class. Prototype. Constructor. Call (this). This positon = positon; } aboutMe() { console.log(`${this.skin} ${this.language} ${this.positon}`); Let obj = new Chinese(' red ', 'Chinese ',' Hong Kong '); obj.aboutMe(); obj.say();Copy the code

1.8. Higher-order functions

Definition, version 1.8.1

The arguments to a function are functions or return functions

1.8.2 Common higher-order functions

map,reduce,filter,sort

1.8.3 currie

1. Definition: call a function by passing only some of its arguments, and have it return a function to handle the remaining arguments

fn(a,b,c,d)=>fn(a)(b)(c)(d)
Copy the code

2. Code implementation:

const currying = fn => { const len = fn.length return function curr (... args1) { if (args1.length >= len) { return fn(... args1) } return (... args2) => curr(... args1, ... args2) } }Copy the code

1.8.4 Anti-currying

1. Definition:

obj.func(arg1, arg2)=>func(obj, arg1, arg2)
Copy the code

2. Code implementation:

Function.prototype.uncurrying = function() { var that = this; return function() { return Function.prototype.call.apply(that, arguments); }}; function sayHi () { return "Hello " + this.value +" "+[].slice.call(arguments); } let sayHiuncurrying=sayHi.uncurrying(); console.log(sayHiuncurrying({value:'world'},"hahaha"));Copy the code

1.8.5 partial function

1. Define: specify some arguments to return the form of a new custom function. 2.

function foo(a, b, c) {
  return a + b + c;
}
function func(a, b) {
  return foo(a,b,8);
}
Copy the code

2. The object

2.1. Object declaration methods

2.1.1 literal

var test2 = {x:123,y:345}; console.log(test2); //{x:123,y:345}; console.log(test2.x); //123 console.log(test2.__proto__.x); //undefined console.log(test2.__proto__.x === test2.x); //falseCopy the code

2.1.2 Constructor

var test1 = new Object({x:123,y:345}); console.log(test1); //{x:123,y:345} console.log(test1.x); //123 console.log(test1.__proto__.x); //undefined console.log(test1.__proto__.x === test1.x); //falseCopy the code

New creates a new object. 2. This refers to the constructor; 3. If the constructor does return, it will replace the object from new. If it does not, it will replace the object from new

2.1.3 Built-in methods

Obecjt. create(obj,descriptor),obj is object,describe attribute (optional)

let test = Object.create({x:123,y:345}); console.log(test); //{} console.log(test.x); //123 console.log(test.__proto__.x); //123 console.log(test.__proto__.x === test.x); //trueCopy the code

2.1.4 Advantages and disadvantages of the three methods

2. Inheritance: Objects created by built-in methods inherit from the __proto__ attribute 3. Hidden properties: The three declaration methods generate hidden properties for each member (property or method) inside by default. These hidden properties can be read and configured. See 4 below for the classification of properties. Attributes read: Object. GetOwnPropertyDescriptor () or getOwnPropertyDescriptor (5). Property Settings: object.defineProperType or Object.defineProperties

2.2. Properties of an object

2.2.1 Attribute classification

1. Data properties are freely configurable, freely configurable, Enumerable,writable, and value.

2. Accessor properties 2 properties: get,set

3. Internal properties Properties used internally by the JavaScript engine; [[Prototype]] can be accessed via object.getPrototypeof (); The inner property is represented by [[]], which is an abstract operation and does not have a property name corresponding to the string type, such as [[Prototype]].

2.2.2 Attribute descriptors

1. Definition: returns all properties of a property encoded into an object. 2. Use scope: as a method Object. DefineProperty Object. GetOwnPropertyDescriptor, Object. Create a second argument,

2.2.3 Default values for attribute descriptors

1. Access the existing properties of the object

Characteristics of	The default value
value	Corresponding attribute value
get	Corresponding attribute value
set	undefined
writable	true
enumerable	true
configurable	true
So the attributes that already exist through the above three declaration methods have these default descriptors
2. Access properties that do not exist on the object
Characteristics of	The default value
–	–
value	undefined
get	undefined
set	undefined
writable	false
enumerable	false
configurable	false

2.2.3 Usage rules of descriptor attributes

Get,set, and wriable,value are mutually exclusive, and an error will be reported if they intersect

2.2.4 Attribute definition

1. There are two functions that defineProperties: object.defineproperty and object.defineproperties. Object.defineproperty (obj, propName, desc)

Obj.[[DefineOwnProperty]](propName, desc, true)

2.2.5 Attribute assignment

[[Put]]. For example: obj.prop = v;

Obj.[[Put]](“prop”, v, isStrictModeOn)

2.2.6 Determining the attributes of an object

The name of the	meaning	usage
in	The in operator returns true if the specified property is in the specified object or its prototype chain	‘name’ in test //true
hasOwnProperty()	Judge only self attributes	test.hasOwnProperty(‘name’) //true
. Or []	If the property does not exist on the object or prototype chain, undefined is returned	test.name //”lei” test[“name”] //”lei”
# # 2.3. Symbol
# # # 2.3.1 concept
Is a data type;
Cannot be new, because Symbol is a primitive value, not an object.
### 2.3.2 Define method
Symbol(), which can be passed

var s1 = Symbol(); var s2 = Symbol(); S1 === s2 // false // var s1 = Symbol("foo"); var s2 = Symbol("foo"); s1 === s2 // falseCopy the code

2.3.3 usage

1. Do not operate on other types of values. 2. As the attribute name

let mySymbol = Symbol(); Var a = {}; a[mySymbol] = 'Hello! '; Var a = {[mySymbol]: 'Hello! '}; Var a = {}; Object.defineProperty(a, mySymbol, { value: 'Hello! '}); A [mySymbol] // "Hello!"Copy the code

3. Use [] instead of using the dot operator as an object property name.

let a = {};
let name = Symbol();
a.name = 'lili';
a[name] = 'lucy';
console.log(a.name,a[name]); 
Copy the code

4. Traversal will not be used for… In, for… Of and Object. The keys (), Object. GetOwnPropertyNames () to the property

2.3.4 Symbol. For

1. Definition: did in global search to this parameter as the Symbol value of the name, if you have, just return the Symbol value, otherwise, and returns a new Symbol of values for the string name 2. For example:

var s1 = Symbol.for('foo');
var s2 = Symbol.for('foo');
s1 === s2 // true
Copy the code

2.3.5 Symbol. KeyFor

1. Definition: return a key for a registered Symbol value.

var s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"

var s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined 
Copy the code

2.4. Traversal

2.4.1 Traversal methods of level-1 objects

methods	features
for … in	Iterating over the object’s own and inherited enumerable properties (no Symbol attribute)
Object.keys(obj)	Returns an array of all enumerable properties of the object itself (excluding the Symbol property).
Object.getOwnPropertyNames(obj)	Returns an array of all the enumerable and non-enumerable properties of the object itself (excluding the Symbol property)
Object.getOwnPropertySymbols(obj)	Returns an array containing all the Symbol properties of the object itself
Reflect.ownKeys(obj)	Returns an array containing all (unenumerated, enumerable, and Symbol) properties of the object itself
Reflect.enumerate(obj)	Returns an Iterator that iterates over all of the object’s own and inherited enumerable properties (excluding the Symbol attribute).
Conclusion: 1. Only Object. GetOwnPropertySymbols (obj) and Reflect. OwnKeys (obj) can get the Symbol attributes
2. Only reflect.ownKeys (obj) can get non-enumeration attributes

2.4.2 Multi-level object traversal

Data model:

var treeNodes = [
    {
     id: 1,
     name: '1',
     children: [
       {
        id: 11,
        name: '11',
        children: [
         {
          id: 111,
          name: '111',
          children:[]
          },
          {
            id: 112,
            name: '112'
           }
          ]
         },
         {
          id: 12,
          name: '12',
          children: []
         }
         ],
         users: []
        },
      ];
Copy the code

Recursive:

var parseTreeJson = function(treeNodes){ if (! treeNodes || ! treeNodes.length) return; for (var i = 0, len = treeNodes.length; i < len; i++) { var childs = treeNodes[i].children; console.log(treeNodes[i].id); if(childs && childs.length > 0){ parseTreeJson(childs); }}}; The console. The log (' -- -- -- -- -- -- -- -- -- -- -- -- -- recursive implementation -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- '); parseTreeJson(treeNodes);Copy the code

2.5. Deep copy

2.5.1 Object. The assign

1. Define: copy all enumerable properties of the source object to target 2. Usage:

Var target = {a: 1, b: 1}; var source1 = { b: 2, c: 2 }; var source2 = { c: 3 }; Object.assign(target, source1, source2);Copy the code

3. Note: This is a pseudo-deep copy and only copies the first layer

2.5.2 JSON. Stringify

1. How it works: Convert objects to strings, and strings are simple data types

2.5.3 Recursive copy

function deepClone(source){ const targetObj = source.constructor === Array ? [] : {}; If (source.hasownProperty (keys)){if(source[keys] && typeof TargetObj [keys] = source[keys]. Constructor === Array? [] : {}; targetObj[keys] = deepClone(source[keys]); }else{// targetObj[keys] = source[keys]; } } } return targetObj; }Copy the code

2.6. Data interception

Definition: Changes the value of an object’s properties by setting properties using built-in methods

2.6.1 Object. DefineProterty

1.ES5 out method; 2. Three parameters: object (mandatory), attribute value (mandatory), and descriptor (optional); 3. The descriptor attribute of defineProterty

Data attributes: the value, writable, configurable, enumerable accessor property: get, set, cannot at the same time, set the value and writable, these two properties are mutually exclusiveCopy the code

4. Two cases of intercepting objects:

Let obj = {name: "', the age:" ', sex: "'}, defaultName = [" this is the name of the default value of 1", "this is the default value of 1 age", "this is the default value of 1" gender]; Object.keys(obj).forEach(key => { Object.defineProperty(obj, key, { get() { return defaultName; }, set(value) { defaultName = value; }}); }); console.log(obj.name); console.log(obj.age); console.log(obj.sex); Obj. name = "this is changing value 1"; console.log(obj.name); console.log(obj.age); console.log(obj.sex); Let objOne={},defaultNameOne=" this is the default value 2"; Object.defineProperty(obj, 'name', { get() { return defaultNameOne; }, set(value) { defaultNameOne = value; }}); console.log(objOne.name); Objone. name = "this is changing value 2"; console.log(objOne.name);Copy the code

5. Intercept array changes

let a={}; bValue=1; Object.defineProperty(a,"b",{ set:function(value){ bValue=value; console.log("setted"); }, get:function(){ return bValue; }}); a.b; //1 a.b=[]; / / setted a. = [1, 2, 3]. //setted a.b[1]=10; // a.b.ush (4); // No output a.b.long =5; // No a.b; / / [1,10,3,4, undefined];Copy the code

Conclusion :defineProperty cannot detect the array index assignment and change the array length change; But you can detect that by manipulating the array method

Multi-level nested object listening

let info = {}; function observe(obj) { if (! obj || typeof obj ! == "object") { return; } for (var i in obj) { definePro(obj, i, obj[i]); } } function definePro(obj, key, value) { observe(value); Object.defineProperty(obj, key, { get: function() { return value; }, set: function(newval) {console.log(" detect changes ", newval); value = newval; }}); } definePro(info, "friends", {name: "friends"}); Info.friends. name = "li si ";Copy the code

6. Existing problems

We can't listen for array index assignments and change length changes. We have to go deep through nested objects because defineProterty can only hijack the attributes of an object, so we need to go deep through every attribute of every object. If the attribute value is also an object, then we need to go deepCopy the code

2.6.2 proxy

1.ES6 comes out of the method, the essence is to do an interception of the object, and provides 13 handling methods

2. Two arguments: object and behavior function

let handler = { get(target, key, receiver) { console.log("get", key); return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { console.log("set", key, value); return Reflect.set(target, key, value, receiver); }}; let proxy = new Proxy(obj, handler); Proxy. Name = "name "; proxy.age = 24;Copy the code

Multilevel objects or multilevel arrays are involved

// Pass two arguments, one is object, the other is proxy handler // If it is not nested object, then add proxy return, if it is nested object, then enter addSubProxy recursion. function toDeepProxy(object, handler) { if (! isPureObject(object)) addSubProxy(object, handler); return new Proxy(object, handler); // This is a recursive function that iterates over all properties of an object. If it is not pure object, then iterates over all properties of an object. If it's pure object then I'll add proxy function addSubProxy(object, handler) { for (let prop in object) { if ( typeof object[prop] == 'object') { if (! isPureObject(object[prop])) addSubProxy(object[prop], handler); object[prop] = new Proxy(object[prop], handler); } } object = new Proxy(object, } function isPureObject(object) {if (typeof object! == 'object') { return false; } else { for (let prop in object) { if (typeof object[prop] == 'object') { return false; } } } return true; } } let object = { name: { first: { four: 5, second: { third: 'ssss' } } }, class: 5, arr: [1, 2, {arr1:10}], age: { age1: Let objectArr = [{name:{first:'ss'}, arr1:[1,2]}, 2, 3, 4, 5, Let handler = {get(target, property) {console.log('get:' + property) return reflect.get (target, property) property); }, set(target, property, value) { console.log('set:' + property + '=' + value); return Reflect.set(target, property, value); Object = toDeepProxy(object, handler); objectArr = toDeepProxy(objectArr, handler); Console.time ('pro') objectarr.length objectArr[3]; objectArr[2]=10 objectArr[0].name.first = 'ss' objectArr[0].arr1[0] object.name.first.second.third = 'yyyyy' object.class = 6; object.name.first.four object.arr[2].arr1 object.age.age1 = 20; console.timeEnd('pro')Copy the code

The reflect object has no constructor that can listen for array index assignment and change array length changes. It is directly listening for changes in the object without deep traversal

2.6.3 Comparison between defineProterty and proxy

1. DefineProterty is the standard of ES5,proxy is the standard of ES6;

2. Proxy can listen to array index assignment and change array length changes;

3. Proxy is listening object, no deep traversal,defineProterty is listening attribute;

3. Use defineProterty to realize two-way data binding (the core of Vue 2.x) 4. Use proxy to implement bidirectional data binding (vue3.x will use it)

An array of 3.

Array basically inspects the array method a little more, so here simply introduces the common scene array method, there are many scenes later supplement; This article mainly from the application of the array API for some SAO operations; Such as a line of code flat n dimensional array, array to redo, array maximum value, array sum, sort, object and array transformation; You can do all of these scenarios in one line of code, right?

3.1 Flatten n-dimensional arrays

1. The ultimate

[1, 2, 3]. Flat (1) / / [1, 2, 3] [1, [2, 3, 4, 5]]]. Flat (2) / / [1, 2, 3, 4, 5] [1, [2, 3, 4, 5]]], the toString () / / '1, 2, 3, 4, 5' [[1, 2, 3, 4, 5 [...]]. Flat (Infinity) / / n] [1, 2, 3, 4...Copy the code

Flat (n) is the API of ES10 flat Array. N indicates the dimension. If n is Infinity, the dimension is infinite

2. The start

function flatten(arr) { while(arr.some(item=>Array.isArray(item))) { arr = [].concat(... arr); } return arr; } flatten ([1, 2, 3]]) / / [1, 2, 3] flatten ([1, [2, 3, 4, 5]]) / / [1, 2, 3, 4, 5]Copy the code

The essence is to use recursion and array merging method concat to achieve flat

3.2 to heavy

1. The ultimate

Array. The from (new Set (,2,3,3,4,4 [1])) / / [1, 2, 3, 4] [... new Set (,2,3,3,4,4 [1])] / [1, 2, 3, 4]Copy the code

Array. From (Array. From); Array. From (Array. Is an extension operator that converts values in a set to a string

Array.prototype.distinct = function() { const map = {} const result = [] for (const n of this) { if (! (n in map)) {map[n] = 1 result. Push (n)}} return result} [1,2,3,3,4,4]. Distinct (); / / [1, 2, 3, 4]Copy the code

Take the new array and store the values. Loop through the two array values and compare them

3.3 the sorting

1. The ultimate

[1,2,3,4]. Sort ((a, b) => a - b); / / [1, 2 and 4], the default is ascending [1, 2, 3, 4] sort ((a, b) = > b - a); / / descending,3,2,1 [4]Copy the code

Sort is a built-in sort method that takes a function as an argument.

Array.prototype.bubleSort=function () { let arr=this, len = arr.length; for (let outer = len; outer >= 2; outer--) { for (let inner = 0; inner <= outer - 1; Innerr ++) {if (arr[inner] > arr[inner + 1]) {// arr[inner], arr[inner + 1]] = [arr[inner + 1], arr[inner]]; console.log([arr[inner], arr[inner + 1]]); } } } return arr; } [1, 2, 3, 4] bubleSort () / / [1, 2, 3, 4]Copy the code

Selection sort

Array.prototype.selectSort=function () { let arr=this, len = arr.length; for (let i = 0, len = arr.length; i < len; i++) { for (let j = i, len = arr.length; j < len; j++) { if (arr[i] > arr[j]) { [arr[i], arr[j]] = [arr[j], arr[i]]; } } } return arr; } [1, 2, 3, 4] selectSort () / / [1, 2, 3, 4]Copy the code

A maximum of 3.4

1. The ultimate

Math.max(... [1, 2, 3, 4]) / / 4 Math. Max. Apply (this, [1, 2, 3, 4]) / / 4 [1, 2, 3, 4] reduce ((prev, cur,curIndex,arr)=> { return Math.max(prev,cur); / / 4}, 0)Copy the code

Math.max() is a built-in method of the Math object that takes strings; Reduce is an ES5 array API with functions and default initial values. The function takes four arguments,pre(the last return),cur(the current value),curIndex(the index of the current value), and arr(the current array).

2. Sort before value at the beginning

3.5 sum

1. The ultimate

[1,2,3,4].reduce(function (prev, cur) {return prev + cur; }, 0) / / 10Copy the code

2. The start

function sum(arr) { var len = arr.length; if(len == 0){ return 0; } else if (len == 1){ return arr[0]; } else { return arr[0] + sum(arr.slice(1)); }} sum ([1, 2, 3, 4]) / / 10Copy the code

Slice the change array, and then recursively sum

3.6 combined

1. The ultimate

[1, 2, 3, 4]. The concat () [5, 6] / / [6] [... [1, 2, 3, 4], [4, 5]] / / [6] let arrA = [1, 2], arrB = [3, 4] Array. Prototype. Push. Apply (arrA, arrB)) / / arrA value of [1, 2, 3, 4]Copy the code

2. The start

Let arr = [1, 2, 3, 4]; [5, 6]. The map (item = > {arr. Push (item)}) / / arr value of [6], pay attention to not directly return to come out, after return will only return to [5, 6]Copy the code

3.7 Checking whether a value is included

1. The ultimate

[1, 2, 3]. Includes (4) / / false [1, 2, 3] indexOf (4) / / - 1 if there is a switch back to index [1, 2, 3]. The find ((item) = > item = = = 3)) / / 3 if no value is returned in the array undefined [1, 2, 3] findIndex ((item) = > item = = = 3)) / / 2 if no value is returned in the arrayCopy the code

Includes (),find(), and findIndex() are ES6 apis

2. The start

[1,2,3]. Some (item=>{return item===3}Copy the code

3.8 Array-like conversion

1. The ultimate

Array. The prototype. Slice. The call (the arguments) / / arguments is an Array an Array of (pseudo) Array. Prototype. Slice. Apply (the arguments) Array. The from (the arguments) [...arguments]Copy the code

Array_form: array_form (); array_form (); array_form (); array_form (); array_form (); array_form (); Is to extend a class array to a string and then define it as an array

2. The start

Array.prototype.slice = function(start,end){ var result = new Array(); start = start || 0; end = end || this.length; For (var I = start; var I = start; var I = start; i < end; i++){ result.push(this[i]); } return result; }Copy the code

3.9 Each value

1. The ultimate

[1, 2, 3]. The fill (false) / / [false, false, false]Copy the code

Fill is the method of ES6

[1, 2, 3]. The map () () = > 0Copy the code

3.10 Whether each item is satisfied

([1, 2, 3]. Every item = > {return item > 2}) / / falseCopy the code

Every is an ES5 API that returns true for each item

3.11 There is one satisfaction

[1, 2, 3]. Some (item = > {return item > 2}) / / trueCopy the code

Some is an ES5 API that has an item that returns true

3.12. Filter arrays

[1, 2, 3]. The filter (item = > {return item > 2}) / / [3]Copy the code

Filter is an ES5 API that returns an array of items that satisfy the addition

3.13 Object and array conversion

Object. Keys ({name: 'zhang' age: 14}) / / / 'name', 'age' Object. The values ({name: 'zhang' age: 14}) / / 14] [' zhang SAN, Object. Entries ({name: 'zhang' age: 14}) / / [[name, 'zhang'], [14] age,] Object. FromEntries ([name, 'zhang'], [14] age,) //ES10 API,Chrome does not support, firebox output {name:' zhang SAN ',age:14}Copy the code

3.14 Array of objects

[{count:1},{count:2},{count:3}].reduce((p, e)=>p+(e.count), 0)

Copy the code

4. Data Structure

Data structure is the way that computers store and organize data, and algorithm is the strategy that systems describe to solve problems. Understanding basic data structures and algorithms can improve the performance and quality of your code. It is also an important skill for procedural apes to advance. Hand-to-hand code for stacks, queues, linked lists, dictionaries, binary trees, dynamic programming and greedy algorithms

4.1 the stack

Features of the stack: advanced after out

class Stack { constructor() { this.items = []; } // Push (element) {this.item.push (element); } // Pop () {return this.item.pop (); } // Get peek() {return this.items[this.kitems.length-1]; } get isEmpty() {return! this.items.length; Get size() {return this.item.length; } // Clear the stack clear() {this.items = []; } // instantiate a stack const stack = new stack (); console.log(stack.isEmpty); // Add stack.push(5); stack.push(8); // Read the properties and add console.log(stack.peek); // 8 stack.push(11); console.log(stack.size); // 3 console.log(stack.isEmpty); // falseCopy the code

4.2 the queue

Queue: first in first out class Queue {constructor (items) {enclosing the items = items | | []; }

enqueue(element) { this.items.push(element); } dequeue() { return this.items.shift(); } front() { return this.items[0]; } clear() { this.items = []; } get size() { return this.items.length; } get isEmpty() { return ! this.items.length; } print() { console.log(this.items.toString()); } } const queue = new Queue(); console.log(queue.isEmpty); // true queue.enqueue("John"); queue.enqueue("Jack"); queue.enqueue("Camila"); console.log(queue.size); // 3 console.log(queue.isEmpty); // false queue.dequeue(); queue.dequeue();Copy the code

4.3 list

1. A collection of ordered elements; But unlike an array, each element is a node that stores the element itself and a reference to the next element. To access an element in the middle of the list, you need to iterate from the starting point to the desired element

class Node { constructor(element) { this.element = element; this.next = null; }} class LinkedList {constructor() {this.head = null; this.length = 0; } // Append (element) {const node = new node (element); let current = null; if (this.head === null) { this.head = node; } else { current = this.head; while (current.next) { current = current.next; } current.next = node; } this.length++; } insert(position, int); element) { if (position >= 0 && position <= this.length) { const node = new Node(element); let current = this.head; let previous = null; let index = 0; if (position === 0) { this.head = node; node.next = current; } else { while (index++ < position) { previous = current; current = current.next; } node.next = current; previous.next = node; } this.length++; return true; } return false; If (position > -1 && position < this.length) {let current = this.head; let previous = null; let index = 0; if (position === 0) { this.head = current.next; } else { while (index++ < position) { previous = current; current = current.next; } previous.next = current.next; } this.length--; return current.element; } return null; } // findIndex(element) {let current = this.head; let index = -1; while (current) { if (element === current.element) { return index + 1; } index++; current = current.next; } return -1; } // Delete the specified document. Remove (element) {const index = this.findIndex(element); return this.removeAt(index); } isEmpty() { return ! this.length; } size() { return this.length; } toString() {let current = this.head; let string = ""; while (current) { string += ` ${current.element}`; current = current.next; } return string; } } const linkedList = new LinkedList(); console.log(linkedList); linkedList.append(2); linkedList.append(6); linkedList.append(24); linkedList.append(152); linkedList.insert(3, 18); console.log(linkedList); console.log(linkedList.findIndex(24));Copy the code

4.4 the dictionary

Class Dictionary {constructor() {this.items = {}; constructor(); }

set(key, value) { this.items[key] = value; } get(key) { return this.items[key]; } remove(key) { delete this.items[key]; } get keys() { return Object.keys(this.items); } get values() {/* We can also use the values method in ES7 return object.values (this.items) */ // Here we loop through to generate an array and output return Object.keys(this.items).reduce((r, c, i) => { r.push(this.items[c]); return r; } []); } } const dictionary = new Dictionary(); dictionary.set("Gandalf", "[email protected]"); dictionary.set("John", "[email protected]"); dictionary.set("Tyrion", "[email protected]"); console.log(dictionary); console.log(dictionary.keys); console.log(dictionary.values); console.log(dictionary.items);Copy the code

4.5 binary tree

Class NodeTree {constructor(key) {this.key = key; constructor(key) {this.key = key; this.left = null; this.right = null; }}

class BinarySearchTree { constructor() { this.root = null; } insert(key) { const newNode = new NodeTree(key); const insertNode = (node, newNode) => { if (newNode.key < node.key) { if (node.left === null) { node.left = newNode; } else { insertNode(node.left, newNode); } } else { if (node.right === null) { node.right = newNode; } else { insertNode(node.right, newNode); }}}; if (! this.root) { this.root = newNode; } else { insertNode(this.root, newNode); }} inOrderTraverse(callback) {const inOrderTraverseNode = (node, callback) => {if (node! == null) { inOrderTraverseNode(node.left, callback); callback(node.key); inOrderTraverseNode(node.right, callback); }}; inOrderTraverseNode(this.root, callback); } min(node) { const minNode = node => { return node ? (node.left ? minNode(node.left) : node) : null; }; return minNode(node || this.root); } max(node) { const maxNode = node => { return node ? (node.right ? maxNode(node.right) : node) : null; }; return maxNode(node || this.root); } } const tree = new BinarySearchTree(); tree.insert(11); tree.insert(7); tree.insert(5); tree.insert(3); tree.insert(9); tree.insert(8); tree.insert(10); tree.insert(13); tree.insert(12); tree.insert(14); tree.inOrderTraverse(value => { console.log(value); }); console.log(tree.min()); console.log(tree.max());Copy the code

Article 5. The algorithm

5.1 Bubble algorithm

Bubble sort, selection sort, insertion sort, I won’t go into that here.

5.2 Fibonacci

Characteristic: The third term is equal to the sum of the first two terms

function fibonacci(num) { 
    if (num === 1 || num === 2) { 
        return 1
    }
    return fibonacci(num - 1) + fibonacci(num - 2)
  }
Copy the code

5.3 Dynamic Programming

In the United States, there are the following denominations (coins) : D1 =1, D2 =5, D3 =10, D4 =25 If we need change for 36 cents, we can use a quarter, a dime, and a penny (one cent)

class MinCoinChange { constructor(coins) { this.coins = coins this.cache = {} } makeChange(amount) { if (! amount) return [] if (this.cache[amount]) return this.cache[amount] let min = [], newMin, newAmount this.coins.forEach(coin => { newAmount = amount - coin if (newAmount >= 0) { newMin = this.makeChange(newAmount) } if (newAmount >= 0 && (newMin.length < min.length - 1 || ! min.length) && (newMin.length || ! newAmount)) { min = [coin].concat(newMin) } }) return (this.cache[amount] = min) } } const rninCoinChange = new MinCoinChange([1, 5, 10, 25]) console.log(rninCoinChange.makeChange(36)) // [1, 10, 25] const minCoinChange2 = new MinCoinChange([1, 3, 4]) console.log(minCoinChange2.makeChange(6)) // [3, 3]Copy the code

5.4 Greedy Algorithm

Features: Solve the problem by the optimal solution and use the greedy algorithm to solve the case in 2.3

function MinCoinChange(coins) {
var coins = coins;
var cache = {};
this.makeChange = function(amount) {
  var change = [],
    total = 0;
  for (var i = coins.length; i >= 0; i--) {
    var coin = coins[i];
    while (total + coin <= amount) {
      change.push(coin);
      total += coin;
    }
  }
  return change;
};
Copy the code

}

var minCoinChange = new MinCoinChange([1, 5, 10, 25]); console.log(minCoinChange.makeChange(36)); console.log(minCoinChange.makeChange(34)); console.log(minCoinChange.makeChange(6));

6 Design Patterns

When applied to a project, design patterns can improve code quality by enabling reuse and decoupling of code. This article mainly introduces 14 design patterns to write UI components, encapsulation framework essential

6.1 Simple Factory mode

1. Definitions: Also known as static factory methods, which create objects and assign properties and method 2. Application: Extract the same properties and methods as classes and encapsulate them into objects.

let UserFactory = function (role) { function User(opt) { this.name = opt.name; this.viewPage = opt.viewPage; } switch (role) { case 'superAdmin': return new User(superAdmin); break; case 'admin': return new User(admin); break; case 'user': return new User(user); break; Default: throw new Error(' argument Error, optional arguments :superAdmin, admin, user')}} // Call let superAdmin = UserFactory('superAdmin'); Let normalUser = UserFactory('admin') let normalUser = UserFactory('user'Copy the code

6.2 Factory method mode

1. Definition: The abstraction of the product class makes the creation business responsible for creating instances 2 of multiple product classes. 3. Code:

var Factory=function(type,content){ if(this instanceof Factory){ var s=new this[type](content); return s; }else{ return new Factory(type,content); }} Factory. Prototype ={Java:function(content){console.log('Java value as ',content); }, PHP:function(content){console.log('PHP value ',content); }, Python:function(content){console.log('Python value is ',content); },} // Test case Factory('Python',' I'm Python');Copy the code

6.3 Prototype Mode

1. Define: set the prototype properties of a function. 2.

The function Animal (name) {/ / attribute this. Name = name | | 'Animal'; This.sleep = function(){console.log(this.name + 'sleeping! '); }} function(food) {console.log(this.name + 'eating:' + food); }; function Cat(){ } Cat.prototype = new Animal(); Cat.prototype.name = 'cat'; //Test Code var cat = new cat (); console.log(cat.name); //cat console.log(cat.eat('fish')); // use undefined console.log(cat.sleep()); // Cat is sleeping! undefined console.log(cat instanceof Animal); //true console.log(cat instanceof Cat); //trueCopy the code

6.4 Singleton Mode

1. Definition: only classes that are instantiated in sequence are allowed. 2. Code:

let singleCase = function(name){ this.name = name; }; singleCase.prototype.getName = function(){ return this.name; Let getInstance = (function() {var instance = null; return function(name) { if(! Instance = new singleCase(name); instance = new singleCase(name); } return instance; }}) (); One ===two let one= getInstance("one"); let two = getInstance("two");Copy the code

6.5 Appearance Modes

1. Definition: provide a consistent interface for a set of interfaces in a subsystem 2. Application: simplify complex interfaces 3. Code: Appearance mode

6.6 Adapter Mode

1. Definition: convert an interface to the interface required by the client without modifying the client code, so that incompatible code can work together 2. Application: Adaptation function arguments 3. code: adapter pattern

6.7 Decorator mode

1. Definition: to add properties or methods to an object without changing the original object

Let decorator=function(input,fn){let input= document.getelementById (input); If (typeof input.onclick=='function'){let oldClickFn=input.onclick; // Define a new event for the event source input.onclick=function(){// oldClickFn(); // Add callback function fn() to execute the event source; }else{// Unbound bound input.onclick=fn; }} // Test case decorator('textInp',function(){console.log(' textbox executed '); }) Decorator (' BTN ',function(){console.log(' button executed '); })Copy the code

6.8 Bridge Mode

1. Definition: separate the abstract from its implementation so that both can be changed independently 2. Code bridging mode

6.9 Module Method Mode

1. Definition: defines a template that can be called later with different parameters

6.10. Observer mode

1. Function: Solve the coupling between classes and objects, objects and objects 2.

let Observer= (function(){ let _message={}; Return {// register interface, //1. Function: push the message registered by subscriber to message queue //2. Parameters: So you pass two parameters, the message type and the action, Regist :function(type,fn){if(typeof _message[type]==='undefined'){if(typeof _message[type]==='undefined'){ _message[type]=[fn]; }else{// push the message to the execution action of the message _message[type].push(fn); }}, // publish message interface //1. Function: observe the publish message to all the subscribed messages at once //2. Fire :function(type,args){return if(!) if the message is not registered. _message[type]) return; / var/define the message information events = {type: type, / / message type args: args | | {} / / message to carry data}, I = 0, len = _message [type]. Length; For (; i<len; _message[type][I].call(this,events); }}, // remove message interface //1. Function: Clear subscriber logout message from message queue //2. Remove :function(type,fn){// If the message action queue exists if(_message[type] instanceof Array){// Traversal var from the last message action sequence i=_message[type].length-1; for(; i>=0; I -) {/ / if there is the action in the message queue to remove _message [type] [I] = = = fn && _message [type]. Splice (I, 1); Regist ('test',function(e){console.log(e.type, e.ags.msg); }) //2. Publish an observer. fire('test',{MSG :' pass parameter 1'}); Observer.fire('test',{MSG :' pass argument 2'}); Observer.fire('test',{MSG :' pass argument 3'});Copy the code

6.11 Status Mode

1. Definition: a change in an object’s state causes a change in its behavior. 2. Code state mode

6.12 Policy Mode

1. Definition: Defines a series of family algorithms and encapsulates each algorithm individually so that the algorithms can be interchangeable with each other, independent of the customer 2 who uses the algorithm. Code policy pattern

6.13. Access Mode

1. Definition: encapsulates some properties that the data type does not have through inheritance. 2. Function: allows an object to operate as an array. Code: visitor mode

6.14 Mediator mode

1. Definition: set up an intermediate layer that handles the interaction between objects

7. HTTP

1.1 What is HTTP

HTTP is a protocol that connects clients, gateways, and servers.

7.2 the characteristics of

Support client/server mode: can connect to the client and server; Simple and fast: the request only needs to transmit the request method, path and request body; Flexible: Flexible data types. No connection: Disconnect immediately after the request ends. Stateless: Unable to remember last request.

7.3 How do I Solve stateless and Connectionless Problems

Stateless: The HTTP protocol itself cannot solve this state, only through cookies and sessions to store the state, the common scenario is to maintain the login state;

Connectionless: Can use its own property keep-alive.

7.4 Request Process

HTTP(S) Request address → DNS resolution → three-way handshake → Send request → four-way wave

Three handshake process picture source CSDN)Insert the picture description here

Four waves (photo by CSDN)

Insert the picture description here

7.5 COMPARING HTTP 0.9 to 3.0

7.5.1 HTTP 0.9

Only GET requests are allowed; The request header is not supported and the protocol supports only plain text. Stateless, each access is handled independently, complete disconnect; Stateless code.

7.5.2 HTTP 1.0

Response header content;

Expires is a response header that returns a fixed time. The flaw is that the server needs to reset when the time is up. If the request header contains if-modified-since, the server will compare the time to last-modified and return 304. The response object starts with a response status line; Response objects are not limited to hypertext; Support GET, HEAD, and POST methods. Stateful code; Support for persistent (but still short by default), caching, and authentication.

7.5.3 HTTP 1.1

Add cache-control to the request header

| property name meaning | | | – | – | – | | cache-control | in 1.1 introduced method, specify the request and response following a caching mechanism, the values are: public (b and s Cache), private (b Cache), the no – cache (not cached), no – the store (not cached), Max – age (cache time, s) for the unit, min – fresh (minimum update time), Max – age = 3600 | | If – None – Match | last request return the etag response header Value increase cache-control response headers, said all the caching mechanism can be cached and which type etag return hash value, the second request header value contrast | to carry and servers

Pay attention to

The max-age of cache-control is the relative time of the Cache. Cache-control has a higher priority than Expires

7.5.4 HTTP 2.0

Using binary format transmission; Multiplexing is essentially sending the request data in frame out-of-order to TCP. TCP can only have one Steam, so it will still block. Masthead compression; Server push Sends static resources to SERVER B to avoid round trip delay.

7.5.5 HTTP 3.0

2. Features: Custom connection mechanism: TCP with IP/ port identifier, change reconnection handshake, UDP is a 64 bit ID identifier, is no connection; Custom retransmission mechanism: TCP uses serial number and reply transmission, QUIC uses increasing serial number transmission; Non-blocking multiplexing: Multiple Steam can be created on the same QUIC.

7.5.6 HTTPS

1. HTTPS adds SSL on the basis of HTTP. 2. Handshake (certificate exchange and authentication) and recording protocol (data encryption).

7.5.7 cache

1. By protocol: protocol layer cache and non-HTTP protocol cache: 1.1 Protocol layer cache: set by HTTP protocol header attribute. 1.2 Non-protocol cache: Use the http-equiv attribute values Expires and set-cookie of meta tags.

2.1 Strong cache: Use the cache-control and expires Settings to directly return an expiration time, so no request is made during the cache. 2.2 Negotiation cache: The response header returns an ETAG or last-Modified hash. The second request header, if-none-match or if-modify-since, carries the last hash. 304 is returned If it is consistent.

3. Negotiated cache comparison: ETAG has a higher priority than last-Modified; If the last-modified eTAG is s, the number of times the ETAG is modified within 1s will be recorded. Last-modified is good, and eTAG needs to get the hash value.

5. The browser reads the cache process: it first determines the strong cache; Then determine whether the negotiation cache ETAG (last-Modified) exists. Exists to carry a value using the if-none-match (if-modified-since) attribute; Request server, server compare ETAG (last-modified), effective return 304.

F5 refresh ignores the strong cache and does not ignore the negotiated cache. CTRL + F5 is invalid

7.5.8 status code

Sequence details | | | | – | – | – | | 1 xx (inform) | | | 2 xx (successful) | 200 (success), 201 (server), 202 (server receives the untreated), 203 (unauthorized), 204 (not return content), 205 (reset), 206 (part) | Xx (redirect) | 3 | 301 (moved permanently), 302 (temporary mobile), 303 (see other location), 304 (not modified), 305 (using a proxy), 307 (temporary redirect) | | 4 xx (client) | 400 error (request), 401 (unauthorized), 403 (banned), 404 (not found), 405 disabled (method), 406 (accepted), 407 (need agent authorization) | | 5 xx (server error) | 500 (server), 501 (not yet implemented), 502 (bad gateway), 503 (service unavailable), 504 (gateway timeout), 505 (HTTP version is not supported) |

7.5.9 Analyzing Browser Requests

7.5.10 summary

agreement

Content of version | | | | – | – | – | | http0.9 | only allows the client send GET this kind of request; The request header is not supported and the protocol supports only plain text. Stateless, each access is handled independently, complete disconnect; No status code http1.0 solve the disadvantage of 0.9, increasing the If the modify – since (last – the modify) and cache expires attribute | | http1. X | cache-control and increase If none – match (etag) cache properties | | http2.0 | use binary format transfer; Multiplexing; Masthead compression; Server push | | http3.0 | QUIC protocols used, custom connection mechanism; Custom retransmission mechanism; Multiplex non-blocking | cache

8. To summarize

This is just JS native from the primary to the advanced combing; Original code word is not easy, welcome star!

JS native surface from elementary to advanced 【 nearly 1.5W word 】

preface

1. The function

1.1 Three methods of defining functions

1.1.1 Function declaration

1.1.2 Function Expressions (function literals)

1.1.3 Constructor

1.1.4 Comparison of the three methods

1.2. Four calls to functions in ES5

1.2.1 Function call mode

1.2.2 Method invocation

1.2.3 Constructor invocation

1.2.4 Indirect invocation

1.3 Function calls in ES6

1.4. The call, the apply and bind

1.4.1 Call and Apply definitions

1.4.2 Call and apply usage

1.4.3 the bind

1.4.4 Native implementation of Call, Apply, and bind

1.4.5 Similarities and Differences

1.5. Throttling and shaking of functions

1.5.1 throttling

1.5.2 stabilization

1.6. The prototype chain

1.6.1 definition

1.6.2 Constructors, the relationship between the instance and the prototype object

1.6.3 Methods for Creating An Instance

1.6.4 The new operator

1.6.5 Prototype chain of the object

1.7 Methods of Inheritance

1.7.1 Prototype chain inheritance

1.7.2 Construct inheritance

1.7.3 Instance inheritance

1.7.4 Copy inheritance

1.7.5 Combination inheritance

1.7.6 Parasitic composite inheritance

1.7.7 ES6 Extends inheritance

1.8. Higher-order functions

Definition, version 1.8.1

1.8.2 Common higher-order functions

1.8.3 currie

1.8.4 Anti-currying

1.8.5 partial function

2. The object

2.1. Object declaration methods

2.1.1 literal

2.1.2 Constructor

2.1.3 Built-in methods

2.1.4 Advantages and disadvantages of the three methods

2.2. Properties of an object

2.2.1 Attribute classification

2.2.2 Attribute descriptors

2.2.3 Default values for attribute descriptors

2.2.3 Usage rules of descriptor attributes

2.2.4 Attribute definition

2.2.5 Attribute assignment

2.2.6 Determining the attributes of an object

2.3.3 usage

2.3.4 Symbol. For

2.3.5 Symbol. KeyFor

2.4. Traversal

2.4.1 Traversal methods of level-1 objects

2.4.2 Multi-level object traversal

2.5. Deep copy

2.5.1 Object. The assign

2.5.2 JSON. Stringify

2.5.3 Recursive copy

2.6. Data interception

2.6.1 Object. DefineProterty

2.6.2 proxy

2.6.3 Comparison between defineProterty and proxy

An array of 3.

3.1 Flatten n-dimensional arrays

3.2 to heavy

3.3 the sorting

A maximum of 3.4

3.5 sum

3.6 combined

3.7 Checking whether a value is included

3.8 Array-like conversion