Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what are the new features of es6 and how to use them". In daily operation, I believe many people have doubts about what the new features of es6 are and how to use them. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what are the new features of es6 and how to use them?" Next, please follow the editor to study!

Es6 new features: 1, use const and let to declare variables, both variables are block-level scope; 2, template string, syntax "`string `", can make string stitching more concise; 3, arrow function, can well solve the this pointing problem; 4, extension operator, expand iterable objects to its separate elements; 5, modularization, etc.

The operating environment of this tutorial: windows7 system, ECMAScript version 6, Dell G3 computer.

ECMAScript 6 (ES6) has basically become an industry standard, and its popularity is much faster than that of ES5. The main reason is that modern browsers support ES6 very quickly, especially Chrome and Firefox browsers, which already support most of the features in ES6.

Here is a detailed explanation of the commonly used new features of ES6:

1. Different variable declarations: const and let

Previously, JS has no block-level scope, const and let fill this convenient gap, const and let are both block-level scope.

ES6 recommends the use of let to declare local variables, as compared to the previous var (no matter where it is declared, it is considered to be declared at the top of the function) let and var declarations:

Var x = 'global variable'; {let x = 'local variable'; console.log (x); / / local variable} console.log (x); / / global variable

Let means to declare a variable, while const means to declare a constant, both of which are scoped at the block level; a variable declared by const will be considered a constant, meaning that its value cannot be changed after it has been set:

Const a = 1a = 0 / / error report

If the const is an object, the value contained in the object can be modified. To put it abstractly, it is just that the address pointed to by the object has not changed:

Const student = {name: 'cc'} student.name =' yy';// No error student = {name: 'yy'}; / / error report

There are a few points to note:

Variables declared by the let keyword do not have variable promotion (hoisting) features

Let and const declarations are valid only in the nearest block (in curly braces)

When using a constant const declaration, use uppercase variables, such as CAPITAL_CASING

Const must be assigned when declaring

two。 Template string

Before ES6, we used to deal with template strings by building templates with "\" and "+"

