对 rest 参数(剩余参数) 与 Spread 语法(展开语法)的理解

你的名字 2022-10-18 15:55 106阅读 0赞

### 文章目录 ###

*  Rest 参数(剩余参数)
 *  Rest 参数和 arguments 的区别
 *  Spread 语法(展开语法)
 *  参考

# Rest 参数(剩余参数) #

Rest 参数（剩余参数语法）可以把一个不定数量的参数表示为一个数组。

函数的最后一个命名参数以三个点`...`为前缀，则它就会成为一个由剩余参数组成的真数组。

例如，我们需要把所有的参数都放到数组 args 中：

function sumAll(...args) {  // 数组名为 args
      let sum = 0;
    
      for (let arg of args) sum += arg;
    
      return sum;
    }
    
    alert( sumAll(1) ); // 1
    alert( sumAll(1, 2) ); // 3
    alert( sumAll(1, 2, 3) ); // 6

或者获取前面几个参数作为变量，并将剩余的参数收集起来。：

function(a, b, ...theArgs) { 
      // ...
    }

注意!!!

**Rest 参数必须放到参数列表的末尾**

Rest 参数会收集剩余的所有参数，因此下面这种用法没有意义，并且会导致错误：

function f(arg1, ...rest, arg2) {  // arg2 在 ...rest 后面？！
      // error
    }

`...rest` 必须处在最后。

# Rest 参数和 arguments 的区别 #

在过去，JavaScript 中没有 rest 参数，而使用 arguments 是获取函数所有参数的唯一方法。

但缺点是，尽管 arguments 是一个类数组，也是可迭代对象，但它终究不是数组。它不支持数组方法，因此我们不能调用 arguments.map(…) 等方法。

# Spread 语法(展开语法) #

Spread 语法(展开语法) 可以将数组表达式或者string在语法层面展开；将对象表达式按key-value的方式展开。

以 Math.max 为例：

let arr = [3, 5, 1];
    
    alert( Math.max(...arr) ); // 5（spread 语法把数组转换为参数列表）

还可以通过这种方式传递多个可迭代对象：

let arr1 = [1, -2, 3, 4];
    let arr2 = [8, 3, -8, 1];
    
    alert( Math.max(...arr1, ...arr2) ); // 8

// 连接多个数组
    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    var arr3 = [...arr1, ...arr2];

构造字面量对象时使用展开语法

# 参考 #

*  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread\_syntax
 *  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest\_parameters
 *  https://zh.javascript.info/rest-parameters-spread\#spread-syntax
 *  https://www.yuque.com/cuggz/interview/vgbphi\#4fa0a3b12c5a4057fa65ef2ce55eb7fa