Beginner ES6 recording…

Prototype chain

In the prototype chain, the prototype Object of the instance Object also has a prototype Object and points to Object. To share methods

Because there was no class inheritance before ES6, methods could only be shared through prototype objects

Instead of assigning a parent class to a child class directly, which would result in the two objects pointing to the same object, you should create an instance of the parent class and assign it to the child class so that the methods of the parent class can be correctly inherited through the prototype chain without affecting each other.

This points to the problem

  • In normal functions this refers to window
  • Object method this refers to the called object
  • In the constructor this refers to the instance object and in the prototype object this refers to the instance object
  • In the timer function, this points to the window
  • Execute the function immediately where this points to window

Modify the three functions referred to by this

  • The call function can modify the function run this to point to a constructor that uses the parent class by calling call with subclasses before inheritance. For example: Father. Call (this, uname, age, sex);
  • A filter returns an array
  • Bind is not calling the function but changing the this reference
btn.addEventListener('click'.function(){
            this.disabled=true;
            setTimeout(function(){
                this.disabled=false;
            }.bind(btn),3000)})// Bind is used to bind
Copy the code

The difference between some and forEach When looking for a single specific element such as an ID, forEach is recommended because forEach will stop traversing when it finds the element to speed things up. Add return true to the judgment condition;

Object-defineProperty

Important technology in vue2. Js

  • Whether writable can be modified
  • The property can be deleted or modified again
  • Enumerable whether enumerable allows traversal
  • A value is a value that can be modified or added

Modify the three methods to which this points

  • Inheritance can be implemented by calling functions and changing the this pointer within functions
  • The arguments passed to apply must be arrays with the help of mathematical built-in object maximums and so on
  • The bind method does not call a function and returns a function that has been modified to refer to this

Strict mode

It’s only since IE10 ES5 that you put some constraints on your code like you have to declare variables before you can assign values

  • Strictly global function this refers to undefined
  • Strict mode does not allow you to declare functions inside a block of code that is not a function
  • In strict mode, the timer’s this points to the window

Strict syntax “use”

closure

This means that the scope of one function can access the scope of another function, and extends the scope of local variables of the function. Immediate functions are called small closures because immediate functions can use the variables passed in

Deep copy Shallow copy

Shallow copy
 for(var k in obj){
          Obj [k] is the value of the attribute
    o[k]=obj[k];      
  }
Copy the code

Assign Object. Assign (o,obj); But shallow copy only copies addresses for complex data types

Deep copy

Create a new space to store data handwritten code

function deepcopy(newobj,oldobj){
            for(var k in oldobj){
                var item=oldobj[k];
                if(item instanceof Array){
                    newobj[k]=[];
                    deepcopy(newobj[k],item);
                }
                else if(item instanceof Object){
                    newobj[k]={};
                    deepcopy(newobj[k],item);
                }
                else{ newobj[k]=item; }}}// An array is also an object
Copy the code

Regular Expression

Match replacement extraction

Checks whether the text conforms to the regular expression specificationre.test();
  • The border character ^ $
  • Quantifier * +? {a,b}
/[abc]/        // Only one of these is true
 /^[abc]$/        // Only one is true
 /^[a-z]$/        // Any letter from a to Z can be used
 /^[a-zA-Z]$/     //$uppercase and lowercase
 /^a*$/           //a occurs 0 or more times
 /^a+$/           //a occurs more than once
 /^a? $/           / / a in 1 | | 0 times
 /^a{3}$/         // if (a, b, c, c, d)
 / ^ {3, 6} $/ a         //a is less than or equal to 6 times
 /^(abc){3}$/         // ABC occurs 3 times
Copy the code

Test regular expressions and general regular expressions online

Use of let and const

  • Variables declared by lets have block-level scope
  • Variables declared by let do not have variable promotion
  • Variables declared by let have temporary dead zones
  • Constants declared by const have block-level scope
  • Constants declared by const must be assigned

Array and object deconstruction

Let ary [a, b, c] = [1, 2, 3]. A =1,b=2,c=3

let person ={name:'zhangsan',age:20}; let {name:myname,age:myage}=person; // Object destruct

Arrow function

Const fn=()=>{} // syntax

The arrow function is not bound to the this keyword. In the arrow function, this points to the context this where the function is defined

The remaining parameters

const sum=(. args) = >{
let total=0;
args.forEach(item= > total += item);
return total;
};  // Remaining arguments (an array of an indefinite number of arguments)
Copy the code

Extended operator

let ary=[1.2.3];  
console.log(... ary);// split into 1,2,3
let ary1=[4.5.6];
let ary2=[...ary,...ary1];  // Array mergeary1.push(... ary);// The pseudo-array becomes the real array
var divs=document.queryseletorAll('div');
var ary=[...divs];  
Copy the code
Array extension method
array=Array.from(arrylike,item= >item*2);The from method forms an array
item=ary.find(item= >item.id==2);//find finds elements
index=ary.findIndex(item= >{item>15})The findIndex method finds the sequence number
flag=ary.includes(2); //includes checks whether elements are included
Copy the code