一篇文章帮你彻底搞懂剩余运算符!!

什么是剩余运算符?

剩余参数也是一种操作符,它用于表示数组中的不定数量的参数。常用于将逗号隔开的值序列组合成一个数组或对象。它在语法层面将多个值组合成一个集合。

剩余运算符的特性

  • 剩余运算符只能作为函数的最后一个参数,否则会报错。
  • 剩余运算符通常是一个数组或对象。
  • 函数的 length 属性不包括剩余参数。
  • 我们可以用剩余运算符替代了 arguments 对象。
  • 使用了剩余运算符的函数内部不能显式的设置严格模式,否则会报错。

结合代码进行说明

剩余运算符之后不能再有其他参数

错误用法

js 复制代码
1.  function foo(a, ...b, c) {
  // ...
  }
//编辑器会报错, SyntaxError: Rest parameter must be last formal paramet
js 复制代码
const order = function(beverage, ...otherIngredients) {
  console.log(beverage);
  console.log(otherIngredients);
};

order('green tea', 'milk', 'brown sugar', 'mint', 'tonka'); 
// output:
// green tea 
// ['milk', 'brown sugar', 'mint', 'tonka']

剩余运算符通常是一个数组或对象。

scss 复制代码
   function foo(...values) {  
       console.log(values);
  }

  foo(2, 5, 3) //  [2, 5, 3]

函数的 length 属性不包括剩余参数。

js 复制代码
1.  (function(...a) {}).length // 0
1.  (function(a, ...b) {}).length // 1

剩余运算符替代 arguments 对象。

js 复制代码
// 使用剩余运算符获取参数列表并计算它们的总和
function sum(...numbers) {
    let total = 0;
    for (let num of numbers) {
        total += num;
    }
    return total;
}

// 使用arguments对象获取参数列表并计算它们的总和(已被剩余运算符取代)
function sumWithArguments() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

// 测试
console.log(sum(1, 2, 3)); // 输出 6
console.log(sumWithArguments(1, 2, 3)); // 输出 6

使用了 rest 参数的函数内部不能显示设定严格模式,否则会报错

js 复制代码
    // 报错
  const doSomething = (...a) => {
  'use strict';
  // code

通过剩余运算符来进行解构

ini 复制代码
const [a, b, ...others] = [1, 2, 3, 4, 5];
console.log(a, b, others); 
// output: 1 2 [3, 4, 5]
相关推荐
袁煦丞6 分钟前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
universe_0127 分钟前
day27|前端框架学习
前端·笔记
沙尘暴炒饭29 分钟前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育1 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo1 小时前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端
yinuo1 小时前
Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)
前端
GISer_Jing2 小时前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登2 小时前
【Webpack】模块联邦
前端·webpack·node.js
Bottle4142 小时前
深入探究 React Fiber(译文)
前端
汤姆Tom2 小时前
JavaScript Proxy 对象详解与应用
前端·javascript