ECMAScript6 profile

ECMAScript 6.0 (ES6) is the next generation standard for the JavaScript language, which was officially released in June 2015. Its goal is to make JavaScript an enterprise-level development language that can be used to write complex, large-scale applications

Relationship between ECMAScript and JavaScript

  • To make this clear, we need to go back to history.
  • In November 1996, Netscape, the creator of JavaScript, decided to submit JavaScript to the standardization organization ECMA, hoping that the language would become an international standard
  • ECMA released the first version of the standard document 262 (ECMA-262), which defines the browser scripting language and calls it ECMAScript. This version is version 1.0.
  • Thus, the relationship between ECMAScript (Constitution) and JavaScript (lawyers) is that the former is the specification of the latter and the latter is an implementation of the former

ES6 in relation to ECMAScript 2015

  • After ECMAScript 5.1 was released in 2011, work began on version 6.0. The word ES6, therefore, means the next version of the JavaScript language.
  • ES6 is both a historical term and a general reference, meaning the next generation of JavaScript standard after 5.1, covering ES2015, ES2016, ES2017 and so on

ES6 Basic syntax

  • The ES standard does not contain the definition of DOM and BOM, but only covers general syntax such as basic data types, keywords, statements, operators, built-in objects and built-in functions.
  • This section only learns the necessary knowledge of ES6 in the front-end development, which is convenient for the understanding of the code in the later project development.

Let declaration variable

  • How is it different from our JavaScript var declaration variable?
    • Different scope
    • Different times of declaration
    • Declare in a different order than use

Const declaration constant

Const declares a constant and is a read-only variable

  1. Once declared, its value is not allowed to change
  2. SyntaxError: Missing initializer in const declaration SyntaxError: Missing initializer in const declaration

Deconstruction assignment

  • Deconstructing assignment is an extension of the assignment operator
  • It is a pattern match against an array or object, and then assign values to the variables in it.
  • Deconstruction, as the name implies, is the collection of data to be decomposed, split, the inside of the values iterated to obtain
  • Concise and easy to read in code writing, more clear semantics; It also facilitates data field retrieval in complex objects.

An array of deconstruction

var arr = [1.2.3];
var [x,y,z] = arr; 
console.log(x,y,z);
Copy the code

Object to deconstruct

var user = { 
    username : "吕布".weapon:"Halberd painted on the sky".horse:"Red rabbit horse" 
};
let {username,weapon,horse} = user; // Note: Destructed variable names must be attributes in the object
console.log("Name:"+username+"Arms,"+weapon+"Mount,"+horse);
Copy the code

Template string

  • Template strings are equivalent to enhanced strings
  • Backquotes can be used to define multi-line strings in addition to being normal strings
  • You can also add variables and expressions to strings.

Declare object shorthand

  • When defining objects, you can use variable names as attribute names
let name = ` lyu3 bu4 `; 
let age = 28;
let user = {name,age}; 
console.log(user2);
Copy the code

Define method shorthand

let user2 = {
    say(){
        console.log("Hello, everyone!); }}; user2.say();Copy the code

Object extension operator

  • Extend operator {… } remove all traversable properties from the parameter object and copy them to the new object

Copy object (deep copy)

  • A drop of blood in a science fiction movie could create an exact clone
let user1 = {
    name:"Xiang".age:34 
};

letuser2 = {... user1};// Deep copy (clone)

console.log(user1); 
console.log(user2);
Copy the code

Merge objects

  • Phagocytic amalgamation (of two objects into one)
let user1 = { 
    name:"Xiang".age:34 
};

let user2 = {head:"Zhuge Liang"}; 

letuser = {... user1,... user2};console.log( user );
Copy the code

The default argument to the function

function test(name , age = 18){ 
    console.log(I call `${name}This year, I${age}At the age of `); 
}

test("吕布".33); // My name is Lu Bu and I am 33 years old
test("The sable cicada"); // My name is Diao Chan and I am 18 years old
test("Guan yu".null); // My name is Guan Yu and I am null years old
test("D".""); // My name is Ma Chao and I am old
test("Zhang fei".undefined); // My name is Zhang Fei and I am 18 years old
Copy the code

An indefinite argument to a function

function test(. arg){ 
    console.log(Introduced to the `${arg.length}A parameter `); 
    for(var i = 0; i<arg.length; i++){console.log(arg[i]); 
    } 
}

test(1); 
test(1.2); 
test(1.2.3.4.5.6); 
test(); 
test("Guo"."Jia".28);
Copy the code

Arrow function

  • The arrow function provides a more concise way to write functions. The basic syntax is: Parameter => function body
var f2 = a= >a*10; 
console.log( f2(20));// When the arrow function takes an argument, () can be omitted
// When an arrow function has no arguments or more than one argument, enclose it with ()
// When the body of the arrow function has multiple lines of statements, delimit by {} to represent the code block
// If you have only one statement and need to return, you can omit {} and the result will be automatically returned

var f3 = (a,b) = > { 
    let sum = a+b; 
    return sum; 
}

console.log( f3(3.7));// F3 can be simplified
var f4 = (a,b) = > a + b; 
console.log( f3(11.22));Copy the code

Promise

  • Used to solve the nested nightmare of callback functions
next = n= >
    //Promise's constructor takes one argument, the function,
    Resolve (a callback after an asynchronous operation succeeds) and reject(a callback after an asynchronous operation fails)
    new Promise(function(resolve, reject) { 
        setTimeout(function() { 
            resolve(n); 
        }, 1000); 
    }); 
    
    next(1) 
    .then(res= > { / / success
        console.log(res); 
        return next(2); // The next method called in the then method must return, otherwise it will not pass the data down through resolve
    })
    .then(res= > { 
        console.log(res); 
        return next(3); 
    })
    .then(res= > { 
        console.log(res); 
    })
    .catch(() = > { // Handle failure: The second argument to the catch method is the failed callback
        console.log("Wrong!); 
    });
Copy the code

modular

  • What if five methods were defined in the A. js file and now the B. js file wants to use the five methods in a?
  • The way the Java language works is that once the import is introduced, you can use it. The modularity of ES6 is this process
  • After a JS file is declared as a module export, another JS file can import the module
  • Each module is loaded only once (singleton). If you load the same file in the same directory again, it is directly read from memory.

Babel environment

Babel is a widely-used transcoder that converts ES6 code into ES5 code for execution in existing environments. This means that you can write programs in ES6 right now without worrying about whether your current environment will support them