ES6 's tip (second part)

First, iterator and for-of cycles

In JS there are arrays and objects, ES6 and new set and map so JS has four kinds of data sets, so you can use them together, such as the array has objects, set, etc., which requires a unified

interface mechanism to handle different data structures, iterator is an interface that provides a unified access mechanism for different data structures, and any data structure can traverse operations as long as the iterator interface is deployed

them, and the iterator interface is primarily for for...of traversal

//Iterator InterfaceConstarr = [];function iterator (arr) {Let index= 0; return{next:function () {returnIndex < arr.length? {value:arr[index++],done:false}: {value:undefined,done:true}    }       }  }Constit =iterator (arr); Console.log (It.next ());//{Value:1,done:false}Console.log (It.next ());//{Value:2,done:false}Console.log (It.next ());//{value:undefined,done:true}

Second, the use of class classes

Es6 added class to make the ECMAScript syntax more biased to the background language

class cher{Constructor (A, B  ) {this. A = A;    this. B = b;   return  This ; } Chun () {  console.log(This thisnew Cher (' 111 ', ' 222 '   //111====222

In this case, the constructor method is the construction method, a class must have constructor, if not, it will default to add an empty constructor,this represents the instance object, there is a Chun method, There is no need to add function keyword, the method is not separated by commas, otherwise it will error, create an instance object is the same as ES5, must add new, otherwise it will be error

Third, the extension of the built-in objects

1, the extension of the string

String added a template string (super String), that is, the anti-quotation marks, and line break does not require a cumbersome plus sign connection, and in the string there are variables in the time do not need a plus connection, only need to use

${} operation is possible.

// HTML code <p></p>//JS code let str = ' o ';d ocument.getelementsbytagname (' P ') [0].innerhtml = ' Hell${str},world!!! '  //hello,world!!!

And there are several ways to add strings:

Repeat: Repeated operation on a string

Let str1 = ' 1 '= str1.repeat (5); Console.log (str2);   // 11111

Includes (), Startwith (), Endwith () are to see if they contain a string, whether the beginning part of the string contains a string, whether the end of the string contains a string, and they return a Boolean value

2. Expansion of arrays

Array.from (): Turns an array of classes into an array

Class array The most common is JS Select a group of element tags

Let AP = document.getElementsByTagName (' P '); Console.log (Array.isarray (AP));   // falseLet AP = Array.from (AP); Console.log (Array.isarray (AP));   // true

Array.of (): Creating an array

Const ARR = Array.of (a); Console.log (arr)  //[a]

Fill (): An array fill, the first argument is a filled string, or a second parameter is where the fill starts (can have no second argument)

Const ARR = [' A ', ' B ', ' C '];arr.fill (' abc'//[' abc ', ' abc ', ' abc ')

Find (), FindIndex (): Array for race selection

Const ARR = [1,2,3,4,5= Arr.find (functionreturn a > 3//  4,5 returns 1//FindIndex If no qualifying value is found() He returned the subscript, not found the words returned undefined

3. Expansion of objects

Concise Representation of objects

If the object's properties and values are the same, it can be written as let obj = {a}; The function can be written as handler () {...};

Object.assign (): Merging of objects. Copies all the properties that can be enumerated in an object to another object

Let obj1 = {x:1= {y:1//{x:1,y:1}

Object.is () to see if two values are the same, return a Boolean value

Console.log (Object.is ());  // true // falseConsole.log (object.is (Nan,nan));  // trueconsole.log (object.is ( -0,+0));  // false

Iv. Extension of functions

1. parameter of function Specify default value

function handler (x, y = 1) {  //y set a default value of 1  console.log (× + y);  } Handler (3);  // 4

2. Rest parameters

The rest parameter is in the form "... Variable name ", gets the extra arguments of the function, so that the arguments object is not needed, and the rest parameter is an array of variables, which put the extra arguments into the array

function // you can add parameters in front of arr, but you cannot add parameters later    var sum = 0;      for (var i=0;i<arr.length;i++) {        + = arr[i];    }    Console.log (sum);} Hander (6)  //

3. Arrow function

function // Common Functions    return  // arrow function console.log (Hander1 (1)) Console.log (Hander2 (1  // the two functions are the same.

The arrow function does not have its own this object, when used, the inside of this is the object that defines the environment, not when the object is used

There is no arguments object in the arrow function, there can be rest

The arrow function can not be used as a constructor, you cannot use the new operation, or you will get an error

Arrow functions cannot be used as generator functions