New features of ES6

Time:2019-12-7

ECMAScript 6 is the version released by ECMA on June 2015. As a demarcation point, now we usually call these later versions ES6. ES6 has brought a lot of new syntax and added the concept of class. It can be predicted that JavaScript is moving towards an engineering language. We don’t know whether this is good or bad for young JavaScript, because it first became popular as a lightweight script language.

 

A new original type and variable declaration

  1,symbol

  Before ES6, we knew that JavaScript supports six data types: object, string, Boolean, number, null, undefined. Now, ES6 adds a new primitive data type: symbol, which represents a unique value, that is, each symbol type has a different value. This reminds me of another special value: Nan, think about whether they are a little similar!

var sy = Symbol('test');
 var sy1 = Symbol('test');
 console.log(tepeof sy);//'symbol'
 sy == sy1;//false
 var sy2 = new Symbol('test');//error : Symbol is not a constructor

When creating a value of the symbol data type, you need to pass a string to the symbol function, and one special thing is that you cannot call it with the new keyword. In addition, each symbol type value is unique, even if the same string is passed.

  2. Let and Const

ES6 adds two new keywords for declaring variables: let and const. The variables they declare work only within the code block where the let and const keywords are located, that is, within the brace {} that uses let and const, also known as block level scope (before ES6, only function scope and global scope were used). Let and const declare that variables will not be promoted during precompiling (nor will global declaration become a window property), and cannot be declared repeatedly. So to use such variables, you can only use them after let and const keywords.

{
     let a = 0;
     console.log(a);//0
 }
 console.log(a);//error a is not defined

Const is used to declare a constant, which must be assigned a value and cannot be changed once declared.

In fact, it is inaccurate that const variables cannot be changed. Please see the following example:

const obj = {
     name:'ren',
     age:12
 };
 obj = {};//error
 obj.sex = male;
 consol.log(obj);//{name:'ren',age:12;sex:'male'}

If const states an original value, the above statement is accurate. If const states a reference value, the more accurate statement should be a variable that cannot be reassigned.

  3. Deconstruction assignment 

Deconstructing assignment is an extension of assignment operator. It is a pattern matching for an array or object, and then assigning values to the variables in it.

let [a,b,c] = [1,2,3];
console.log(a,b,c);//1,2,3
**************************
let [a,b,c] = [1,,3];
console.log(a,b,c);//1,undefined,3
**************************
let [a,,b] = [1,2,3];
console.log(a,b);//1,3
**************************
Let [a,.. b] = [1,2,3]; //... Is the residual operator, which means that all the remaining values on the right side of the assignment operator except the first value are assigned to B
console.log(a,b);//1,[2,3]

In fact, all the objects that can be enumerated can use structure assignment, such as array, string object, and ES6’s new map and set types.

let arr = 'hello';
 let [a,b,c,d,e] = arr;
 console.log(a,b,c,d,e);//'h','e','l','l','o'

The object’s deconstruction assignment is similar to that of an array, but the variable name on the left needs to use the object’s property name and use the brace {} instead of the bracket []:

let obj = {name:'ren',age:12,sex:'male'};
 let {name,age,sex} = obj;
 console.log(name,age,sex);//'ren',12,'male';

   

2. New objects and methods

  1. Map and set

Map objects are used to hold key value pairs. Any value supported by JavaScript can be used as a key or a value. Does that sound like the object? In fact, they are different:

A) the key of object can only be string or symbol value of ES6, and map can be any value.

B) the map object has a size attribute that stores the number of key value pairs, while the object object has no similar attribute.

let myMap = new Map([['name','ren'],['age',12]]);
 console.log(myMap);//{'name'=>'ren','age'=>12}
 myMap.set('sex','male');
 console.log(myMap);//{'name'=>'ren','age'=>12,'sex'=>'male'}
 myMap.get('name');//'ren'
 myMap.has('age');//true
 myMap.delete('age');//true
 myMap.has('age');//false
 myMap.get('age');//undefined

The map constructor receives a two-dimensional array to create a map object. Bit 0 of array element represents the key of map object, and bit 1 represents the value of map object.

