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中提供了强大的功能,使得处理数组和对象时更加灵活和方便。

相关推荐
汪子熙7 分钟前
深入探析 header facets:定位与应用
前端·javascript
江城开朗的豌豆12 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
Humbunklung16 分钟前
Rust方法语法:赋予结构体行为的力量
开发语言·后端·rust
萧曵 丶22 分钟前
Rust 内存结构:深入解析
开发语言·后端·rust
2401_8812444023 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆24 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子27 分钟前
Web开发中的文件下载
前端·javascript·面试
算法练习生28 分钟前
Qt核心类QWidget及其派生类详解
开发语言·c++·qt
1024小神44 分钟前
tauri项目在windows上的c盘没有权限写入文件
c语言·开发语言·windows
KaneLogger1 小时前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能