Introduction to new feature functions of ECMAscript

1. Default value of function parameters

1.1 Function parameters specify the default value

existECMAScript 2015In this article, you can add default values ​​to the parameters of the function, and just write the default values ​​directly after the parameters.

The sample code is as follows:

// Function parameters specify the default valuefunction fun(a = 1, b = 2) {
  (a + b);
}
fun() // 3

It is worth noting:Parameter variables are declared by default, so they cannot be declared again with let or const, otherwise an exception will be thrown.

Also, the default parameters are at the end of the parameter list, otherwise an ambiguity will be caused, and the omitted parameters cannot be omitted.

The following code example:

// The default parameter position should be at the endfunction fun(a = 1, b) {
  (a, b);
}
// Call the function and pass a parameterfun(20); // 20 undefined

1.2 Used in conjunction with decoupling assignment

The default value of the parameter can be used in conjunction with the default value assigned by the deconstruction. There are two ways to set default values ​​for it. The sample code is as follows:

function fun([a, b = 5] = [3]) {
  (a, b);
}
fun() // 3 5

1.3 Scope of function parameters

Once the default value of the parameter is set, the parameter will form a separate scope when the function declares it initializes. This scope will disappear when the initialization is completed. This syntax behavior will not occur when the default value of the parameter is not set.

The sample code is as follows:

let x = 5

function fun(y = x) {
  x = 10
  (y);
}
fun() // 5

parameter

ECMAScript 2015IntroducedrestParameters (form... variable name) are used to obtain unnecessary parameters of the function, so there is no need to use arguments objects. The variable with the rest parameter is an array that puts the extra parameters into the array.

The sample code is as follows:

// Use the most passed parameters of the arguments object to find the maximum valuefunction max1() {
  return (null, arguments)
}

(max1(1, 5, 6, 33, 65, 35, 15)); // 65

// Use the rest parameterfunction max2(...arg) {
  return (...arg)
}
(max2(1, 5, 6, 33, 65, 35, 15)); // 65

3. Arrow function

3.1 What is an arrow function

ECMAScript 2015An arrow function (also known as fat-scissor function) has a shorter syntax than function expressions and binds this lexical way. Arrow functions are anonymous in most cases.

The syntax structure of the arrow function is as follows:

// Basic syntax structure(parameter1, parameter2, ..., parameterN) => {Function declaration}
(parameter1, parameter2, ..., parameterN) => expression(single)
// Equivalent to: (parameter 1, parameter 2, ..., parameter N) => {return expression}
// When there is only one parameter, the small number is optional(parameter) => {Function declaration}
// orparameter => {Function declaration}

// If there are no parameters, you should write a pair of brackets() => {Function declaration}

// Can be used with rest parameter and default parameter(parameter1, parameter2, ...rest) => {Function declaration}
(parameter1, parameter2, ..., parameterN = default valueN) => {Function declaration}

Arrow functions can also define function names for them, and the syntax structure is as follows:

let funName = (parameter1, parameter2, ..., parameterN) => {Function declaration}

The sample code is as follows:

let sum = (a, b) => {
  return a + b
}
(sum(10, 20)); //30

3.2 Notes on arrow functions

There are several points to note when using the arrow function:

• Inside the functionthisAn object is the object that is defined, not the object that is used.

The sample code is as follows:

// ES5 writing methodlet fun1 = function () {
  ();
}
// ES6 arrow function writing methodlet fun2 = () => {
  ();
}

let obj1 = {
  id: 666,
  fun: fun1
}
let obj2 = {
  id: 666,
  fun: fun2
}
() // 666
() // undefined

From the code we can see that thethisis determined when calling, and our arrow functionthisIt is determined when it is defined.

• Cannot be used as a constructor, that is, can not be usednewcommand, otherwise an error will be thrown.
• Not availableargumentsObject, the object does not exist in the function body. If you want to use it, you can use the rest parameter instead.

4. The function's tail call

Tail call is an important concept in functional programming. It is very simple in itself and can be explained clearly in one sentence, which means that the last step of a certain function is to call another function.

The sample code is as follows:

let x = (x) => {
  return 2 * x
}

let y = function (y) {
  return x(y)
}

(y(20)); // 40

This is the end of this article about the extension of functions of ECMAscript new features. For more information about extensions of ECMAscript functions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!