The map object uses the set method to add data. The set method receives two parameters, the first represents key and the second represents value. Use the get method to get the data. The parameter is the key of the object.

The map object uses the delete method to delete data and receives a parameter to represent the key to be deleted.

The map object uses the has method to detect whether it already has an attribute and returns a Boolean value.

Set objects are similar to map objects, but they are used to store a set of unique values, not key value pairs. It’s like an array, but each element is unique.

let mySet = new Set([1,2,3]);
 console.log(mySet);//{1,2,3}
 mySet.add(4);
 console.log(mySet);//{1,2,3,4}
 mySet.delete(1);//true
 mySet.has(1);//false

Using the uniqueness of set object, array de duplication can be easily realized:

let arr = [1,1,2,3,4,4];
 let mySet = new Set(arr);
 let newArr = Array.from(mySet);
 console.log(newArr);//[1,2,3,4]

  2. New features of objects

You can create objects in a more literal way. Directly use the variable name as the attribute and the function body as the method. Finally, the variable value becomes the attribute value and the function name becomes the method name.

let name = 'ren';
 let age = 12;
 let myself = {
     name,
     age,
     say(){
         console.log(this.name);
     }
 };
 console.log(myself);//{name:'ren',age:12,say:fn}
 myself.say();//'ren'

The extension operator (…) of object. Used to copy all traversable properties of the target object to the current object.

let obj = {name:'ren',age:12};
 let person = {...obj};
 console.log(person);//{name:'ren',age:12}
 obj == person;//false
 let another = {sex:'male'};
 Let someone = {... Person,... Other}; // merge objects
 console.log(someone);//{name:'ren',age:12,sex:'male'}

Two new methods, assign and is, have been added to the ES6 object.

Assign is used to shallowly copy the source object to enumerate properties to the target object.

let source = {a:{ b: 1},b: 2};
 let target = {c: 3};
 Object.assign(target, source);
 console.log(target);//{c: 3, a: {b:1}, b: 2}
 source.a.b = 2;
 console.log(target.a.b);//2

If there is a property with the same name, the property value of the target object is overwritten by the property value of the source object. So the performance of arrays is a little special:

Object.assign([1,2,3],[11,22,33,44]);//[11,22,33,44]

The index of the array is the property name. When using the assign method, the value of the target array will be overwritten by the value of the source array from bit 0.

The is method is basically similar to the (= =). It is used to determine whether two values are absolutely equal.

Object.is(1,1);//true
 Object.is(1,true);//false
 Object.is([],[]);//false
 Object.is(+0,-0);//false
 Object.is(NaN,NaN);//true

The only two differences between them are that the is method can distinguish between + 0 and – 0, and that it thinks that Nan is equal.

  3. New string method

Includes () determines whether the string contains a parameter string and returns a Boolean value. If you want to know where the parameter string appears, you still need the indexof or lastIndexOf methods.

Startswith() / endswith(), determines whether the string begins or ends with a parameter string. Returns the Boolean value. These two methods can have a second parameter, a number, indicating where to start the search.

let str = 'blue,red,orange,white';
 str.includes('blue');//true
 str.startsWith('blue');//true
 str.endsWith('blue');//false

The repeat () method returns a new string a specified number of times. If the number of times is a decimal greater than 0, round down; if the number is between 0 and – 1, round up; other negative numbers will throw an error.

console.log('hello'.repeat(2));//'hellohello'
 console.log('hello'.repeat(1.9));//'hello'
 console.log('hello'.repeat(-0.9));//''
 console.log('hello'.repeat(-1.9));//error

Padstart() / padend(), the parameter string is used to complete the string before or after the given length, and the new string is returned.

let arr = 'hell';
 console.log(arr.padEnd(5,'o'));//'hello'
 console.log(arr.padEnd(6,'o'));//'helloo'
 Console.log (arr.padend (6)); // 'Hell', if not specified, will be replaced by a space
 console.log(arr.padStart(5,'o'));//'ohell'

In addition, if the string plus the completed string exceeds the given length, the excess will be truncated.

  4. New method of array

Of () is a new method for creating arrays in ES6. Of takes the passed parameter as an array element to form a new array.

