ES6 mainly to solve the deficiencies of ES5, added a lot of content on the basis of the original ES5, this article will include 10 properties in the new ES6.
A, let and const
And var different, and the let const local variables are used to designate are block-level scope. Specifically refer to the article Ruan Yifeng teacher: http://es6.ruanyifeng.com/#docs/let .
Usage difference between these three is as follows:
. 1 var Val = "global variable" ; 2 . 3 { . 4 the let Val = "local variable" ; . 5 the console.log (Val); // local variables . 6 } . 7 . 8 the console.log (Val); // global variables . 9 10 const val = "constant" ; . 11 Val = "123"; // Uncaught TypeError: constant variable to the Assignment.
It said earlier declared const is a constant, once declared it no longer be modified. But when declared const objects, a new situation will emerge, give chestnuts:
. 1 const = {Person name: "Peter", age: "22 is" }; 2 person.age = 23 is; // not being given, person's age variable will be changed 23 is . 3 Person = {name: "Lily", Age: "18 is"}; // given
If an object declared const, the value of the object can be contained modified. In other words, as long as the address pointed objects are not modified, it is allowed.
About let const and there are a few small tips:
- Variables let keyword declaration does not have the variable lift (variable lift: https://blog.csdn.net/qq_42606051/article/details/82016733 ) characteristics;
- const and let in a block statement is only valid in the closest;
- When using a constant const statement, use an uppercase variables, such as: CAPITAL_CASING;
- const must be assigned at the time of declaration, otherwise it will error.
Second, the template string
In the past we want to string variables and spliced together, only "+" is achieved by the operator, even if the content too is represented by "\" line breaks, such as?:
var person = {name: "Peter", age: 22, career: "student"}; $(".introduction").html("Hello, my name is " + person.name + ", and my \ career is " + person.career + ".");
In ES6 may trans quotation marks ( '') to enclose the contents in anti quotes, $ {} may be used to refer to variables that need to write. Such as:
var person = {name: "Peter", age: 22, career: "student"}; $(".introduction").html(`Hello, my name is ${person.name}, and my career is ${person.career}.`);
So ES6, we can more easily connect strings and variables.
Third, the function arrow
In ES6 we introduced a new function expression, which is a shorthand method function, the following three characteristics:
- You do not need to define a function with a function key;
- Generally return can be omitted;
- Arrow inside the function, and this is not like any other function calls directed to its object, but the object inherit the context of this points to.
In the above three points, the third point is particularly important when using the beginners often ignore this.
Following are some use arrow function:
1 / * 2 ** corresponding to the above-mentioned point 3 . 3 ** arrow function, this points to its relevant context 4 ** In the present embodiment, the arrow is a window function fun context, this refers to so also the window . 5 * / . 6 window.val = 12 is ; . 7 the let Fun = () => { . 8 the let = 13 is Val ; . 9 the console.log (Val); // 13 is 10 the console.log ( the this .val); // 12 is . 11 the console.log ( the this == window); // to true 12 is } 13 is Fun (); 14 15 / * 16 ** using the ordinary function . 17 * / 18 is . 19 the let the Add = function (A, B) { 20 is return A + B; 21 is } 22 is 23 is / * 24 ** function uses arrows 25 * / 26 is the let ADD1 = (A, B ) => a + B; 27 28 // when only one parameter, the braces can be omitted 29 the let a = sqrt => a * a;
Fourth, the function may set the default value of the parameter
Prior to this, we want to set default values in the function can only be set by the following method:
1 function printText(text){ 2 var text = text || "hello world!"; 3 console.log(text); 4 } 5 6 printText("My name is Peter"); // "My name is Peter"; 7 printText(); // "hello world!";
However, a new method is defined in ES6, developers can use the following method to set the default value of the function parameter directly:
1 function printText(text = "hello world!") { 2 console.log(text); 3 } 4 5 printText("My name is Peter"); // "My name is Peter"; 6 printText(); // "hello world!";
Five, Spread / Rest operator
Rest operator is used to obtain a function call parameters passed. For chestnut:
1 let fun = function(...args) { 2 console.log(args); 3 } 4 5 const list = ["Peter", "Lily", "Tom"]; 6 fun(list); // ["Peter", "Lily", "Tom"]
? Operators used to construct the Spread destructor array, and a list of parameters in the function call to fill the array. As another chestnut:
1 / * 2 ** Spread use and meet the operational array . 3 * / . 4 const List1 = [ "Peter", "Tom" ]; . 5 const List2 = [ "Lily", "Mary" ]; . 6 const List = [.. .list1, ... List2]; . 7 the console.log (List); // [ "Peter", "Tom", "Lily", "Mary"]] . 8 . 9 / * 10 ** using the Spread operator array destructor 11 * / 12 is const [Person, ... list3] = List; 13 is the console.log (Person); // Peter 14 the console.log (list3); // [ "Tom", "Lily", "Mary"]
For more information on using the Rest and Spread of algorithms, Ruan Yifeng teacher can refer to the article: http://es6.ruanyifeng.com/#docs/array .
Sixth, binary and octal literals
ES6 supports binary and octal literals, by increasing the numbers in front of 0o or 0O can convert a number to octal.
. 1 the let = val1 is 0o10; 2 the console.log (val1 is); // 0o10 corresponding to 8, octal decimal 8 . 3 . 4 the let val2 = 0b10; . 5 the console.log (val2); // 2, corresponding to the decimal binary 0b10 2
Seven, objects and arrays deconstruction
ES6 object may be attributes or elements of an array deconstruction, and operation with Rest Spread operator similar to the aforementioned, the following look chestnut:
1 let person = { 2 name: "Peter", 3 age: 22, 4 career: "student" 5 } 6 7 const {name, age, career } = person; 8 console.log(`Hello, my name is ${name}, and my career is ${career}.`);
9 //Hello, my name is Peter, and my career is student.
Eight, allowing the use of super methods in objects
super method should not unfamiliar, used to represent the parent class constructor call in java. Because js is not object-oriented languages, so it does not inherit this to say. However ES6 may be set by calling setPrototypeOf () method prototype for an object, and inheritance in object-oriented languages are similar, it can also be understood that the js is used to implement the inherited methods. (This passage is purely personal understanding, if wrong, please point out.) So, in ES6 by using super prototype object can invoke methods of an object or acquisition parameters. Chestnuts as follows:
1 var father = { 2 text: "Hello from the Father.", 3 foo() { 4 console.log("Hello from the Father."); 5 } 6 } 7 8 var son = { 9 foo() { 10 super.foo(); 11 console.log(super.text); 12 console.log("Hello from the Son."); 13 } 14 } 15 16 /* 17 ** 将father设置成son的prototpe 18 ** When the call super son can call directly to its prototype object, i.e., father of the methods and variables . 19 * / 20 is Object.setPrototypeOf (son, father); 21 is son.foo (); 22 is // the Hello from Fater at The. 23 // the Hello from at The Fater. 24- // the Hello from at The Son.
Nine, iterator iterator, for ... of and for ... in
First you have to understand what is the iterator, refer http://es6.ruanyifeng.com/#docs/iterator#for---of-%E5%BE%AA%E7%8E%AF .
After complete understanding iterator, since we can look for ... of depth and these two methods for ... in the. One sentence summary is, whether it is for ... in or for ... of statements, iterative data are used, the main difference between them lies in their different iterative manner.
- for ... in the iteration statement of the object in the original sequence can be inserted enumerated attribute, is simple to understand for ... in is used to loop through property, the traversal symbol is a non-enumerable properties on prototype and itself, but not traverse a certain order (tips: for ... in in in ES5 had appeared)
- for ... of statement can iterate to iterate iteration data object definitions, that is, for ... of the cycle can only be an iterative object attributes can be iterative, not in the loop iteration property is ignored. (Tips: for ... of ES6 is only put forward)
On for ... in and for ... of usage, you can see the chestnuts:
1 Object.prototype.objCustom = function() {}; 2 Array.prototype.arrCustom = function() {}; 3 4 let iterable = [3, 5, 7]; 5 iterable.foo = 'hello'; 6 //for in 会继承 7 for (let i in iterable) { 8 console.log(i); // 依次打印 0, 1, 2, "foo", "arrCustom", "objCustom" 9 } 10 11 for (let i in iterable) { 12 if (iterable.hasOwnProperty(i)) { 13 the console.log (I); // sequentially print 0,. 1, 2, "foo" 14 } 15 } 16 . 17 // for of 18 is for (I of the let Iterable) { . 19 the console.log (I); // sequentially Print 3, 5, 7 20 is }
For an application, I am not very understanding. Examples are written reference to other bloggers. In the actual development process, it seems unlikely recommended for ... in, because different environment for ... achieve in the traversal algorithm is not the same, but also in the for ... in the course of this object properties add, modify, delete operation can not be guaranteed, MDN is not recommended to use this to traverse the object.
十、 class
ES6 provided closer to the traditional language of the writing, we introduce Class (Class) concept as a template object. By classkeyword, you can define classes.
Basically, ES6's classcan be seen as just a syntactic sugar, most of its functions, ES5 can be done, the new classwording just let the object prototype written more clearly, like object-oriented programming syntax only.