In-depth understanding of JavaScript function Series fourth--ES6 function extension

xTable of Contents [1] parameter default [2]rest parameter [3] extension operator [4] arrow function before

The ES6 standard on the function extension section, mainly involves the following four aspects: parameter default value, rest parameter, extension operator and arrow function

Parameter Default value

In general, setting the default value for a parameter requires the following settings

function log (x, y) {  = y | | ' World ';  Console.log (x, y);}

However, this setting is actually problematic if the value of Y itself is a false value (including false, undefined, null, ', 0,-0, NaN), you cannot get the value itself

function log (x, y) {  = y | | ' World ';  Console.log (x, y);} Log (//  HelloWorld//  Hellocountry//  Hello World

ES6 allows you to set a default value for the function's parameters, which is written directly after the parameter definition

function log (x, y = ' world ') {  console.log (x, y);} Log (//  HelloWorld//  HelloChina//  Hello NaN

[note] parameter variables are declared by default, so they cannot be declared again with let or const

function foo (x = 5) {  //syntaxerror:identifier ' x ' has already been declared
      //syntaxerror:identifier ' x ' has already been declared}

Tail parameter

Typically, a parameter that defines a default value should be the tail parameter of the function. Because it's easier to see what parameters are omitted. If a non-trailer parameter is set to a default value, the parameter is not actually omitted.

function F (x = 1, y) {  return//  [1, undefined]// [2, undefined]) // Error // [1, 1]

If the undefined is passed in, the parameter equals the default value is fired, and Null does not have this effect

function foo (x = 5, y = 6) {  null)//  5 null

Length

After specifying the default value, the Length property of the function returns the number of arguments that do not have a default value specified

( function// 1(function//  0(function/ /  2

[note] If the parameter that sets the default value is not a tail parameter, the length property is no longer counted in the following argument.

(function // 0(function//  1

Scope

"1" If the parameter default value is a variable, the scope of the variable is the same as the scope rule of the other variable, that is, the scope of the current function, then the global scope

var x = 1; function f (x, y = x) {  console.log (y);} F (//  2

"2" If the function is called, the variable x inside the function scope is not generated, then x points to the global variable

var x = 1; function f (y = x) {  var x = 2;   // 1

Application

With parameter defaults, you can specify that a parameter must not be omitted and throw an error if omitted

function throwifmissing () {  thrownew Error (' Missing parameter ');} function foo (mustbeprovided = throwifmissing ()) {  return  mustbeprovided;} Foo ()//  error:missing parameter

[note] Setting the default value of the parameter to undefined indicates that this parameter can be omitted

function foo (optional = undefined) {    //Todo}

Rest parameters

ES6 introduces the rest parameter in the form "... Variable name ") to get the extra arguments of the function, so that you do not need to use the arguments object. The variable that is paired with the rest parameter is an array that puts the extra arguments into the array

function Add (... values)  {var sum = 0;    for (var  val of values) {    + = val  ;  } return sum;} Add (//ten

The variables in the rest parameter represent an array, so the array-specific methods can be used for this variable

Here is an example of using the rest parameter to rewrite the array push method

function push (array, ... items) {  Items.foreach (function(item) {    Array.push (item);    Console.log (item);  });} var a =1, 2, 3);

The length property of the function does not include the rest parameter

(function(a) {}). length  //  1(function(... a) {}). length  // 0 (function(A, ... b) {}). length  //  1

[Note the]rest parameter can no longer have additional parameters

// uncaught syntaxerror:rest parameter must be last formal parameter function f (A, .... b, c) {  //Todo}

Extension operators

The extension operator (spread) is a three-point (...). It is like the inverse of the rest argument, converting an array to a comma-delimited sequence of arguments

Console.log (... [1, 2, 3]) // 1 2 3console.log (1, ... [2, 3, 4], 5)//  1 2 3 4 5[... document.queryselectorall (' div ')]//  [<div>, < Div> <div>]

This operator is primarily used for function calls

function Add (x, y) {  return x + y;} var numbers = [4,//  

Math.max Method Simplification

// ES5 Math.max.apply (null, [3, +])//  ES6math.max (... [3, +]) // equivalent to Math.max (14, 3, 77)

Push Method Simplification

// ES5 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; Array.prototype.push.apply (arr1, arr2); // ES6 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5];arr1.push (... arr2);

Extension operators can convert a string to a true array

[... ' Hello '] // ["H", "E", "L", "L", "O"]

Arrow functions

A detailed introduction to the arrow functions

Resources

"ECMAScript 6 Introduction" Ruan Yi Feng

In-depth understanding of JavaScript function Series fourth--es6 function extension