JS advanced -es6 syntax

ES6 Introduce

es6 type js Language next generation standard , Already in 2015 year 6 It was officially released in January, also known as es2015. Its goal , Is making JavaScript Language can be used to write complex large-scale applications , Become an enterprise development language .

let Command and const command

Key applications and concepts

var and let The difference between
1.var Can improve , Not affected by block level scope , Can repeat the definition of .
2.let You can't raise variables , Affected by block level scope , Cannot be defined repeatedly .

let and const The difference between
The only difference between them is const You must assign values when declaring , And cannot be reassigned

Block level scope

The block level scope is es6 Begin to put forward the concept ,es6 A block level scope can be formed by explicitly declaring braces in .

let and const Similarities

1.let and const Can not be variable promotion

  console.log(arr);// Report errors 
      let arr;
      console.log(concc);// Report errors 
      const concc=123;

2.let and const Are affected by the block level scope

//let
 for(let i=0;i<5;i++){
    
      setTimeout(function(){
    
        console.log('i',i);
      })
    }
    //const
     {
    const arr=0}
    console.log(arr);// Report an error and say no statement 

Deconstruction and assignment of variables

Knowledge point :

1. deconstruction : Structural decomposition ,s Decompose a part from a whole variable to use

2. An array of deconstruction

Make the elements in one array correspond to the elements in another array one by one

 // Array structure 
      let arr=[1,2,3,4]
      let [a,b,c,d]=arr;
      console.log(" Deconstruction in arrays ",a);

3. Object to deconstruct

Because objects are unordered , So we can't use the idea of array deconstruction to see , We get the attribute value by binding the corresponding attribute name

 // Object to deconstruct 
      let obj={
    
        username : "lisi",
        age : 20
      }
      let {
    username ,age}=obj;
      console.log(" I am object deconstruction ",username);

4. Function parameter deconstruction and default values

stay es6 Inside , We can set default values for formal parameters , When no arguments are passed in , You can make it equal to the default value

// Function deconstruction 
      function test({
    username=" Small make up ",miao=" Gaga Shuai "}={
    }){
    
        console.log(username+miao);
      }
      test()

Object extension

1. A concise representation of properties and methods

 let username=' Small make up '
      let obj={
    
        username ,// When the attribute name and attribute value are the same , It can be abbreviated as 
        say(){
    
          console.log(this.username+" Gaga Shuai ");// Short for simple method 
        }
      }
      obj.say()

2. Variable as property name

  let key ='username';
     let obj={
    
       [key] : ' Small make up ',
       say(){
    
         console.log(this[[key]]+" Gaga Shuai ");
       }
     }
     obj.say();

3. Merge objects
Method ： Object.assign

 let obj1={
    
        username : ' Li Si ',
        say(){
    
          console.log(this.username+" Gaga Shuai ");
        }
      }
      let obj2={
    
        username : ' Small make up '
      }
      let obj=Object.assign(obj1,obj2)// If there are duplicate attributes, the attribute values in the following attributes will overwrite the above 
      obj.say()

Arrow function

1. Common expressions for arrow functions

let test=()=>{
    }// This is the arrow function 

2. Arrowhead function this Point to

As mentioned earlier, arrow functions are not bound this, He will find the context this For your own use

let test={
        say:()=>{
          console.log(this," Xiaobian gagashuai ");//this Point to the window, But it is obj The function called 
        }
      }
      test.say()

3. Arrow functions cannot be constructors
The arrow function itself doesn't have this, So it can't be used as a constructor

 var test=(name ,miao)=>{
    
        this.name=name;
        this.miao=miao;
      }
      let obj=new test(' Small make up ',' Gaga Shuai ');// Direct error 
      console.log(obj);

4. Arrowhead function arguments Object is not available
arguments Is a list of arguments

var test=(name ,miao)=>{
    
    
        console.log(arguments);// Report errors , There is no such thing 
        this.name=name;
        this.miao=miao;
      }
     test(1,2);

Promise( recite )

Knowledge point :

promise Definition
promise Use steps
async await Asynchronous to synchronous
promise Is a solution to asynchronous programming , Can be used to solve the problem of callback hell

(1) What is? promise

promise Promise in Chinese

promise There are three states :

pending In progress
resolved success
rejected Failure
Once the status changes , Can't change the state again , This is also its name promise- promise The origin of , One promise Object state can only be changed once

We can use promise To save future data

(2) promise How to use

establish promise object
Store successful or failed data
obtain promise Object's data

<!DOCTYPE html>
<html lang="en"> 
<body>
    <script type="module"> let num = window.prompt(" Please enter a number "); // 1. establish promise object  const obj = new Promise((resolve, reject) => {
       // num > 10 Positioning successful ,  Otherwise failure  if (num > 10) {
       // 2. Used when successful resolve Save the data  resolve({
      msg:'sucess',num}); } else {
       // 3. Fail with reject Save the data  reject({
       msg: 'error', num }); } }); // 3. get data  then() Get successful data , catch() Get failed data  obj.then((res)=> {
       console.log(' success ', res); }).catch(err=> {
       console.log(' Failure ',err); }) </script>
</body> 
</html>

es6 modularization

//index.js
export default {
    username : ' Small make up ',
    say(){
        console.log(this.username+" Gaga Shuai ");
    }
}
export let username =" Small make up "
//index.html
<script type="module"> import * as obj from "./index.js";//as The name  console.log(obj); </script>