ES6 new features: function extension, extended to see not understand

In this paper, the operating environment of the demo is Nodejs, reference: let Nodejs support ES6 lexical----Babel installation and use ;

Default value of the function:

If there are parameters, then use parameters, if there are no parameters, then use the default parameters;

Ajax requests often have to make these judgments, ES6 set a new expression, so that the logic of judging parameters is more simple;

1 2 3 ) {    // Output 1, 2, 3; FN (4,5,6// output 4, 5, 6

If you do not want to call the function when the function, using the default value of the function, then to pass a undefined;

1 2 3 {    1 ,2// Output 1, 1, 2//  Following this notation, will be reported abnormal; 1 ,2);

One of the things to note is that if you want to pass a default value to a function, the length of the function is: The function expects the parameter to be passed in, and does not contain a parameter that already defines the default value;

1 2 3  // output: 0

The function default value can also be a function;

function fn (x,y,f = (x, y) = x*y    ) {return  f (x, y);}; Console.log (FN(4,5// output:console.log (FN (4,5//  Output: 9

function By default is worth a practical application, set a parameter for must pass, do not send error;

function fn (foo = () =>{thrownew Error ("Missing parameter")}) () {    Console.log (foo)}fn (1// If no arguments are passed, the exception is thrown;

Rest parameters and extension operators

Rest parameters and extension operators the two expressions are the opposite, the use is relatively wide, convenient a lot of

Function (... args) {} This ... args is called the rest parameter;

... [1,2,3,4] This method is called the extension operator;

Below this demo can be seen arr and [... ARR] is equal, this equation applies to the general array:

Let arr = [1,2,3,4// output  : True

The rest parameter, which is generally used as a parameter when defining a function, is typically the functions ((... args)) {} or function (foo, bar, ... args) {} :

LET fn = (.... args) = = {    return  args;}; Console.log (FN (1,2,3,4));  // output: [1, 2, 3, 4]

Gets the minimum value of the demo for the element, although there is no egg to use

Let min = (.... args) = {        returnMath.min.apply (NULL,typeofargs[0] ==="Object"? args[0]: args);}; Console.log (min ([2,1,5,7,-2]));//output-2;Console.log (Min (2,1,5,7,-2));//output-2;

　　... rest This method of obtaining a parameter cannot be used as a default value, otherwise throwing an exception;

Let min = (...) args = [2,1]) = = {     return Math.min.apply (null, args);}; Console.log (min ());

Use of extension operators:

let args = [1,2,3,4];console.log (.... args);

The extension operator can be used as a function call, and no other benefits are found:

LET fn = function (... args) {    = () = () = {        console.log (arguments);    };    Insidefn (.... args);}; Console.log (FN (1,2,3,4));

Actually, we want to add a data to the head of an array, and then add a data to the tail;

LET fn =    function (... args) {= [1,2,3,4];fn (0, ... arr,5// Output [0, 1, 2, 3, 4, 5]

or to merge arrays:

Console.log ([... [1,2],... [3,4],... [5,6// Output [1, 2, 3, 4, 5, 6]= [[0]],[1],[2 c12>// output: [0, 1, 2]

The Inerator interface is called internally by the extension operator, and as long as it is an object with an iterator interface, you can use extension operators such as map and generator:

 Let map = new   map ([[ 1 ,  one   "  ", [ 2 , "  two   "  ", [ 3 , "  three   "  //  1 2 3  console.log (... Map.values ()); // one-Three  

LET fn = function* () {    yield1;     yield 2 ;     yield 3 ;     yield 4  // Output 1 2 3 4;

ES6 's Arrow function:

ES5 and ES3 define functions basically like this:

function Fn () {    }    

ES6 after the great, we can also use the arrow function to express a function, as shown below is the square of the return parameter:

LET fn = (x) = x*x;console.log (fn);

When using the arrow function, to return an object directly, the return object is enclosed in parentheses (), because the curly brace is the bottom start to interpret the JS code flag, so enclose it in parentheses;

LET fn = () = ({A:ten, B:()); Console.log (FN ())

The this point of the arrow function must be noted:

LET fn = ()+ =    {returnthis// at this time this is the FN;  = () = ()= Console.log (this// If it is running in a browser environment, this is the window, If you run this as undefined in node environment; FN1 ();

The arrow function inside this is not called the arrow function of this, although the arrow function has its own scope chain, but the arrow function does not have this, the arrow function of this is: the nearest arrow function from the function () {} Created by the This , If you don't know, look at the demo ....

(function fn () {    =  () = () =   {        this0;          This 1 ;         return  This ;    };     // Fn = fn.bind (new Object);    Console.log (Fn.call (new  Object));//Output result: {obj:1, x:0, Y:1}}.bind ({obj:1}));

The demo above shows that the arrow functions within the scope of this and who does not have to call it relationship ;

Of course, the this of the arrow function is not related to the method;

(function () {    = {        = = {            console.log (this);        }    };    Obj.method ();}. Bind ("hehe")) ()

Also because the arrow function of this and the arrow function has no relationship, so the arrow function can not be used as a constructor ;

The interior of the arrow function cannot be obtained to arguments;

The arrow function cannot be used as generator;

ES7 provides a convenient way to bind the scope of the syntax

ES3 and ES5 and ES6, bind scopes are either bind, or call , or apply, guys, now use :: two colons

Foo::bar; // equivalent to Bar.bind (foo); const hasOwnProperty = object.prototype.hasownproperty;function hasown (obj, key) {    return  Obj::hasownproperty (key);}; */= = document::d ocument.queryselectorall;

Reference:

Arrow functions:https://developer.mozilla.org/en-us/docs/web/javascript/reference/functions/arrow_functions

ruanyifeng:http://es6.ruanyifeng.com/#docs/function

NONO
Source: http://www.cnblogs.com/diligenceday/
QQ: 287101329
: 18101055830

ES6 new features: function extension, extended to see not understand