let arr = Array.of(1,'2',[3],{});
 console.log(arr);//[1,'2',[3],{}]

The from () method converts an iteratable object to a new array. The function can take three parameters: the first represents the iterative object to be converted, the second is the callback function, which will be applied to each array element, and then return the new value to the new array, and the third is to return the direction of this in the function. The last two parameters are optional.

let obj = {
     double(n) {
         return n * 2;
     }
 }
 let arr = [1, 2, 3];
 console.log(Array.from(arr, function (n){
     return this.double(n);
 }, obj)); // [2, 4, 6]

Find() and findindex(), find the eligible element values or indexes in the array. If more than one meets the criteria, only the first one will be returned.

let arr = [1,2,3,4,5];
 console.log(arr.find(1));//1
 console.log(arr.findIndex(5));//4

Fill() / copywithin(), replacing some elements in the array, will modify the original array.

let arr = [1,2,3,4,5];
 console.log(arr.fill(0,0,3));//[0,0,0,4,5]
 //Parameter 1 represents the target value, parameter 2 and parameter 3 represent the starting and ending positions of the replacement, with left closed and right open intervals.
 console.log(arr.copyWithin(0,2,4));//[0,4,0,4,5]
 //Parameter 1 indicates the starting position of the modification, parameter 2 and parameter 3 indicate the starting and ending positions of the replaced data, and the left is closed and the right is open.

Fill() is replaced with the specified value, and copywithin() is replaced with a part of the original value in the array.

  Include() is used to detect whether the array contains a value. You can specify the start position.

let arr = [1,2,3,4,5];
 console.log(arr.includes(2));//true
 console.log(arr.includes(1,1));//false

  

Trifunction

1. Parameter default value

ES6 adds parameter defaults for the first time. We no longer need to write fault-tolerant code inside functions.

function add(a=1,b=2){
     return a + b;
 }
 add();//3
 add(2);//4
 add(3,4);//7

Along with the parameter defaults, ES6 also brings indefinite parameters. Its function is similar to that of using arguments.

function add(...num){
     return num.reduce(function(result,value){
         return result + value;
     });
 }
 add(1,2,3,4);//10

The arrow function described below has no arguments attribute. If you want to implement indefinite parameters in the arrow function, the above method is a good choice.

  2. Arrow function

Arrow function implements a more concise way of writing, and also solves some problems of keyword declaration. There are no arguments or prototype properties inside the arrow function, so you cannot call the arrow function with the new keyword.

How to write arrow function: parameter = > function body.

let add = (a,b) => {
     return a+b;
 }
 let print = () => {
     console.log('hi');
 }
 let fn = a => a * a;
 //When there is only one parameter, the brackets can be omitted. When there is only one line return statement in the function body, the braces can also be omitted. It is strongly recommended not to omit them. It is really difficult to read

When the function needs to return the object directly, it is recommended to save the variable, then return the variable name, or wrap the object in parentheses. Otherwise, an error will be thrown.

var returnObj = () =>{
     var obj = {name:'ren',age:12};
     retufn obj;
 };
 //var returnObj = () => ({name:'ren',age:12});

The biggest difference between an arrow function and a normal function is that its inner this always points to its parent Ao object’s this.

This attribute will be added to the Ao object in the precompiling phase of ordinary functions to save an object (please refer to JavaScript in depth object (2)). Each ordinary function has a specific this object when it is executed, while the arrow function will not add a new object on its own this attribute when it is executed, but directly references the object bound by this on the parent Ao object. The Ao object of ordinary function is generated only when the function is executed. In other words, this of ordinary function is determined by the environment when the function is executed. The special point of arrow function is that when the function is defined, it needs to refer to this of its parent Ao object, that is, this of arrow function is determined by the environment at the time of definition.

According to the characteristics of arrow function, it is not difficult to speculate: if the method of defining objects directly uses arrow function, then this in the function will point directly to window.

var age = 123;
  let obj = {
      age:456,
      say:() => {
          console.log(this.age);
      }
  };
 obj.say();//123
 //Object has no execution time context (AO object). The method to define the object is actually in the global scope, namely window

