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