Extended introduction to es6 functions (code example)

This article brings you an extended introduction to es6 functions (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Default values ​​of function parameters

We all know that declaring a function can set formal parameters, but have you ever thought that formal parameters can also set default values ​​directly? Let’s take a look at how to write it.

Code

function f(x,y=2) {
    return x+y
}
console.log(f(2)) // 4

The above small example just sets a default value of 2, and then when we use this function, we only pass the parameter 2 of x, so we will Get 4, what if we pass parameter 1 to y? What kind of results will we get? Continue to look at the example below

function f(x,y=2) {
    return x+y
}
console.log(f(2，1)) // 3

We will get 3, because if you pass the actual parameters, the default value will be replaced. More examples require everyone to experiment by themselves! ! !

function f(x，x,y=2) {
    return x+y
}
console.log(f(2，2, 1)) // 报错

The above example will report an error because we cannot set the same parameters

let x = 3
function f(x,y=x) {
    return x+y
}
console.log(f(2))

var x = 3
function f(x,y=x) {
    return x+y
}
console.log(f(2))

function f(x,y=x) {
    console.log(x,y) // 2 2
    var x = 3
    console.log(x,y) // 3 2
    return x+y
}
console.log(f(2)) // 5

The above three examples are examples of function parameter scope. Let’s take a look at the first and second The default value of the example function will have its own separate scope, so if we declare the modified x outside, it will not work. But in the third example, if we modify x inside the function, we can take a look at the value we printed. Before we declare it, our x and y are both 2. There is no variable promotion here. After the declaration, x becomes 3 and y remains unchanged, so we get 5

rest parameter

官方注解：ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中

Code

function f(...x) {
    console.log(x) // [1,2,3]
}
f(1,2,3)

In the above example we will get an array, which is exactly as it is defined. It will put the redundant variables together into an array

function f(arr,y,...x) {
    console.log(x)
}

function f(arr,...x，y) {
}

The first of the two examples above One can be executed and get the results you want, but the second one will report an error because the rest parameter can only be used in the last parameter position

How to use rest in strict mode?

从Es5开始函数内已经可以定义严格模式了，但Es6规定函数参数默认值定义严格模式会报错，但也要看严格模式定义在局部还是全局

If you don’t understand strict mode, you can take a look and understand
strict mode

code

 function fn(a=5) {
   'use strict';
   console.log(a)
   }
   fn()

In the above example, we set strict mode inside the function, but It did not return the results as expected, but reported an error. Let’s take a look at the official explanation: Strict mode inside a function applies to both function bodies and function parameters. However, when the function is executed, the function parameters are executed first, and then the function body is executed. That is to say, if strict mode is defined inside the function, the function parameters are executed first and then the function body (if strict mode is not defined, the function parameters are executed first), so it is unreasonable to verify whether the parameters are in strict mode in the function body

So how can we avoid such mistakes?
Code

   'use strict';
   function fn2(a=5) {
       console.log(a)
   }
   fn2()
   
    function fn() {
   'use strict';
       return function (a=5) {
           console.log(5)
       }
   }
   fn()() // 5

We can define strict mode globally, or define it inside a function and return a function with parameters, so that we can bypass the execution function parameters and execute the function body No error will be reported

name attribute

 官方注解： 函数的name属性，返回该函数的函数名  使用方式   函数名.name

code

function a() {
}
console.log(a.name) // a

function b() {
}
console.log(b.name) // a

In the above two examples, we will get the name of the function by using the name attribute. Of course, Es5 can also be used. You can Go try to test it in Es6 environment and Es5 environment

Arrow function

  let fn = a => a
  console.log(fn(10)) // 10
  
  // 对比
  
  let fn1 = function (a) {
      return a
  }
  console.log(fn1(10)) //10
  
  let fn2 =  (a,b) => a+b
  console.log(fn2(1,2))
  
  // 对比
  
  let fn21 = function (a,b) {
      return a+b
  }
  console.log(fn2(1,2))

We can look at the difference between the arrow function above and the functions we commonly write in Es5, which is to greatly reduce the number of English letters. Writing has become more concise. In fact, arrow functions have similar functions to ordinary functions. They are simple and easy to understand and can be nested into each other. They are very helpful for the neatness of your own code. I encourage everyone to use arrow functions more. Then there are several arrow functions. Note that everyone needs to remember that

1. The this object in the function body is the object where it is defined, not the object where it is used (this point is fixed)
2. cannot be used as Constructor, that is to say, you cannot use the new command, otherwise an error will be thrown
3. You cannot use the arguments object, which does not exist in the function body. If you want to use it, you can use the rest parameter instead
4. The yield command cannot be used, so the arrow function cannot be used as a Generator function (we will mention this function at the end and just take a look)

Tail call

 通俗的解释：就是在函数中最后一步调用函数

Code

  let fn = () => {
  console.log(123)
  return () => 5
  }
  console.log(fn()()) // 123     5

Tail recursion

let fn = (a,b) => {
  if(a===b) return b
  console.log(1)
  return fn(a+1, b)
  }
  console.log(fn(1,5))

Recursively call itself in the last step inside the function to achieve the recursive effect

Function The trailing comma of the parameter

Es7中允许函数形参最后一个带有逗号，以前都是不允许带有逗号的
  let fn = (a,) => {
      console.log(a)
  }
  fn(1)

In the above example, we added a comma after the parameter. After executing the result, we found that it can run normally, but I will not get an error in the es6 environment. I also tried es5 and no error will be reported. , you can try it,

The extension of the function ends here. The most important thing we need to learn is the arrow function and rest parameter value transfer, as well as the operation of the function in strict mode

This article is all over here. For more other exciting content, you can pay attention to the JavaScript Tutorial Video column on the PHP Chinese website!

The above is the detailed content of Extended introduction to es6 functions (code example). For more information, please follow other related articles on the PHP Chinese website!