[ES6]---函数的扩展（rest参数&&箭头函数）的讲解

函数的扩展

函数参数的默认值

ES5中不允许为函数的形参设置其默认值，当定义形参，而不传递实参时–形参的默认值为undefined，我们可以人为地解决形参默认值的问题 arg=arg||0

function fn(arg) {
    arg = arg || 0
    console.log(arg) //0
}
fn()

ES6 允许为函数的形参设置默认值

function fn(arg = 0) {
    console.log(arg) //100
}
fn(100)

我们还可以与解耦赋值配合使用

function fn([a, b = 0]) {
    console.log(a + b)
}
fn([1])

函数参数的作用域

如果为函数的参数设置默认值的话，当函数声明进行初始化时，参数会形成一个独立的作用域。这个作用域会在函数初始化完毕时消失。

let v = 100

function fn(arg = v) {
    let v = 1000;
    console.log(arg) //100
}
fn()

在ES5中，当局部变量与形参同名时，局部变量会覆盖形参

// ES5
function fn(arg) {
    //当局部变量与形参同名时，局部变量会覆盖形参
    var arg = 1000; //局部变量--定义在函数作用域
    console.log(arg) //1000
}
fn(100)

rest参数

rest参数(…变量名),用于获取函数多余的参数，代替arguments对象。与rest参数配合的变量是一个数组，该变量将多余的参数放入数组中。

注意：rest参数之后不能再有其他参数(即只能是最后一个参数)，否则会报错。函数的length属性，不包含rest参数

接收多余的参数(实参)--定义的形参小于实参的个数

ES5–利用arguments对象接收多余的参数

function fn(a, b) {
    console.log(a, b, arguments[2]) //1 2 3
}
fn(1, 2, 3)

ES6利用rest参数接收多余的参数(数组类型)

function fn(a, b, ...args) {
    //扩展运算符--原地展开可迭代的对象(数组、字符串等)
    console.log(a, b, ...args) //1 2 3 4 5
}
fn(1, 2, 3, 4, 5)

箭头函数

箭头函数是什么

ECMAScript 6新增了箭头函数(又称胖箭头函数),相比函数表达式具有较短的语法并以词法的方式绑定this。箭头函数总是匿名了。

• () - 表示声明函数时的参数(形参)
• =>内容 - 表示声明函数时的函数体

ES5定义函数的方式

function fn() {

}

var fun = function() {

}

var f = new Function()

ES6箭头函数(一般都是匿名函数)

var n = () => 5

//等价于
var n = function() {
    return 5
}
console.log(n()) //5

function fn(a, b) {
    var result = a + b
    return result;
}
console.log(fn(1, 2)) //3

var fn = (a, b) => {
    var result = a + b
    return result;
}
console.log(fn(1, 2)) //3

ES5

定义函数时，使用的this ->指向调用函数时的上下文对象

function fn() {
    console.log(this)
}
//将fn作为函数进行调用
fn(); //当前执行环境中的全局对象(浏览器环境是window;Node.js环境是Global对象)
//使用call()或apply()调用函数fn
let obj = {}
fn.call(obj) //{}

//函数fn作为对象obj2的方法
let obj2 = {
    sayMe: fn
}
obj2.sayMe(); //{ sayMe: [Function: fn] }

ES6

声明箭头函数，函数中的this ->指向的是定义箭头函数时的上下文对象

var n = () => {
    console.log(this)
}
n() //{}
var obj3 = {
    sayMe: n
}
obj3.sayMe(); //{}

箭头函数的语法结构

• 基本语法结构

  • (參数1,参数2, …参数N)=> {函数声明}
    (参数1,参数2.,…参数N)=>表达式(单一)
    相当于: (参数1,参数2, …参数N) =>{ return表达式;}
  • 当只有一个参数时，圆括号是可选的:
    (单一参数) => {函数声明}
    单一参数=> {函数声明}
  • 没有参数的函数应该写成一对圆括号。
    () => {函数声明}

• 高级语法结构

  • 支持剩余参数和默认参数

    (参数1,参数2, …rest )=>{函数声明}
    (参数1 =默认值1,参数2, …,参数N =默认值N) => {函数声明}

箭头函数的注意事项

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

箭头函数不能作为构造函数使用

var fn = () => {
    this.name = '张无忌'
}
var f = new fn()
console.log(f)  //报错

箭头函数可以作为对象的方法

let obj = {
    name: '林俊杰',
    sayMe: () => {
        console.log('this is  林俊杰') //this is  林俊杰
    }
}
obj.sayMe()

箭头函数中不存在arguments对象，需要使用rest参数进行替换

var fn = (...args) => {
    console.log(args)
}
fn(1, 2, 3, 4, 5) //[ 1, 2, 3, 4, 5 ]

函数的尾调用

尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，就是指某个函数的最后一步是调用另一个函数。

function g(x){
    return x=2;
}
function fn(x){
    return g(x);// 表示尾调用
}

console.log(fn(3));//2

尾调用不一定出现在函数尾部，只要是最后一步操作即可。