ES进阶 函数功能语法新特性详解

函数参数的默认值

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

    // 函数默认参数值
    function fun1(name, sex = "男") {
    
        return [name, sex]
    }
    console.log(fun1("Alice"))

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

函数的 length 属性

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。这个表示默认参数不作为length的计算范围。

    // 函数的length属性
    function fun2(a, b, c = 0) {
    
    }

    function fun3(c = 0) {
    
    }

    console.log(fun2.length)  // 2
    console.log(fun3.length)  // 0

rest 参数

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

    // REST参数
    function func4(...args) {
    
        for (let arg of args) {
    
            console.log(arg)
        }
    }

    func4("参数1", "参数2", "参数3")

name 属性

函数的name属性，返回该函数的函数名。

function foo() {
    }
foo.name // "foo"

箭头函数

ES6 允许使用“箭头”（=>）定义函数。作为一个熟悉JAVA的开发者来说，其使用和JAVA8的Lambda还是非常相似的，也更容易上手。

    // 箭头函数
    let fun = v => v + " world!"
    console.log(fun("hello"))

    //等价于
    function fun5(v) {
    
        return v + " world!"
}

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。如果箭头函数直接返回一个对象，必须在对象外面加上括号。

    // 无参数
    let fun6 = () => 1 + 1
    console.log("fun6===" + fun6())
    // 多个参数
    let fun7 = (a, b) => a + b
    console.log("fun7===" + fun7(1, 2))
    // 方法体多行
    let fun8 = (a, b) => {
    
        a++
        b++
        return a + b
    }
    console.log("fun8===" + fun8(1, 2))
    // 返回值是对象
    let fun9 = (a, b) => {
    
        a++
        b++
        return {
    
            c: a + b,
            d: a - b
        }
    }
    console.log("fun9===" + fun9(1, 2).c)
    let fun10 = (a, b) => ({
    c: a + b, d: a - b})
    console.log("fun10===" + fun10(1, 2).c)

箭头函数的this分析

箭头函数没有自己的this对象。对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。也就是说，箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。

Function.prototype.toString()

之前执行方法的toString()方法返回函数代码本身，但是会省略注释和空格。ES2019 对函数实例的toString()方法做出了修改，修改后的toString()方法，明确要求返回一模一样的原始代码。

    /**
     * 测试
     */
    function   /*** 测试*/   fun11() {
    
        return "1"
    }
    console.log(fun11.toString())

这个也会返回方法内部的内容，但是这个注释的返回并不友好，一般很少会把注释写在这个位置。

catch 命令的参数省略

JavaScript 语言的try…catch结构，以前明确要求catch命令后面必须跟参数，接受try代码块抛出的错误对象。

try {
    
  // ...
} catch (err) {
    
  // 处理错误
}

ES2019 做出了改变，允许catch语句省略参数。

try {
    
  // ...
} catch {
    
  // ...
}