Es6:let, const, arrow functions

ES6 Medium let And const

At present, there are three commonly used definitions ：

var a = 100;
let b = 99;
const c = 98;

var、let / const The difference between

If we enter the following two lines of code directly in the console , The results are different

console.log(y)
var/let/const y = 100

var

js There is a pre parsing function in , It will Advanced parsing var and function. As far as the above two lines of code are concerned , If you use var To define , The parsing order should be as follows ：

var y;    //  Pre parsing does not represent pre assignment 
console.log(y);
y = 100;

The result is undefined
Be careful ： Function expression and Function declaration Here's the difference . because function Will be parsed in advance , So this function will be called first

//  Function declaration 
function f2(){
    
  return 123;
}
//  Function expression 
var f = function(){
    
   return 123;
}

let、const

let And const There is no such thing as variable promotion , So obviously , If the above two lines of code var Replace with let or const You're going to report a mistake . And var Different ,let You cannot define the same name repeatedly under the same scope .

var、let / const Scope of action

var Is the function scope ------ If defined in a function , Then it can only be used in this function .
let/const Is a block level scope ------ It can only be used in the braces in which it is located . for example ：

function f(){
    
   let/const a = 100;
   if(true){
    
     let/const a = 1000;
   };
   console.log(a);
};
f();   

The output result on the console is 100（let Of the two a Not the same ）, hold let Replace with var Then for 1000.

let And const The difference between

const Only one readable constant can be declared （ You can't just define unassigned ） for example ：

function f(){
    
   const a = 100;
   if(true){
    
     const a = 1000;
   };
   console.log(a);
};
f(); 

The value at this time is the same as let The same for 100, however , If you put if Execute... In the statement const a = 1000; Change it to a = 1000, May be an error , and let Definition does not , because const The definition of a constant cannot be changed .
Be careful ：const Declared constants must be initialized and unchangeable once declared . But the declared reference type , The corresponding value can be modified . for example ：

const obj = {
    }
obj.name = 'amy'
console.log(obj)
const arr = []
arr.push(1)

There is no problem , In the code const The declared reference type only means that the storage location will not change

ES6 Arrow function in

Arrow function usage —let The name of the function = ( Parameters ) = > The body of the function

The arrow function is intended to simplify the function

// Normal writing 
var f = function(n1,n2){
    
     return n1 + n2;
}
// Arrow function writing 
let f = (n1,n2) =>n1 + n2; // Parentheses can be omitted when there is only one parameter . You should write an empty parenthesis when there are no parameters 

Arrowhead function this Point to

Inside the arrow function this object , Is the object of definition , Instead of using the object .

var name = ' Zhang San ';   
 var person = {
    
        name:' Li Si '
        test:function(){
            
            console.log(this.name)  // Li Si 
        }
}
person.test();
var person2 = {
    
    name:' Li Si '
    test: ()=>{
    
         console.log(this,name);  //  Zhang San , At present this It points to the object of definition （window）
    }
}
person2.test();

Not all functions are suitable for changing to arrow functions . When a function uses its own this when , If we use the arrow function again, it will cause conflicts , In this case, a variable should be defined outside the function let $this = this . Pass through... Inside the function $this To operate the global vue object .（ This sentence is copied , I haven't used it for the time being , For reference only ）