js中 剩余运算符(Rest Operator )(...)和展开运算符(Spread Operator)(...)的区别及用法

1、基本说明

在JavaScript中,剩余运算符(Rest Operator)和展开运算符(Spread Operator)虽然在某些方面有相似之处,但它们各自有不同的用途和功能。下面详细解释这两种运算符的区别:

1.1. 剩余运算符(Rest Operator)

剩余运算符 是用在函数参数中,用来收集剩余的参数到一个数组中。它使用三个点(...)表示。这在处理不定数量的参数时非常有用。

1.2. 展开运算符(Spread Operator)

展开运算符 用于将数组元素或对象的属性"展开"到某个位置,比如在函数调用、数组构造或对象字面量中。它同样使用三个点(...)表示。

我们会发现都是三个点(...)表示。

2、实例说明

剩余运算符(Rest Operator)

复制代码
function sum(...numbers: any[]): number {
  // 验证输入并过滤非数字类型
  const validatedNumbers = numbers.filter(num => typeof num === 'number');

  // 如果过滤后数组为空,直接返回 0
  if (validatedNumbers.length === 0) {
    return 0;
  }

  // 使用 reduce 计算总和
  return validatedNumbers.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1, 2, 3)); // 输出: 6
console.log(sum(1, "2", 3)); // 输出: 4 (过滤掉非数字 "2")
console.log(sum()); // 输出: 0 (无参数)
console.log(sum(null, undefined, NaN, {}, [])); // 输出: 0 (所有参数被过滤)
console.log(sum(10, -5, 3.5)); // 输出: 8.5

在这个例子中,...numbers 收集了所有传递给 sum 函数的参数到一个名为 numbers 的数组中。

展开运算符(Spread Operator)

数组展开:

复制代码
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出:[1, 2, 3, 4, 5]

对象展开:

复制代码
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // 输出:{ a: 1, b: 2, c: 3 }

3、区别总结

  • 剩余运算符(Rest Operator):用于函数参数中,用来收集多个参数为一个数组。

  • 展开运算符(Spread Operator):用于将数组或对象的元素/属性"展开"到另一个数组或对象中。

4、使用场景

  • 使用剩余运算符(Rest Operator)当你需要处理不定数量的参数时。

  • 使用展开运算符(Spread Operator)当你需要将一个数组或对象的元素/属性分散到另一个数组或对象中时。

这两种运算符在JavaScript中提供了强大的功能,使得处理数组和对象时更加灵活和方便。

相关推荐
weixin_472339464 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
枯萎穿心攻击4 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue6 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762906 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
lzb_kkk8 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
好开心啊没烦恼8 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
简佐义的博客9 小时前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang
Liudef069 小时前
2048小游戏实现
javascript·css·css3