ES6（五）—— 函数

函数

• 函数（函数方法更新【默认值、不确定参数、箭头函数】）

• Default Parameters —— 如何处理函数参数默认值？

  • ES5
  • ES6
  • 函数参数个数

• Rest Parameter —— 怎么处理不确定参数？

  • ES5
  • ES6

• Spread Operator（rest参数的逆运算）

  • ES5
  • ES6

• Arrow Functions(箭头函数)

  • 声明

  • 参数情况

    • 可以加参数
    • 有且只有一个参数的时候，括号可以省略
    • 花括号什么情况下可以省略
  • this的指向，不是谁调用指向谁，是谁定义指向谁
• ES6-ES10学习版图

函数方法更新【默认值、不确定参数、箭头函数】

Default Parameters —— 如何处理函数参数默认值？

判断函数有没有默认值不能使用a || b，只能判断其是否等于undefined

ES5

//x是必传值，y和z是不必传值
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

函数参数是从左到右解析，如果没有默认值会被解析成undefined

//x是必传值，y和z是不必传值
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

如何让y只取默认值

//有默认值的放最后
//可以看出来原理和ES5是类似的
console.log(f(1, undefined, 43))

默认值除了常量，还可以是其他参数的运算表达式

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 )

函数参数个数

ES5使用arguments表示函数参数的伪数组，arguments.length表示参数的个数

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

ES6中不支持arguments

// length是函数没有默认值的参数的个数，并不是执行的时候传入参数的个数
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 —— 怎么处理不确定参数？

ES5

使用arguments

function sum () {
    let num = 0
    //两种方法进行遍历
    // 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

使用Rest

1. 数组
2. 表示所有参数
3. 可以拆开表示部分参数
4. 剩余参数只能使用一次，且放在最后的位置上

function sum (...nums) {
    // ... —— Rest parameter 所有的参数都在三点后面的nums变量中
    let num = 0
    // 直接当作数组遍历
    nums.forEach( function (item) {
        num += item * 1
    })
    return num
}
console.log(sum(1, 2, 3)) // 6

//将第一个参数 × 2 + 剩余参数
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（rest参数的逆运算）

Spread Operator和Rest Parameter是形似但相反意义的操作符，简单来说Rest Parameter是把不定参数“收敛”成数组，而Spread Operator是把固定数组“打散”到对应的参数中

有一个数组，要整体当成参数

ES5

//计算三角形周长
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()方法：接受两个参数，一个是在其中运行函数的作用域，另一个是参数数组（可以是Array的实例，也可以是arguments对象），它将作为参数传给Function（data–>arguments）
// 定义：方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。
// call()方法与apply()方法的区别在于接受参数的方式不同，使用call方法是传递给函数的参数必须逐个例举出来
console.log(sum.apply(null, [4, 5, 6])) // 15

ES6

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

Arrow Functions(箭头函数)

() => {}

声明

左边括号里面是参数，后边括号里面是函数体

// ES5声明函数
function hello () {}
let hello = function () {}

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

参数情况

可以加参数

let hello = (name) => {
    console.log('hello world ' + name)
}
hello('beijing') //hello world beijing

有且只有一个参数的时候，括号可以省略

let hello = name => {
    console.log('hello world ' + name)
}
hello('beijing') //hello world beijing

花括号什么情况下可以省略

1. 返回是一个表达式（没有花括号的时候，表达式的值会自动return，有了花括号，必须写return）

let sum = (z, y, z) => x + y + z
console.log(sum(1, 2, 3)) // 6
//return 和花括号都可以省略

1. 返回是一个对象，要用小括号括住

let sum = (x, y, z) => ({
    x: x,
    y: y,
    z: z
})
// 小括号是函数表达式的意思，这个时候的花括号表示对象

1. 其他情况老老实实写

this的指向，不是谁调用指向谁，是谁定义指向谁

换句简单的话说，箭头函数不改变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
// 因为箭头函数中对this的处理是定义时，this的指向也就是test外层所指向的window，而window没有name属性，所以是undefined

学习版图