[ES6] Quick Mastery of common ES6

This series of articles is for a quick start. If you want to learn more, check out Ruan Yifeng’s Getting Started with ECMAScript 6. Learn 20% of what you know and get 80% of your work done

About the ES6

Let’s talk a little about ES6, please baidu or Google for more details

1. ES2015 = ES6
2. ES6 refers to ES2015, ES2016, ES2017, etc., the next generation of JavaScript standards
3. Modern browsers support most (90%+) native ES6, but Babel is often used to convert ES6 code to ES5 code for compatibility with older browsers.

Constant variables let and const

So let’s talk about constants and variables,

Constants are values that do not change after an assignment, such as the ID of the game account, and variables are values that need to change after an assignment, such as the game name and the game password.

In JavaScript, we used var to define global variables regardless of constants or variables,

var userId = Awesome!;
var userPassword = "mimabunengshuo";Copy the code

We now use let to define local variables in ES6, and const to define local constants

const userId = Awesome!;
let userPassword = "wobuzidao";Copy the code

Why use local variables and constants

// I want to repeat 0 to 9 10 times
/ / using var
function varI(){
    for(var i = 0; i <10; i++){for(var i = 0; i <10; i++){console.log("varI:"+i); }}}/ / use the let
function letI(){
    for(let i = 0; i <10; i++){for(let i = 0; i <10; i++){console.log("letI:"+i);
        }
    }
}
varI();// The result is printed only once, 0 to 9
letI();// Complete successfullyCopy the code

If you have to use var to do this you can use closures which I won’t talk about in this discussion

function varI() {
    for (var i = 0; i < 10; i++) {
        function test() {
            for (var i = 0; i < 10; i++) {
                console.log("varI:" + i);
            }
        }
        test();
    
    }
}
varI();// Complete successfullyCopy the code

Structure assignment

1. The left and right sides must be of the same data type, or converted to the same type;
2. The value on the right-hand side should be an array or an object, so if it’s not an object or an array, turn it into an object;
3. Definition and assignment must be done simultaneously

For example, declaring variables

let a = 1;
let b = 2;
let c = 3;Copy the code

ES6 allows you to write it like this.

let [a, b, c] = [1.2.3];Copy the code

Swap values of variables

let x = 1;
let y = 2;

[x, y] = [y, x];  Copy the code

Deconstructing assignment is especially useful for extracting data from JSON objects.

let jsonData = {
  status: true,
  data: ["nicai"."wobuzhidao"]}; let {status, data } = jsonData;

console.log(status, data); //true ["nicai"."wobuzhidao"]Copy the code

Arrow function

Before ES6, the definition function was written like this

var f = function (i){
    return  i + 5;
}Copy the code

With arrows you can write the function like this (drop the function keyword and add “=>” after “()”)

let f = (i) = > {
    return  i + 5;
}Copy the code

Doesn’t seem to make much difference?

• If the arrow function has only one argument, you can omit the “()” and write only the argument. You can omit the “{}” and return statements when there is only one return statement

I could write the top one like this

let f = i= > i + 5;Copy the code

The arrow function’s this is fixed, meaning that it refers to the object at which it was defined, not to the object at which it was used

If we convert the arrow function of ES6 to the normal function of ES5, we can see that the arrow function’s this refers to the outer this

// ES6
function foo() {
  setTimeout((a)= > {
    console.log('id:'.this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}Copy the code

String template

• String templates are mainly used to handle mixing of variables and strings
• Strings use backquotes (
  ‘string’

  ) to wrap the string with

  $character parenthesis (

  ${JavaScript}) to wrap arbitrary JavaScript expressions

• Carriage returns can be used in string templates

For example, to use JavaScript to generate HTML elements, the text of the elements to use their own JavaScript operations after the result of ES5 is more troublesome

$('#dom').append(
  '
      

        Your username is: '
       + userName + '<br> ' +
  'You've registered.' + oNumber +In '< / div >'
);Copy the code

ES6 is relatively simple

$('#dom').append(
  '<div> Your username is:${userName}<br> You have registered${oNumber}< / div > `
);Copy the code

object-oriented

• Class is used to define a class
• Extends is used to indicate which class to inherit
• The constructor constructor can define private methods and attributes; those outside this function are shared
• Super () uses this method in constructor to inherit the parent class’s this object

Code sample

class user {
    constructor() {
        this.name = Users' 1 ';
    }
    sayHello(say) {
        console.log(`The ${this.name}Someone says to you:${say}`); }}let user1 = new user();
user1.sayHello('hello'); // User 1, someone says hello to you

class xiaoming extends user {
    constructor() {
        super(a);this.name = 'Ming'; }}let xiaoming1 = new xiaoming();
xiaoming1.sayHello('hello'); // Xiao Ming, someone says hello to you
let user2 = new user();
user2.sayHello('hello')// User 1, someone says hello to youCopy the code

[ES6] Quick Mastery of common ES6

[ES6] Quick mastery of common ES6 (2)