ES6 grammar summary

Time:2021-11-27

Block scope constructionletandconst

  1. letDeclaration, usage andvarSame, but withletDeclared variables are not promoted, and the scope of variables can be limited to the current code block.
  2. useletDeclaring variables also prevents repeated declarations of variables.
  3. If usedconstTo declare an object, the binding of the object itself cannot be modified, but the properties and values of the object can be modified.
  4. Use in global scopevarThe declared variable or object will be used as a variable in the browser environmentwindowObject, which means usingvarIt is possible to inadvertently overwrite an existing global attribute
  5. If used under global scopeletandconst, a new binding will be created under the global scope, but the binding will not becomewindowObject properties

Template literal

  1. The basic syntax of template literals is to replace single and double quotation marks of strings with backquotes (`)
  2. Template literal if you need to add a new line to the string, you only need to wrap the line directly in the code
  3. The placeholder consists of a to the left${And right}Symbol composition

Default parameters

  1. stayES6It simplifies the process of providing default values for formal parameters. You can specify default values for formal parameters directly in the parameter list

restparameter

  1. Adding 3 points before the named parameters of the function indicates that this is arestParameters,restA parameter is an array containing all parameters passed in since it

Expand operator

  1. The expansion operator is syntactically similar torestParameters are similar, but also three points. It can convert an array into independent parameters, or take out all traversable properties of the object
  2. The expand operator can be used to copy arrays
let arr1 = [1, 2, 3];
#Arr2 and Arr1 are the same array object
let arr2 = arr1;    
#Arr3 and Arr1 are two different array objects
let arr3 = [...arr1];
  1. The expand operator can also be used to merge arrays
let arr1 = ['a'];
let arr2 = ['b', 'c'];
console.log([...arr1, ...arr2]);
  1. The expansion operator can also be used to extract all traversable properties of the object and copy them to the current object
let book ={
    Title: "vue.js from introduction to practice",
    price: 98
}

let bookDetail = {...book, desc: "a fine book"}
console.log(bookDetail);

Object literal syntax extension

  1. You can omit colons and when defining object methodsfunctionkeyword
var car = {
    color: "red",
    doors: 4,
    showColor(){
        console.log(this.color);
    }
}
car.showColor();
console.log(car.showColor.name);
  1. stayJavascriptIn, you can access the attributes of the object through the dot (.) or square brackets ([]). If the attribute name contains special characters or Chinese, or the attribute name needs to be calculated, only square brackets can be used.

Deconstruction function

  1. If usedvarletorconstTo declare a deconstruction variable, an initializer must be provided, that is, a value must be provided to the right of the equal sign
  2. If the variable has been declared before and you want to assign a value to the variable with deconstruction syntax, you need to wrap the whole deconstruction assignment statement with parentheses
let book = {
    Title: "vue.js from introduction to practice",
    isbn: "987677898",
    price: 98
}
let title, isbn, price;
({title, isbn, price} = book);
  1. WhenbookNo in objectsalesVolumnProperty, or the property value isundefinedWhen, the preset default values are used. If you want to use a local variable name different from the object attribute name when using deconstruction assignment, you can use the syntax form of “attribute name: local variable name”
let book = {
    Title: "vue.js from introduction to actual combat",
    isbn: "98787733",
    price: 98
}
let {title: bookTitle, isbn: bookIsbn='test'} = book;
console.log(bookTitle);
console.log(bookIsbn);
  1. Unlike object deconstruction, if you perform array deconstruction assignment for a declared variable, you do not need to wrap the deconstruction assignment statement with parentheses
let arr = [1, 2, 3];
let a, b, c;
[a, b, c, d = 0] = arr;

modular

  1. Export can be exported separately, or export statements can be written at the end of the module. When there are many exported contents, the latter will be clearer;
  2. Not addedexportThe variables and classes defined by keyword are not allowed to be accessed outside the module.
  3. A module can be exported and only one default value can be exported. The default value is by usingdefaultKeyword specifies a single variable, function, or class.

Promise

  1. eachPromiseWill go through a short life cycle, first in progress(pending)At this time, the operation has not been completed, so it is also unprocessed(unsettled), once the asynchronous operation is completed,PromiseBecomes processed(settled)State of
  2. PromiseThere are only two possibilities for the state of an object to change: frompendingBecomefulfilled, or frompendingBecomerejected
  3. Usuallythen()Methods andcatch()Method to process the result of an asynchronous operation, which can more clearly indicate whether the operation result is successful or failed
promise.then(function(value){
    //Complete
    console.log(value);
}).catch(function(err){
    //Refuse
    console.error(err.message);
}
  1. PromiseAn important feature of chain call is that it can be used for subsequent callsPromiseTransfer data
  2. AndJavascriptMediumtry/catchCode blocks are different if not usedcatch()Method specifies the callback function for error handling, thenPromiseThe error thrown by the object will not be passed to the outer code, that is, there will be no response.

This work adoptsCC agreement, reprint must indicate the author and the link to this article

CodeFarmer