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

This article mainly explains "what is the full name of es6". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the full name of es6".

Es6's full name is "ECMAScript 6", so named because it is the sixth version of ECMAScript; in fact, it is officially called ECMAScript 2015, which is the standard of the JS language officially released in June 2015. Es6 has basically become an industry standard, and mainstream browsers have supported most of the features of ES6.

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

Es6, whose full name is ECMAScript6 (the sixth version of ECMAScript), is the standard for the JavaScript language officially released in June 2015, officially known as ECMAScript 2015 (ES2015). Its goal is to enable the JavaScript language to be used to write complex large-scale applications and become an enterprise development language.

The full name of es is "ECMAScript", which is a general scripting language implemented according to ECMA-262 standard. ECMA-262 standard mainly defines the syntax, type, statement, keyword, reserved word, operator, object and so on.

ECMAScript 6 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.

Var is compared with let and const:

Var is no stranger to you, it is used to declare variables, since you are so familiar with it, compare its disadvantages directly:

Three typical deficiencies of var

You can repeat the declaration

Cannot restrict modification

No block-level scope

Advantages of let and const

Cannot repeat the statement

Const constant can limit modification

Have block-level scope

Examples of var and let, const:

The first two points should be easy to understand, for example, I write a large project in the company, so many variables, if you use var, in case of repeated declaration, will it directly cover it for me? The answer is yes, this is very ridiculous, isn't it? it's so simple and rude that let will report the mistake directly to you if you repeat the statement.

Var a = 1; var a = 10; alert (a)

The second point doesn't explain. Think about it. π = 3.1415926. You see, mainly the third, what is block-level scope? {.}, this is enclosed in curly braces. In a classic example, three buttons click on the output subscript.

_ window.onload = function () {var abtn = document.getElementsByTagName ("input"); for (var a = 0; a

< abtn.length; a++) { console.log(a) abtn[a].onclick=function(){ console.log(a) alert(a); } } }; 你说输出什么？ 对，页面加载a就0,1，2了，然后点击都是3。为啥呢？ 2.模板字符串 在ES6之前，我们往往这么处理模板字符串： 通过"\"和"+"来构建模板 $("body").html("This demonstrates the output of HTML \content to the page, including student's\" + name + ", " + seatNumber + ", " + sex + " and so on."); 而对ES6来说 基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定； ES6反引号(``)直接搞定； ES6支持模板字符串，使得字符串的拼接更加的简洁、直观。 $("body").html(`This demonstrates the output of HTML content to the page, including student's ${name}, ${seatNumber}, ${sex} and so on.`); 3.箭头函数（Arrow Functions） 这是ES6中最令人激动的特性之一。=>

It's not just the abbreviation for the keyword function, it brings other benefits as well. 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'

Thank you for your reading, the above is the content of "what is the full name of es6". After the study of this article, I believe you have a deeper understanding of what the full name of es6 is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.