Introduction to new features of ECMAscript

1. Default values ​​for function parameters

1.1 Specifying default values ​​for function parameters

In ECMAScript 2015 , it is allowed to add default values ​​for function parameters by writing the default values ​​directly after the parameters.

The sample code is as follows:

// Function parameters specify default values ​​function fun(a = 1, b = 2) {
  console.log(a + b);
}
fun() // 3

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

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

The following code example:

// The default parameter position should be at the end function fun(a = 1, b) {
  console.log(a, b);
}
// Call the function, passing a parameter fun(20); // 20 undefined

1.2 Use with decoupled assignment

Default parameter values ​​can be used in conjunction with default values ​​for destructuring assignments. There are two ways to set a default value for it. The sample code is as follows:

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

1.3 Scope of function parameters

Once the default values ​​of the parameters are set, the parameters will form a separate scope when the function is declared and initialized. When initialization is complete, the scope disappears. This syntax behavior will not occur if the default value of the parameter is not set.

The sample code is as follows:

let x = 5

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

2.rest parameters

ECMAScript 2015 introduced rest parameters (in the form of ...variable name) to obtain redundant parameters of a function, so there is no need to use the arguments object. The variable that is used with the rest parameter is an array, which contains the extra parameters.

The sample code is as follows:

// Use the arguments object to find the maximum value of the passed parameters function max1() {
  return Math.max.apply(null, arguments)
}

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

// Using rest parameters function max2(...arg) {
  return Math.max(...arg)
}
console.log(max2(1, 5, 6, 33, 65, 35, 15)); // 65

3. Arrow Function

3.1 What is an arrow function

ECMAScript 2015 added arrow functions (also known as fat arrow functions), which have a shorter syntax than function expressions and bind this lexically. Arrow functions are anonymous in most cases.

The grammatical structure of an arrow function is as follows:

// Basic syntax structure (parameter 1, parameter 2, ..., parameter N) => {function declaration}
(param1, parameter2, ..., parameterN) => expression (single)
// Equivalent to: (parameter 1, parameter 2, ..., parameter N) => {return expression}

// When there is only one parameter, the subscript is optional (parameter) => {function declaration}
// or parameters => {function declaration}

// If there is no parameter, you should write a pair of parentheses () => {function declaration}

// Can be used with rest parameters and default parameters (parameter 1, parameter 2, ...rest) => {function declaration}
(param1, parameter2, ..., parameterN = default valueN) => {function declaration}

Arrow functions can also define function names for them. The syntax structure is as follows:

let funName = (parameter 1, parameter 2, ..., parameter N) => {function declaration}

The sample code is as follows:

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

3.2 Notes on Arrow Functions

There are several points to note when using arrow functions:

• this object in the function body is the object where it is defined, not the object where it is used.

The sample code is as follows:

// ES5 notation let fun1 = function () {
  console.log(this.id);
}
// ES6 arrow function writing let fun2 = () => {
  console.log(this.id);
}

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

From the code we can see that this of a normal function is determined when it is called, while this of our arrow function is determined when it is defined.

• It cannot be used as a constructor, that is, the new command cannot be used, otherwise an error will be thrown.
• The arguments object cannot be used; it does not exist within the function body. If you want to use it, you can use the rest parameter instead.

4. Function tail call

Tail call is an important concept in functional programming. It is very simple and can be explained in one sentence. It means that the last step of a 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)
}

console.log(y(20)); // 40

This is the end of this article about the new features of ECMAscript: function extension. For more information about the extension of ECMAscript functions, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!