Html ("This demonstrates the output of HTML\ content to the page, including student's\" + name + "," + seatNumber + "," + sex + "and so on.")

And for ES6,

Basic string formatting. Embed the expression in a string for stitching. Defined by ${}

ES6 backquotes (``) are directly fixed.

ES6 supports template strings, which makes the stitching of strings more concise and intuitive.

$("body") .html (`This demonstrates the output of HTML content to the page, including student's ${name}, ${seatNumber}, ${sex} and so on.`)

3. Arrow function (Arrow Functions)

This is one of the most exciting features in ES6. = > is not just an abbreviation for the keyword function, it also brings other benefits. The arrow function shares the same this with the code that surrounds it, which can help you solve the problem of pointing to this. Experienced JavaScript developers are familiar with patterns such as var self = this; or var that = this that refer to peripheral this. But with the help of = >, this mode is not needed.

The three most intuitive features of the arrow function.

You do not need the function keyword to create a function

Omit the return keyword

Inherits the this keyword of the current context

/ / ES5var add = function (a, b) {return a + b;}; / / use the arrow function var add = (a, b) = > a + ES5 / ES5 [(function (x) {return x + 1;}) .bind (this)); / / use the arrow function [1m2ma3] .map (x = > x + 1)

Details: when your function has only one argument, you can omit the parentheses. You can omit {} and return when your function returns one and only one expression

4. The parameter default value of the function

Before ES6, we used to define the default values of parameters as follows:

Before / / ES6, when no parameter is passed in, text = 'default';function printText (text) {text = text | |' default'; console.log (text);} / ES6;function printText (text = 'default') {console.log (text);} printText (' hello'); / / helloprintText (); / / default

5. Extend operator (Spread operator)

Extend operator... It is introduced in ES6 to expand iterable objects into their separate elements. The so-called iterable objects are any objects that can be traversed by for of loops, such as arrays, strings, Map, Set, DOM nodes, and so on.

Extend operator. Array expressions or string can be expanded at the syntax level when function calls / array constructions are made, and object expressions can be expanded as key-value when constructing objects.

When used in an iterator, it is a Spread operator:

Function foo {console.log (x recital z);} let arr = [1meme 2je 3]; foo (.arr); / / 1 2 3

A Rest operator when used to pass parameters to a function, and a Rest operator when used to pass parameters to a function:

Function foo (... args) {console.log (args);} foo (1,2,3,4,5); / / [1,2,3,4,5]

6. Binary and octal literals

ES6 supports both binary and octal literals, which can be converted to octal values by adding 0o or 0O to the number:

Let oValue = 0o10 console.log (oValue); / 8 let bValue = 0b10; / / binary uses `0b` or `0B`console.log (bValue); / / 2

7. Deconstruction of objects and arrays

/ / object const student = {name: 'Sam', age: 22, sex:' male'} / array / / const student = ['Sam', 22,' male']; / / ES5 Const name = student.name;const age = student.age;const sex = student.sex;console.log (name +'-'+ age +'-'+ sex); / / ES6const {name, age, sex} = student;console.log (name +'-'+ age +'- -'+ sex)

8. Object superclass

ES6 allows the use of the super method in an object:

Var parent = {foo () {console.log ("Hello from the Parent");}} var child = {foo () {super.foo (); console.log ("Hello from the Child");}} Object.setPrototypeOf (child, parent); child.foo (); / / Hello from the Parent / / Hello from the Child

9.for...of and for...in

For...of is used to traverse an iterator, such as an array:

Let letter = ['a', 'baked,' c']; letter.size = 3 for (let letter of letters) {console.log (letter);} / / result: a, b, c

For...in is used to traverse properties in an object:

Let stu = ['Sam',' 22, 'male']; stu.size = 3 for (let stu in stus) {console.log (stu);} / / result: Sam, 22, male

Classes in 10.ES6

Class syntax is supported in ES6, but ES6's class is not a new object inheritance model, it's just a grammatical sugar representation of the prototype chain.

Define the methods and properties of the constructor using the static keyword in the function:

Class Student {constructor () {console.log ("I'm a student.");} study () {console.log ('studyboy');} static read () {console.log ("Reading Now.");}} console.log (typeof Student); / / functionlet stu = new Student (); / / "I'm a student." stu.study (); / / "study!" stu.read (); / / "Reading Now."

Inheritance and supersets in the

Class Phone {constructor () {console.log ("I'm a phone.");}} class MI extends Phone {constructor () {super (); console.log ("I'm a phone designed by xiaomi");}} let mi8 = new MI ()

Extends allows a subclass to inherit the parent class, and it is important to note that the super () function needs to be executed in the subclass's constructor function. Of course, you can also call the method of the parent class, such as super.parentMethodName (), in the subclass method. Read more about classes here.

There are several points worth noting:

The declaration of the class will not hoisting. If you want to use a Class, you must define it before using it, otherwise an error of ReferenceError will be thrown

You do not need to use the function keyword to define functions in a class

11. Modularization (Module)

ES5 does not support native modularity, and modules are added as an important part of ES6. The function of the module is mainly composed of export and import. Each module has its own scope, the mutual calling relationship between modules is to specify the interface exposed by the module through export, and to refer to the interface provided by other modules through import. At the same time, it also creates a namespace for the module to prevent function naming conflicts.

Export (export)

ES6 allows you to use export to export multiple variables or functions in a module.

Export variabl

/ / test.jsexport var name = 'Rainbow'

Lessons learned: ES6 supports not only the export of variables, but also the export of constants. Export const sqrt = Math.sqrt;// export constant

ES6 treats a file as a module, and the above module outputs a variable through export. A module can also output multiple variables at the same time.

/ / test.js var name = 'Rainbow'; var age =' 24 hours; export {name, age}

Derived function

/ / myModule.jsexport function myModule (someArg) {return someArg;}

Import (import)

Once the output of the module is defined, it can be referenced by import in another module.

Import {myModule} from 'myModule';// main.jsimport {name,age} from' test';// test.js

Lesson: an import statement can import default functions and other variables at the same time. Import defaultMethod, {otherMethod} from 'xxx.js'

At this point, the study on "what are the new features of es6 and how to use it" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.