JavaScript剩余操作符Rest Operator

jone5679 发布于2019-08-26 10:13 / 291人阅读

摘要：剩余操作符和展开操作符的表示方式一样，都是三个点但是他们的使用场景会不同。获取参数剩余操作符可以用来方便地获取传进来的参数。想要变成数组，可以通过方法，使用剩余操作符可以避免将转为数组的麻烦。

本文适合JavaScript初学者阅读

剩余操作符

之前这篇文章JavaScript展开操作符(Spread operator)介绍讲解过展开操作符。剩余操作符和展开操作符的表示方式一样，都是三个点 "...",但是他们的使用场景会不同。

剩余参数

定义函数的时候，如果函数的参数以… 为前缀，则改参数是剩余参数（rest parameter）。剩余参数表示参数个数不确定的参数列表。在函数被调用时,该形参会成为一个数组,数组中的元素都是传递给该函数的多出来的实参的值。

获取参数

剩余操作符可以用来方便地获取传进来的参数。

function sum(a,b,...args){
  console.log(args.length); // 传进来的参数的个数 3
  let s = a + b;
  if(args && args.length){
      args.forEach(i => {s += i});
  }  
 return s;
}
sum(1, 2, 3, 4, 5 ); // 传进来的参数的个数 3

其中第一个形参a对应的是1,第二个形参b对应的2,…args表示的就是[3, 4, 5]。

和arguments的差别

上面剩余参数args是一个数组，而函数的arguments是一个伪数组。应此剩余参数可以使用数组的相关方法sort，map，forEach，pop，而arguments不能。

arguments想要变成数组，可以通过Array.prototype.slice.call方法，使用剩余操作符可以避免将arguments转为数组的麻烦。

// 下面的代码模拟了剩余数组
function sum(a,b,){
  var args = Array.prototype.slice.call(arguments, sum.length);  
  console.log(args.length); // 传进来的参数的个数 3
  let s = a + b;
  args.forEach(i => {s += i});
 return s;
}
sum(1, 2, 3, 4, 5 );

而使用剩余操作符，则不需要转化，直接使用，更加方便。

剩余操作符与解构赋值

我们知道，ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。比如如下代码：

let array = [1,2,3]
let [a,b,c] = array; // a 1, b 2, c 3

再比如如下代码：

let obj = {a:1,b:2,c:3}
let {a,b,c} = obj; // a 1, b 2, c 3

在解构赋值时，可以使用剩余操作符。剩余操作符所操作的变量会匹配在解构赋值中所有其他变量未匹配到的属性。
比如如下代码，others会匹配到first和second对于属性的余下的属性：

const { first, second, ...others } = {
  first: 1,
  second: 2,
  third: 3,
  fourth: 4,
  fifth: 5
}

first // 1
second // 2
others // { third: 3, fourth: 4, fifth: 5 }

对象中余下的属性值被打包起来构造一个新的对象赋值给了others。

数组也可以通过剩余操作符，把剩余的元素打包成一个新的数组赋值给剩余属性，代码如下：

let array = [1,2,3,4,5];
let [a,b,...c] = array;  // a 1,b 2, c [3,4,5]

剩余操作符和展开操作符

某种程度上，可以任务剩余操作符是展开操作符的相反操作。展开操作符会”展开“数组编程多个元素，剩余操作符会把多个元素压缩成一个单一的元素。

欢迎关注公众号“ITman彪叔”。彪叔，拥有10多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。熟悉Java、JavaScript。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划和程序员理财投资有浓厚兴趣。

云服务器 GPU服务器 Operator operator_new javascript操作css javascript操作系统

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105808.html

JavaScript 编程精解中文第三版十二、项目：编程语言

摘要：来源编程精解中文第三版翻译项目原文译者飞龙协议自豪地采用谷歌翻译部分参考了编程精解第版确定编程语言中的表达式含义的求值器只是另一个程序。若文本不是一个合法程序，解析器应该指出错误。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：Project: A Programming Language 译者：飞龙协议：CC BY-NC-SA 4.0 自豪地采用...

Near_Li 2019-08-23 18:20 评论0 收藏0
深入理解 ES6 的解构赋值

摘要：在可遍历的量中使用数组模型数组解构使用一个迭代器来获取数据源中的元素。所以，数组解构能够在上工作的迭代器总是按照元素插入的顺序将元素返回，所以上述的解构返回的结果总是相同的。解构赋值（destructuring assignment）语法是一个Javascript表达式，这种语法能够更方便的提取出 Object 或者 Array 中的数据。这种语法可以在接受提取的数据的地方使用，比如...

only_do 2019-08-21 15:03 评论0 收藏0
ES6—扩展运算符和rest运算符（6）

摘要：扩展运算符简介扩展运算符是三个点，可以将一个数组转为用逗号分隔的参数序列。在实际项目中灵活应用扩展运算符运算符，能写出更精简易读性高的代码。 1、扩展运算符简介扩展运算符（ spread ）是三个点（...），可以将一个数组转为用逗号分隔的参数序列。说的通俗易懂点，有点像化骨绵掌，把一个大元素给打散成一个个单独的小元素。 showImg(https://segmentfault.c...

Amio 2019-08-23 17:21 评论0 收藏0
ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解

摘要：变量声明与赋值值传递浅拷贝与深拷贝详解归纳于笔者的现代开发语法基础与实践技巧系列文章。变量声明在中，基本的变量声明可以用方式允许省略，直接对未声明的变量赋值。按值传递中函数的形参是被调用时所传实参的副本。 ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解归纳于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文首先介绍 ES6 中常用的三种变量声明方式，然后讨论了...

snowLu 2019-08-21 11:55 评论0 收藏0
ES6的常用语法

摘要：和命令和类似于中的的使用都是用来声明变量的，只是都存在各自的特殊用法。解构数组和对象是中最常用也是最重要表示形式。实例生成以后，可以用方法分别指定状态和状态的回调函数。这个迭代器对象拥有一个叫做的方法来帮助你重启函数并得到下一个值。 let和const命令 let和const类似于javascript中的var的使用,都是用来声明变量的，只是都存在各自的特殊用法。在javascrip...

gougoujiang 2019-08-22 17:09 评论0 收藏0