ES6 (V) — function

Time:2021-4-21

function

  • Function (function method update [default value, uncertain parameter, arrow function])
  • Default parameters — how to handle the default values of function parameters?

    • ES5
    • ES6
    • Number of function parameters
  • Rest parameter — how to deal with uncertain parameters?

    • ES5
    • ES6
  • Spread operator (inverse operation of rest parameter)

    • ES5
    • ES6
  • Arrow functions

    • statement
    • Parameters

      • You can add parameters
      • When there is only one parameter, the bracket can be omitted
      • When can curly brackets be omitted
    • The point of this is not who calls to whom, but who defines who points to whom
  • ES6 – ES10 learning map

Function method update [default value, uncertain parameter, arrow function]

Default parameters — how to handle the default values of function parameters?

A | B cannot be used to determine whether a function has a default value, but only whether it is equal to undefined

ES5

// X is a required value, y and Z are not required values
function f (x, y, z) {
    if ( y === undefined) {
        y = 7
    }
    if ( z === undefined) {
        z = 42
    }
    return x + y + z
}

console.log(f(1)) // 50
console.log(f(1, 8)) // 51
console.log(f(1, 8, 43)) // 52

ES6

Function parameters are parsed from left to right. If there is no default value, they will be parsed as undefined

//X is a required value, y and Z are not required values
function f (x, y = 7, z = 42) {
    return x + y + z
}
console.log(f(1)) // 50
console.log(f(1, 8)) // 51
console.log(f(1, 8, 43)) // 52

How to make y only take the default value

//If there is a default value, put it last
//It can be seen that the principle is similar to Es5
console.log(f(1, undefined, 43))

In addition to constants, the default value can also be the operation expression of other parameters

function f (x, y = 7, z = x + y) {
    return x * 10 + z
}
console.log(f(1, undefined, 2)) // 12--1 * 10 + 2
console.log(f(1))  // 18--1 * 10 + ( 1 + 7 )
console.log(f(1, undefined))  // 18--1 * 10 + ( 1 + 7 )

Number of function parameters

Es5 uses arguments to represent a pseudo array of function parameters, arguments.length Indicates the number of parameters

function f (x, y, z) {
    return arguments.length
}
console.log(f(1))  // 1
console.log(f(1, undefined)) // 2
console.log(f(1, undefined, 2)) // 3

Arguments is not supported in ES6

//Length is the number of parameters of the function without default value, not the number of parameters passed in during execution
function f (x, y = 7, z = x + y) {
    return f.length
}
console.log(f(1))  // 1
console.log(f(1, undefined)) // 1
console.log(f(1, undefined, 2)) // 1

Rest parameter — how to deal with uncertain parameters?

ES5

Using arguments

function sum () {
    let num = 0
    //Two methods for traversal
    // Array.prototype.forEach.call(arguments, function (item) {
    //     num += item * 1
    // })
    
    Array.from(arguments).forEach( function (item) {
        num += item * 1
    })
    return num
}
console.log(sum(1, 2, 3)) // 6

ES6

Using rest

  1. array
  2. Represents all parameters
  3. You can take apart part of the parameters
  4. The remaining parameters can only be used once and placed in the last position
function sum (...nums) {
    //... -- all the parameters of rest parameter are in the nums variable after three points
    let num = 0
    //Directly as an array traversal
    nums.forEach( function (item) {
        num += item * 1
    })
    return num
}
console.log(sum(1, 2, 3)) // 6

//Set the first parameter × 2 + the remaining parameters
function sum (base, ...nums) {
    let num = 0
    nums.forEach( function (item) {
        num += item * 1
    })
    return base * 2 + num
}
console.log(sum(1, 2, 3)) // 7 —— 1 * 2 + 5

Spread operator (inverse operation of rest parameter)

Spread operator and rest parameter are similar but opposite operators. In short, rest parameter “converges” indefinite parameters into arrays, while spread operator “breaks” fixed arrays into corresponding parameters

There’s an array that takes the whole as a parameter

ES5

//Calculate the perimeter of the triangle
function sum (x = 1, y = 2, z = 3) {
    return x + y + z
}
let data = [4, 5, 6]
console.log(sum(data[0], data[1],  data[2])) // 15
console.log(sum.apply(this, data)) // 15
//Apply() method: accepts two parameters, one is the scope in which the function is running, and the other is the parameter array (which can be an instance of array or an arguments object). It will be passed to function (data – > arguments) as a parameter
//Definition: the method calls a function with a given value of this, as well as parameters provided as an array (or array like object).
//The difference between the call () method and the apply () method is that they accept parameters in different ways. When using the call method, the parameters passed to the function must be enumerated one by one
console.log(sum.apply(null, [4, 5, 6])) // 15

ES6

console.log(sum(...data)) // 15

Arrow Functions ( Arrow function )

() => {}

statement

In the left bracket are parameters, and in the back bracket are function bodies

//Es5 declaration function
function hello () {}
let hello = function () {}

//ES6
let hello = () => {
    console.log('hello world')
}
hello() //hello world

Parameters

You can add parameters
let hello = (name) => {
    console.log('hello world ' + name)
}
hello('beijing') //hello world beijing
When there is only one parameter, the bracket can be omitted
let hello = name => {
    console.log('hello world ' + name)
}
hello('beijing') //hello world beijing
When can curly brackets be omitted
  1. Return is an expression (when there are no curly braces, the value of the expression will automatically return. If there are curly braces, return must be written)
let sum = (z, y, z) => x + y + z
console.log(sum(1, 2, 3)) // 6
//Return and curly brackets can be omitted
  1. The return is an object, enclosed in parentheses
let sum = (x, y, z) => ({
    x: x,
    y: y,
    z: z
})
//  Parenthesis is the meaning of a function expression. In this case, curly braces represent objects
  1. Other situations should be truthful

The point of this is not who calls to whom, but who defines who points to whom

In other words, the arrow function does not change the direction of this

// ES5
let test = {
    name: 'test',
    say: function () {
        console.log(this.name)
    }
}
test.say()   // test

// ES6
let test = {
    name: 'test',
    say: () => {
        console.log(this.name)
    }
}
test.say()   // undefined
//  Because the processing of this in the arrow function is defined, the point of this is the window that the test outer layer points to, and the window has no name attribute, so it is undefined

Learning territory

ES6 (V) -- function

Recommended Today

NLP in financial market — emotional analysis

By Yuki TakahashiCompile VKSource: towards Data Science Since the launch of alexnet on Imagenet, the deep learning of computer vision has been successfully applied to various applications. On the contrary, NLP has been lagging behind in the application of deep neural network. Many applications that claim to use artificial intelligence usually use some rule-based algorithm […]