If you have to point this to the current object in the arrow function, there is still a way (but there is no need to be so troublesome, isn’t it better to use the ordinary function directly?) :

var age = 123;
  let obj = {
      age:456,
      say:function(){
          var fn = () => {
          console.log(this.age);
         }
          return fn();
      }
  };
 obj.say();//456

Let’s analyze how to do this: first of all, when we use obj to call the say method, the Ao object is created in say, and the this attribute of the Ao object points to obj (please go back to my “JavaScript in depth functions / objects”) and then an arrow function is declared inside say. We say that the arrow function must forcibly reference the parent Ao’s this property when it is declared. Now who is the parent Ao of the arrow function? Of course, it’s the Ao of say, so this of arrow function is directly bound to obj. At last, this obtained by arrow function during execution is actually the ao.this of say method, namely obj itself.

Above is the use of arrow functions in objects. If that’s hard for you to understand, look at this way: use arrow functions in normal functions.

var obj = {name:'ren'};
 function test(){
     var fn = () => {
         console.log(this);
     };
     fn();
 }
 test();//window
 test.call(obj);//{name:'ren'}

When the test function is executed globally, its this point to window. At this time, the definition of arrow function is also generated, so this in arrow function is also pointed to window, so the window object is finally printed.

When we manually change the direction of this when the test function is executed, we actually modify this bound by the arrow function definition. So obj is finally printed out.

 

Four classes  

Class is introduced into ES6 as an object template. You can define a class through the class keyword. The essence of class is still a function.

1. Create a class

Class ex {// keyword declaration method
     constructor(name){
         this.name = name;
         this.say = () => {
             console.log(this.name);
         }
     }
     methods(){
         console.log('hello ' + this.name);
     }
     static a = 123;
     static m = () => {
         console.log(this.a);
     };
 }
 //Let ex = class {} literal
 var example = new Ex('ren');
 example.say();//'ren'
 Ex.m();//123 example.methods();//'hello ren'
Constructor is a necessary method to create a class. When using new to call a class to create an instance, the method will execute automatically. This method is similar to the constructor, and returns this object by default. The methods and properties of the instance are defined inside the constructor. Equivalent to this mode of the constructor.
Class preserves the prototype property. Methods in the class do not need to use the function keyword, and there is no comma separation between methods. The methods defined in the class are actually stored on the prototype property of the class.
Use the static keyword to define the static properties and methods of a class. You cannot define a common property in a class. To define the common property of an instance, you need to use the prototype property: ex.prototype. Property name = property value. The new keyword is still used for instance creation. 2. The inheritance of the class is implemented by the extends keyword.
class Person {
     constructor (name,age){
         this.name = name;
         this.age = age;
     }
     say(){
         console.log(this.name + ':' + this.age);
     }
 }
 class Student extends Person{
     constructor (name,age,sex){
         super(name,age);
         this.sex = sex;
     }
 }
 var student = new Student('ren',12,'male');
 student.name;//'ren'
 student.sex;//'male'
 student.say();//'ren:12'

The child class inherits from the parent class. Instead of implicitly creating its own this object, it references the parent class’s this through super(). This procedure is similar to using the parent constructor call (this) within the child constructor, but they are essentially different. In addition, ES6 specifies that super() must be executed before this of the subclass. So in general, we put super () on the first line of the subclass constructor method. That’s right!

 

Five asynchronous mechanism

  In ES6, two new asynchronous mechanisms, promise and generator, have been added. The writing is limited. I’m afraid that I don’t know what I’m talking about. Please go to the following link for further study. Mr. Liao’s course is also highly praised by many people. Of course, MDN is more official. (in fact, it takes a lot of space to explain, so I’m lazy here.)

  1,Promise

  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

  https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544

  2,Generator

  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator

  https://www.liaoxuefeng.com/wiki/1022910821149312/1023024381818112

  

 

Recommended Today

Understanding cookie, session, token, JWT

History of development 1. A long time ago,WebBasically, it’s just browsing documents. Since it’s browsing, as a server, it doesn’t need to record who browsed what documents in a certain period of time. Each request is a new oneHTTPProtocol is request plus response, especially I don’t have to remember who just sent itHTTPRequests, every request […]