ES6 Common syntax

Source: Internet
Author: User

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

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.