ES6入门教程笔记(6)-函数的扩展

ゝ一世哀愁。 2022-03-21 05:46 283阅读 0赞

## 1 函数参数的默认值 ##

#### 基本用法 ####

ES6之前，函数参数不能指定默认值，只能用变通的方法。

function print(x, y) { 
        y = y || 'World';
        console.log(x, y);
    }
    
    print('Hello') // "Hello World"
    print('Hello', 'Gamer') // "Hello Gamer"
    print('Hello', false); // "Hello World"

上面代码中，print函数内部检查参数y有没有赋值，如果没有，则指定默认值为World。但这种写法有个缺陷，就像最后一行代码所示，如果给参数y传的值为false，则该赋值不起作用，将被改为默认值。

为避免这个问题，通常是先判断参数y是否被赋值，如果没有，再赋给默认值。

if (typeof y === 'undefined') { 
        y = 'World';
    }

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

function print(x, y = 'World') { 
        console.log(x, y);
    }
    
    print('Hello') // "Hello World"
    print('Hello', 'Gamer') // "Hello Gamer"
    print('Hello', false); // "Hello false"

可以看到，ES6的写法比ES5简洁很多，而且非常自然。

除此之外，ES6的写法还有两个好处：首先，阅读代码的人无需查看函数体或文档，就可以立即了解哪些参数是可以省略的。其次，有利于将来的代码优化，即使未来彻底去掉这个参数，也不影响旧代码的运行。

#### 与解构赋值默认值结合使用 ####

参数默认值可以与解构赋值的默认值，结合起来使用。

function print({ x, y = 10}) { 
        console.log(x, y);
    }
    
    print({ }) // undefined 10
    print({ x:1}) // 1 10
    print({ x:1 y:2}) // 1 2
    print() // TypeError

上面代码中，只有当参数是一个对象时，变量x和y才会通过解构赋值生成。如果没有提供参数，将会报错。

通过提供函数参数的默认值，可以避免这种情况。

function print({ x, y = 10} = { }) { 
        console.log(x, y);
    }
    
    print() // undefined 10

上面代码中，调用print没有提供参数，被默认为一个空对象。

#### 参数默认值的位置 ####

通常情况下，定义了默认值的参数，应该是函数的尾参数。如果非尾部，这个参数将没法省略，除非显式输入`undefined`。

#### 函数的length属性 ####

函数的`length`属性，将返回没有指定默认值的参数个数。

## 2 rest参数 ##

ES6引入了`rest`参数，用来获取函数的多余参数。

function add(...values) { 
        let sum = 0;
        for (let val of values) { 
            sum += val;
        }
        return sum;
    }
    
    add(2, 5, 3) // 10

上面代码中的`add`函数，利用`rest`参数，可以传入任意数目的参数。

## 3 严格模式 ##

从ES5开始，函数内部可以设定为严格模式。

function func(a, b) { 
        'use strict';
        // code
    }

ES6规定，如果函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能再设定为严格模式，否则报错。

要规避这种限制，有一种方法是设定全局性的严格模式，这是合法的。

'use strict';
    
    function func(a, b = a) { 
        // code
    }

*注：本文原始内容来自 [ES6标准入门][ES6]，有修改。*

[ES6]: http://es6.ruanyifeng.com/