What is ES6
ECMAScript 6 abbreviation ES6, officially released in June 2015 ~ ECMAScript is the international standard of JavaScript language.
We are guided by the principle of 28, a good grasp of common, useful ~ can let us get started faster ~ ~ ~
1 declaring Variable const let VAR
ES6 the previous var keyword to declare a variable, no matter where it is declared, there is a variable promotion. The variable is created in advance ~
Scopes are only global scopes and function scopes ~ So the variables are promoted 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. is a block-level scope, such as inside a function, code block {} inside ~
//global variable elevation console.log (Global) varGlobal="Global"Console.log (Global) //lift function AA () for variables within functions () {if(1) {var test="Test"} console.log (Test)} function bb () {if(1) {Let test="Test"; } console.log (Test)}//Let var arry in the For loop= []; for(var i = 0; i<10; i++) {Console.log (i) arry[i]=function () {Console.log (i)}}//equivalentvar Arry = []; //var i; // for(i = 0; i<10; i++){ //Console.log (i)Arry[i] =function () {//Console.log (i)// } //} arry[5] () const name="Gaoxin"; Const name="Casual"Error
var let const2 Template string
ES6 introduced the anti-quote ', look at its magical place ~ ~ ~
<body><div id="head"></div><script>//= ' <div> = document.getElementById ("head"); Console.log (Ele_div) ele_div.innerhtml = ele; = ten= 5+ b}, ${A * b} ')</script></body>
Template String3 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, which differs from the normal function)
= = x+1// equivalent to function test (x) {return x+1}
Arrow Functions
Where does the function call to determine who ~~~//the last object that invokes the function is the context object that is passed into the function this~~~console.log (this) function test () { = { 1, = { 3, obj:obj,};obj.test (); test (); Obj2.obj.test () ;
the This of the context4 Import and Export
Import importing module, export exporting module
//Main.js//exporting multiple claims export var name="Gaoxin"export Var age=" -"export function aa () {return1}//Batch Export {name, age, AA}//Test.jsImport{name, age, AA} from "./main"console.log (name) Console.log (age) Console.log (AA ())//the entire module imports the module as an object//all exports under this module will exist as attributes of the objectImport* As obj from "./main"Console.log (obj.name) console.log (obj.age) Console.log (Obj.aa ())
Name Export
A module can have only one default export // The name can be different for the default export import //= new Vue ({}); Export default app// Test.jsImportfrom"./main"importfrom "./main"
Default Export5 Data Deconstruction
The deconstruction of the data is similar to the * * unpacking in our Python.
Const PEOPLE = { " Titus " ,2= [" Raven " " Dao Mei " == personconsole.log (name1) console.log (name2)
Deconstruction6 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.
classanimal{Constructor () {This.type="Animal"} says (say) {Console.log (This.type+"says"+say)}} Let Animal=new Animal () animal.says ("Hello")classDog extends animal{constructor () {super (); This.type="Dog"; }}let Dog=new Dog () dog.says ("Hello")
class extends Super
ES6 Common Syntax