ES6 Common syntax

Source: Internet
Author: User

What is a ES6?

  ECMAScript 6, ES6, was officially released in June 2015!!!

Two common grammar

  1. Declaring variable Const/let/var

ES6 used Var to declare variables, there are variable promotion ---will create variables in advance

Scopes also have global scope and function scope only---So the variable elevation is at the top of the function or at the top of the global scope

*************************************************************************************************************** *******

The Let keyword represents a variable, and a const represents a constant, which is a block-level scope, such as inside a function, or inside a {}.

  var

var defined variables can be modified, if not initialized will output undefined, will not error

1var a = 1;2var a;//no error .3Console.log ('Out-of- function var definition a:'+ a);//Can output a=14 function Change () {5A = 4;6Console.log ('var within the function defines a:'+ a);//Can output a=47 }8 Change ();9Console.log ('after a function call, VAR defines a to modify the value inside the function:'+ a);//Can output a=4
Const

A const-defined variable cannot be modified and must be initialized

1 Const B = 1;    correct 2 const B;    error, must initialize 3 console.log (' out of function const definition B:' + b ');/ with output value 4 //b = 5; 5 //console.log (' out of function modified const definition B:' + b ');//Cannot output
Let

Let is a block-level scope that has no effect on external functions after using let definitions inside the function

1Let C = 3;2Console.log ('Out-of- function let definition c:'+ c);//Output c=33 funcion Change () {4Let C = 6;5Console.log ('in-function let definition C:'+ c);//Output c=66 }7 Change ();8Console.log ('after a function call, the LET definition C is not affected by the inner definition of the function:'+ c);//Output c=3
the difference between let, const, and Var

One obvious difference between let and Var is that there is no variable elevation:

1 function fun1 () {2      for(var i = 0; I <= 10;i++){3         4     }5Console.log (i);//11;--------var variable promotion6 };7 fun1 ();8 function fun2 () {9      for(Let i = 0; I <= 10;i++){Ten          One     } AConsole.log (i);//i is  notdefined;--------Let no variable promotion - }; -Fun2 ();

The obvious difference between Const and VAR is that Const declares constants and cannot be changed by subsequent code assignments:

1 var x = 1; 2 x = 2; 3 console.log (x);//2;-----var declares a variable that can be substituted by an assignment of 45 Const y = 1; 6 y = 2; 7 console.log (y);//assignment to constant variable.; Constants are declared------const and cannot be changed

2. Template string

1<body>2<div id="Head">3</div>4<script>5Let ele=`6<div id="Head">78<p> Dynamic Add </p>9</div>Ten             `; OneLet Ele_div=document.getelementbyid ('Head'); AEle_div.innerhtml=Ele -</script>
</body>

  3. Functions

    The arrow function is a shortcut to the function, analogous to Python's anonymous function lambda.

The three most intuitive features

-- do not need function keyword to create functions

-- omit the return keyword

-- inherits the current context's this keyword (because the caller of the arrow function is the current context and differs from the normal function

1Where does the function call to decide who is referring to this?2The last object that invokes the function is the context object that is passed into the function this~~~3 4 Console.log (This)5 6 function Test () {7 Console.log (This)8 };9 TenLet obj = { OneA:1, A Test:test, - }; -  theLet Obj2 = { -B:3, - Obj:obj, - }; +  - obj.test (); + test (); AObj2.obj.test ();

4.import and Export

Slightly

5. Data Deconstruction

1Const PEOPLE = {2Name"Tim Mo",3Age:2,4     };5const {name, age} =people;6 Console.log (name);7 Console.log (age);8     9Const PERSON = ["Raven","Dao Mei"];Tenconst [NAME1, name2] =Person ; One Console.log (name1); AConsole.log (name2)

6.class/extends/super

ES6 introduces the keyword class to define a class, constructor is a constructor method, and this represents an instance object .

  Classes inherit all the properties and methods of the parent class through extends inheritance .

The Super keyword, which refers to the parent class's This object, the subclass must call the Super () method in constructor.

Otherwise, the new instance will be error-free because the subclass does not have its own this object. Call Super () to get this to be modified.

1 classanimal{2  Constructor (){3This.type ="Animal"4     }5 says (say) {6Console.log (This.type +"says"+say)7     }8 }9 TenLet animal =new Animal () One  AAnimal.says ("Hello") -  - classDog extends animal{ the  Constructor (){ -  super (); -This.type ="Dog"; -     } + } -  +Let dog =new Dog () ADog.says ("Hello")

ES6 Common syntax

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.