ECMAScript 6（10）函数的扩展(1) 函数参数的默认值和 rest 参数

小鱼儿 2021-09-19 14:08 404阅读 0赞

**目录**

函数参数

1.  函数参数的默认值

2.  传undefined时，取默认值

3.  变量是默认声明的，所以不能用let或const再次声明。

4.  使用参数默认值时，函数不能有同名参数。

5.  使用变量时，每次求值使用实时的值

6.   默认值与解构赋值

7.  函数的 length 属性

8.  函数的作用域

9.  函数参数默认值的使用要点

rest 参数

1.  (形式为...变量名)

--------------------

# 函数参数 #

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

> 给函数添加默认值比较简单, 就是参数=默认值

举个例子 :

function demo(x = 1) {
      console.log(x);
    }
    
    demo();    //1   没有参数取默认值 
    demo(5);   //5   有实参取实际参数值

## 2.  传undefined时，取默认值 ##

当赋值undefined时，取默认值

function demo(x = 1) {
        console.log(x);
    }
    demo(undefined);    //1

## 3.  变量是默认声明的，所以不能用`let`或`const`再次声明。 ##

不管参数有没有默认值，都不能用let或const再次声明：

function demo(x = 5) {
      let x = 1; // error
      const x = 2; // error
    }

## 4.  使用参数默认值时，函数不能有同名参数。 ##

// 不报错
    function foo(x, x, y) {
      // ...
    }
    
    // 报错
    function foo(x, x, y = 1) {
      // ...
    }
    // SyntaxError: Duplicate parameter name not allowed in this context

##  5.  使用变量时，每次求值使用实时的值 ##

假如函数参数使用函数外的变量，那么每次需要取该参数的默认值时，会去查看该变量的值，再拿来使用，而不是取函数声明时的变量的值；

let x = 99;
    function foo(p = x + 1) {
      console.log(p);
    }
    
    foo() // 100
    
    x = 100;
    foo() // 101

##  6.   默认值与解构赋值 ##

function foo({x, y = 5}) {
      console.log(x, y);
    }
    
    foo({}) // undefined 5
    foo({x: 1}) // 1 5
    foo({x: 1, y: 2}) // 1 2
    foo() // TypeError: Cannot read property 'x' of undefined

如果函数`foo`调用时没提供参数，变量`x`和`y`就不会生成，从而报错。通过提供函数参数的默认值，就可以避免这种情况。

function foo({x, y = 5} = {}) {
      console.log(x, y);
    }
    
    foo() // undefined 5

另外不建议使用以下这种方式来写，原因是这种写法，当传的属性没有y时，y的值就是undefined了

## 7.  函数的 length 属性 ##

简单来说 函数的length 属性就是函数参数的个数

console.log((function () {}).length);    //0
    console.log((function (a) {}).length);    //1
    console.log((function (a, b) {}).length);    //2

而当函数使用默认值之后，length属性则指的是 **从第一个参数开始算起，直到遇见第一个有默认的值的参数，在此过程中没有默认值的参数** 的个数

**简单来说就是,第一个有默认值之前的参数才算**

console.log((function (a = 1, b) {}).length);    //0，第一个就是有默认值，于是结束，是0
    console.log((function (a, b = 1) {}).length);    //1，    //第一个没，第二个有，于是1
    console.log((function (a = 1, b = 1) {}).length);    //0，第一个有，结束，是0

## 8.  函数的作用域 ##

首先，函数的作用域有三个：

> 1.  函数外部的作用域；
> 2.  函数参数的作用域（只有参数有默认值的时候才会出现，没有默认值就算出现也没有意义）；
> 3.  函数内部作用域；
> 
> 函数参数可以访问到外部作用域；  
> 函数内部可以访问到参数的作用域；  
> 但函数参数不能访问到函数内部作用域；

这里给一个比较典型的情况：

var x = 1;
    function foo(x, y = function () {
                     x = 2
                 }) {
        //这里函数内部作用域里 赋值x=3
        var x = 3;
        // 这里x=2，但这里实际改的是函数参数作用域里面的x的值是2
        // 但由于在函数内部作用域里又声明了一个x，因此2个x是不同的
        y();
        console.log(x);
    }
    foo();  //3

如果将`var x = 3`的`var`去除，函数`foo`的内部变量`x`就指向第一个参数`x`，与匿名函数内部的`x`是一致的，所以最后输出的就是`2`，而外层的全局变量`x`依然不受影响。

var x = 1;
    function foo(x, y = function () {
                     // 这里的 x 也没有用var 定义,所以也是指向第一个参数x
                     x = 2
                 }) {
        // 这里去掉var x 就指向第一个参数x
        x = 3;
        y();
        console.log(x);
    }
    foo();  //2

## 9.  函数参数默认值的使用要点 ##

一般来说，建议将带默认值的函数参数放最后，不需要带默认值的函数参数放前面，

如果非尾部的参数设置默认值，实际上这个参数是没法省略的

// 例一
    function f(x = 1, y) {
      return [x, y];
    }
    
    f() // [1, undefined]
    f(2) // [2, undefined])
    f(, 1) // 报错
    f(undefined, 1) // [1, 1]
    
    // 例二
    function f(x, y = 5, z) {
      return [x, y, z];
    }
    
    f() // [undefined, 5, undefined]
    f(1) // [1, 5, undefined]
    f(1, ,2) // 报错
    f(1, undefined, 2) // [1, 5, 2]

# rest 参数 #

## 1.  (形式为...变量名) ##

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

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

**rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。**

// 报错 Rest parameter must be last formal parameter
    function f(a, ...b, c) {
      // ...
    }

函数的`length`属性，不包括 rest 参数。

(function(a) {}).length  // 1
    (function(...a) {}).length  // 0
    (function(a, ...b) {}).length  // 1