Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the core knowledge points of ES6". The editor shows you the operation process through actual cases, and the operation method is simple, fast and practical. I hope that this article "what are the core knowledge points of ES6" can help you solve the problem.

1. Let and const

The use of let and const is similar to that of var, both of which are used to declare variables, but they both have their own special uses in practice.

Because ES5 has only global scope and function scope, but no block-level scope, it will bring unreasonable effects during use, such as the following code:

Var name = 'apple' while (true) {var name =' banana' console.log (name) / / banana break} console.log (name) / / banana

In the above code, the banana is output twice. Does the inner variable overwrite the outer variable? Let, on the other hand, actually adds a block-level scope to JavaScript. The variables declared with it are valid only within the block of code where the let command is located.

Let name = 'apple' while (true) {let name =' banana' console.log (name) / / banana break} console.log (name) / / apple

Const is also used to declare variables, but it declares constants. Once declared, the value of the constant cannot be changed.

Const PI = Math.PI PI = 12; / / an error will be reported here

Const has a good application scenario, that is, using const to declare variables when we refer to third-party libraries can avoid accidental renaming in the future, which will lead to bug:

Const monent = require ('moment')

two。 Arrowhead function

The new arrow operator in ES6 = > simplifies the writing of functions. The left side of the operator is the input parameter, while the right side is the operation performed and the returned value. The arrow function is one of the most commonly used new features of ES6.

Defining an arrow function is simple, and the basic syntax is:

([param] [, param]) = > {statements} param = > expression

Param is a parameter, which can be divided into these cases according to the number of parameters:

() = > {.} / / Zero parameters are represented by ()

X = > {.} / / A parameter can be omitted ()

(X, y) = > {.} / / multiple parameters cannot be omitted ()

The Arrow function also has a powerful feature that solves the headache pointed to by the keyword this in the javascript language. The arrow function does not have its own internal this pointer. In the arrow function, the this pointer inherits from its scope. In other words, the this inside the arrow function is the this outside the function. Look at the following code:

Var a = 1; var test = {a: 100, c: function () {console.log (this.a);}, d: () = > {console.log (this.a);} test.c (); / / 100 test.d (); / / 1

3. Template string

ES6 allows you to use the anti-pie number `(usually above the keyboard tab key) to create a string, which can contain the variable ${vraible} wrapped in dollar signs and curly braces.

$("# result") .append (`

Welcome ${json.user}

You currently have points: ${json.fen}

`)

We do not need to use rn and + signs to concatenate strings when outputting multiline strings, while ES6 uses anti-pie numbers to make all spaces, new lines, and indents in the template string output as is in the generated string.

4. Default value of function parameter

When we call a custom function, we are afraid of forgetting to pass parameters, such as calling animal (). The traditional practice is to add the sentence type = type | | 'cat' to specify the default value.

Function animal (type) {type = type | | 'cat' console.log (type)} animal ()

Using ES6, you can write:

Function animal (type = 'cat') {console.log (type)} animal ()

Does it feel like writing php here?

5.Class class

ES6 introduces the concept of Class class, so the javascript code written in this way is more like the syntax of object-oriented programming. If you can PHP or Java, you can understand the following code at a glance:

Class Human {constructor (name) {this.name = name;} sleep () {console.log (this.name + "is sleeping");}} let man = new Human ("Davis"); man.sleep (); / / Davis is sleeping class Boy extends Human {constructor (name, age) {super () this.name = name; this.age = age;} info () {console.log (this.name +'is'+ this.age + 'years old') }} let son = new Boy ('Faker','8'); son.sleep (); / / Faker is sleeping son.info (); / / Faker is 8 years old

The above code first defines a "class" in class, where you can see that there is a constructor method, which is the constructor, and the this keyword represents the instance object. In a nutshell, the methods and properties defined within constructor are the instance objects themselves, while the methods and properties defined outside constructor are shared by all instance objects.

Inheritance between Class can be achieved through the extends keyword, which is much clearer and more convenient than ES5's inheritance by modifying the prototype chain. A Boy class is defined above, which inherits all the properties and methods of the Human class through the extends keyword.

It is worth mentioning that the essence of the inheritance mechanism of ES6 is to first create the instance object this of the parent class (so you must first call the super method), and then modify the this with the constructor of the subclass. The subclass must call the super method in the constructor method, otherwise it will report an error when creating a new instance. This is because the subclass does not have its own this object, but inherits the parent class's this object and processes it. If you do not call the super method, the subclass will not get the this object.

6. Deconstruction assignment

ES6 allows you to extract values from arrays and objects and assign values to variables according to a certain pattern, which is called Destructuring.

Let cat = 'ken' let dog =' lili' let zoo = {cat: cat, dog: dog} console.log (zoo) / / Object {cat: "ken", dog: "lili"}

The above code can be written as follows in ES6:

Let cat = 'ken' let dog =' lili' let zoo = {cat, dog} console.log (zoo) / / Object {cat: "ken", dog: "lili"}

The reverse can be written as follows:

Let dog = {type: 'animal', many: 2} let {type, many} = dog console.log (type, many) / / animal 2

This is the end of the content about "what are the core knowledge points of ES6". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.