【随笔四】JavaScript 中的 rest

秒速五厘米 2024-03-23 15:44 76阅读 0赞

某次开发中，看到项目代码中用到了 `rest` 这个参数，但又没看到在哪里定义或者传入，当时没太理解它的意思，查了下资料才恍然大悟。含义也很简单，写个随笔记录下。

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

### 关键字 rest 的用法（剩余参数） ###

在 JavaScript 中，函数可以接收任意数量的参数。在大部分情况下，我们只处理函数的固定数量的参数，但有时候，我们无法预先知道函数需要接收多少个参数，这个时候就可以使用 `rest` （或者也可以使用 `args`）。

**rest** 参数是一种特殊类型的参数，它允许我们在函数声明中使用省略号（…）来表示函数可以接收任意数量的参数。

这些参数会被接收到一个**数组**中，同时，我们可以在该函数体中使用该数组。

语法如下：

function handleSum(...rest) {
        
    	// ...rest 代表所有传入的参数
    	console.log(rest)
    }
    handleSum(1, 2, 3)  // [1, 2, 3]
    
    function handleSum(num, ...rest) {
        
    	// ...rest 代表所有剩余参数
    	console.log(rest) //  [2, 3, 4]
    	console.log(arguments)  // [1, 2, 3, 4]
    }
    handleSum(1, 2, 3, 4)  // [2, 3, 4]

### 注意： ###

**`rest` 要与 `arguments`** 做好区分。

**rest** 关键字 指的是剩余参数

**arguments** 指的是全部参数

### 其他用法 ###

**rest** 关键字不止可以用在 函数 的传参中，也可以用于变量中

*  数组的使用方式

const arr = [1, 2, 3, 4, 5]
    
    const [a, b, ...rest] = arr
    
    console.log(a)  // 1
    console.log(b)  // 2
    console.log(rest)  // [3, 4, 5]

*  对象的使用方式

const obj = {
        
    	name: '张三',
    	age: 18,
    	sex: '未知'
    }
    
    const {
         name, ...rest } = obj
    console.log(name)  // 张三
    console.log(rest)  // { age: 18, sex: '未知'}

### 再次注意： ###

*  **rest 语法只能写在最后面**，比较人家的定位就是剩余的未知参数，再在人家屁股后面跟一个已知的参数，太打人家脸了。
 *  rest 关键字的用法虽然是这个，但我们可以使用它的**隐藏功能**：比如可以将**字符串转数组**、对象复制、数组复制等功能。

当我们了解完这些后，在看项目中的代码就洞若观火，一目了然。