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

學習版圖