ES6中新增的rest剩余参数在函数内部的使用问题

简介: ES6 中引入了 rest 参数(...变量名),用于获取函数内不确定的多余参数,注意只能放在所有参数的最后一个

ES6 中引入了 rest 参数(...变量名),用于获取函数内不确定的多余参数,注意只能放在所有参数的最后一个:

function restFunc(...args) {
   
  console.log(args)
  console.log(arguments)
  for (var a of args) {
   
  }
}

restFunc(2, 5, 8)
// [ 2, 5, 8 ]
// [Arguments] { '0': 2, '1': 5, '2': 8 }

剩余参数和 arguments 对象的区别

  • 剩余参数只包含没有对应形参的实参,arguments 包含函数的所有实参
  • 剩余参数是一个真正的数组,arguments 是一个类数组对象,不能直接使用数组的方法
  • arguments 不能在箭头函数中使用

在函数内部的怎么使用剩余参数

剩余参数我们大都用在一些公共的封装里面,经常配合闭包、call、apply、bind 这些一块使用,对于这几个的使用差异很容易把人绕晕。

  • 1、直接通过变量名取值、遍历
    如果是直接在函数内部获取参数,或者遍历取出参数,我们直接用变量名就行了,注意不需要额外加 ...
    ```js
    function restFunc(...args) {
    console.log(args[0])
    }

restFunc(2) // 2


* 2、在闭包函数中配合 call、bind 使用
这里在函数内部用 call、bind 去改变 this 指向
```js
function callFunc(func) {
  return function(...args) {
    func.call(this, ...args)
  }
}

注意 call、bind 接收的参数也是我们正常看到的函数用逗号分隔开的一个一个的参数,但是因为我们拿到的剩余参数其实是一个数组,所以这里的三个点并不是指和上面的剩余参数一样,而是将参数数组展开,是数组的展开运算符,有点晕的看下面 demo:

function func(num) {
   
  console.log(arguments)
}

const arr = [2, 3, 4]
func(1, ...arr) // [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }

虽然这两个长的一样,但是不是同一个东西,只要记住:...剩余参数是用在定义函数时,...展开参数是用在函数调用时(bind 要单独记下)。

  • 3、在闭包函数中配合 apply 使用
    示例和上面的 call、bind 类似,不过注意 apply 接收的参数本来就是一个数组或类数组,所以这里并不需要额外用展开运算符去展开剩余参数:
    function applyFunc(func) {
         
    return function(...args) {
         
      func.apply(this, args)
    }
    }
    
相关文章
ArkTS基础——Component自定义组件——【坚果派——红目香薰】
ArkTS基础——Component自定义组件——【坚果派——红目香薰】
295 0
|
人工智能
怎么用Midjourney制作表情包
怎么用Midjourney制作表情包
319 0
|
前端开发
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
|
程序员 Linux C语言
从C语言到C++_35(异常)C++异常的使用+异常体系+异常优缺点(上)
从C语言到C++_35(异常)C++异常的使用+异常体系+异常优缺点
106 3
|
SQL 分布式计算 运维
【大数据开发运维解决方案】sqoop增量导入oracle/mysql数据到hive时时间字段为null处理
前面几篇文章详细介绍了sqoop全量增量导入数据到hive,大家可以看到我导入的数据如果有时间字段的话我都是在hive指定成了string类型,虽然这样可以处理掉时间字段在hive为空的问题,但是在kylin创建增量cube时需要指定一个时间字段来做增量,所以上面那种方式不行,这里的处理方式为把string改成timestamp类型,看实验:
【大数据开发运维解决方案】sqoop增量导入oracle/mysql数据到hive时时间字段为null处理
|
算法 Python
LeetCode 410. Split Array Largest Sum
给定一个非负整数数组和一个整数 m,你需要将这个数组分成 m 个非空的连续子数组。设计一个算法使得这 m 个子数组各自和的最大值最小。
207 0
LeetCode 410. Split Array Largest Sum
|
数据可视化 数据挖掘 Python
跟着Nature Metabolism学作图:R语言ggplot2一次性展示很多个饼图
跟着Nature Metabolism学作图:R语言ggplot2一次性展示很多个饼图
|
SQL 关系型数据库 MySQL
【MySQL】慢SQL优化
慢SQL优化老生常谈了,今天聊一下优化时遇到的几个坑点。
361 0
【MySQL】慢SQL优化
|
机器学习/深度学习 JavaScript 前端开发
前端培训-中级阶段(45)- Node10.x环境搭建,NPM包管理器
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。 上节课我们了解到了一个可以在本地执行 js 的 javascript 执行环境:NodeJS。今天我们来安装 NodeJS、环境配置、NPM 使用、版本管理。 推荐使用 node 10.x 版本(2018年,最新是 10.22.1),下文我们基于 v10.16.0 版本。
297 0
前端培训-中级阶段(45)- Node10.x环境搭建,NPM包管理器
|
存储 JSON Dart
在Flutter中解析复杂的JSON(一篇顶十篇)
JSON结构#1:简单 map 访问对象 Snippet #1 : imports **Snippet #2 : **加载Json Asset(可选)** Snippet #3 : 加载响应 JSON结构#2:具有数组的简单结构 Json结构#3:简单嵌套结构 JSON结构#4:具有列表的嵌套结构 JSON结构#5: List of maps JSON结构#6:复杂的嵌套结构
506 0
在Flutter中解析复杂的JSON(一篇顶十篇)