A preface.

Note: You can skip this section for ES6 basics

Of course, some people will tell you that you can learn Vue without studying ES6. But I don’t see it that way, because going straight to Vue without learning some ES6 syntax will make you spend more time knowing what it is and not what it all is.

What is ES6

  • ECMAScript is a specification for the browser scripting language and can be narrowly understood as a specification for javascript
  • ES6 is now the latest JS syntax
  • Later use the year number to do version (ES2017,ES2018…)

ES6 Common syntax

3.1 let&const

3.1.1 LET: Declare variables

  • Its use is similar to var(except that the declared variable is only valid within the code block in which the let command resides).
    • Code block valid
    • Cannot duplicate declaration
    • No variable promotion
  The test result of /* var is available outside the loop, but let is not available. Note that let is more consistent with our Java definition of a variable */
  for (var i = 0; i < 5; i++) {
      console.debug(i);
  }
  console.debug("External I:"+i); / / external I: 5

  for (let j = 0; j < 5; j++) {
      console.debug(j)
  }
  console.debug("External j."+j); //ReferenceError: j is not defined
Copy the code

3.1.2 Const: Declare a constant

  • Constants cannot be modified
const val = "abc";
val = "bcd"; //invalid assignment to const `val'
Copy the code

3.2 Deconstructing an Expression

ES6 allows you to extract values from arrays and objects and assign values to variables in a pattern called Destructuring.

3.2.1 Deconstruct variable assignments

// Before variable assignment
let a = "Zhang";
let b = "Bill";
let c = "Fifty";
console.debug(a,b,c);
// Use destruct variable assignment
let [a,b,c] = ["Zhang"."Bill"."Fifty"]
console.debug(a,b,c);
Copy the code

3.2.2 Array Deconstruction

let arr = ["Which zha"."Gold nuozha,"."Wood had"];
let [a,b,c] = arr;
console.debug(a,b,c);
Copy the code

3.2.3 Object parsing

let person = {name:"Which zha".age:12};
// Assign the value of the person object directly to the name and age properties
let {name,age} = person;
console.debug(name,age);
Copy the code

3.3 Arrow Function

The equivalent of a lambda expression in Java

3.3.1 Case 1: Primitive and arrow functions

  • The old way of writing it
    let hi = function(){
        console.debug("hi....");
    };
Copy the code
  • The arrow function
let hi = () = >{
    console.debug("hi.....")};Copy the code

3.3.2 Case 2: Functions with Parameters

Let hi = (name) => {console.debug(" hello, "+name); } hi(" Xiao Ming ");Copy the code

3.3.3 Case 3: Adding parameters to the object

var person = {
    // The old way
    say:function(){
        console.debug("How are you?");
    },
    // Use the arrow function
    hi:() = >{
        console.debug("You are real cowhide!")},// The arrow function is further simplified and is the most commonly used
    hello(){
        console.debug("It's time for real technique!"); }}; person.say(); person.hi(); person.hello();Copy the code

3.3.4 Case 4: Mixed use of deconstruction and arrow functions

// Define objects
let person ={name:"Zhang".age:32};
// The traditional way
function hello(person) {
    console.debug(person.name,person.age);
}
hello(person);

// Arrow function + destruct
let hi=({name,age}) = >{
    console.debug(name,age);
}
hi(person);
Copy the code

3.4 Promise: More powerful asynchronous programming

Note: In the future we will use Axios (much simpler), which is a low-level wrapper around Promise, which is the difference between native Ajax and JQuery

  • Asynchronous programming solutions (more powerful than traditional solutions)
  • Promises are simply a container that holds events that will end in the future
  • We can encapsulate the result of an asynchronous request in a Promise
// I Promise you
// Resolve: > method of successful execution
// reject: reject; Defective -> Method of execution after failure
// When creating an object, you can add an anonymous function to it -> this function will be called automatically later
var promise = new Promise((resolve, reject) = >{
   // resolve();
   // reject();
    // Use method calls
    setTimeout(() = >{
        var num = Math.random();
        if(num>0.5){
            resolve("Here's the result!");
        }else{
            reject("Operation failed"); }},1000)});// This code is executed after the corresponding method is executed on the above object
// If resolve is executed, then methods will be executed
Reject (reject); reject (reject)
// Wait for the equivalent of the code to execute when the promise succeeds
promise.then((result) = >{
    // Execute the code after success
    console.debug("Success? I'm real cowhide!!"+result);
}).catch((msg) = >{
    // Code executed after failure
    console.debug("Young people want to speak martial virtue!!"+msg);
})
Copy the code

3.5 Modular Specifications

  • This is a simple concept to understand, the browser does not currently support this feature, we can not test
  • Modularity means breaking up code so that it can be reused.
  • Modularity is an idea, and there are many specifications on the front end to implement it
    • commonJs: Implementation scheme in nodeJS
    • amd/cmd: can be implemented directly in the browser
    • ES6: can be directly implemented in the browser
  • ES6 We use two commands to form:exportandimport
    • exportCommand is used to specify the external interface of a module
    • importCommands are used to import functions provided by other modules

3.5.1 Importing or exporting a value

  • Export data (a constant)
// Define a constant, here is a tool, and export it so that other JS can use it
export const util ={
    say(){
        console.debug("I'm an awesome tool!");
    },
    hello(){
        console.debug("Of course I'm awesome!"); }};Copy the code
  • Import data
    • . /Represents the local directory
    • Note # 1: the suffix js can be omitted
    • Note 2: the util name must be the same as the exported variable/constant name
import {util} from './b';
util.hello(); // Call the function of the introduced object
Copy the code
  • The code shown

3.5.2 Exporting Multiple Values

  • Export function
let a ={
    hello(){}}let b ={
    say(){},}// Import multiple data
export {a,b};
Copy the code
  • The import function
Import {a,b} from "./b"; a.hello(); b.say();Copy the code
  • The code shown

3.5.3 Exporting Default Values

By default, you can choose the name of the import function

  • Export function
// Export the default value
export default {
    sum(){},
    hello(){}}Copy the code
  • The import function
// Import the default value
import {haha} from "./b";
haha.hello();
haha.sum();
Copy the code