`...` 展开运算符(Spread Operator)详解

🎯 一句话解释

...arr 的作用是:把数组"拆开",变成一个个独立的元素


📦 对比:有 ... vs 没 ...

javascript 复制代码
let arr = [1, 2, 3];

// ❌ 没有 ... (传进去的是整个数组)
Math.min(arr);  
// 等同于:Math.min([1, 2, 3]) 
// 结果:NaN ❌(Math.min 不认识数组)

// ✅ 有 ... (把数组拆开成独立元素)
Math.min(...arr);  
// 等同于:Math.min(1, 2, 3) 
// 结果:1 ✅

🔄 展开过程可视化

javascript 复制代码
let arr = ["12.50", "3.25", "9.75"];

// ...arr 展开后:
Math.min(...arr);
// 👇 变成了:
Math.min("12.50", "3.25", "9.75");
// 👇 再配合 map(Number) 变成:
Math.min(12.50, 3.25, 9.75);
// 结果:3.25 ✅

🆚 更多对比例子

代码 等同于 结果
Math.min([1, 2, 3]) Math.min([1, 2, 3]) NaN
Math.min(...[1, 2, 3]) Math.min(1, 2, 3) 1
Math.max(5, 8, 2) 本身就是多个参数 8
Math.max(...[5, 8, 2]) Math.max(5, 8, 2) 8

💡 为什么需要 ...

因为 Math.min() / Math.max() 期望接收的是多个独立的数字参数,而不是一个数组:

javascript 复制代码
// ✅ 这种写法 Math.min 能看懂
Math.min(1, 2, 3, 4, 5);

// ❌ 这种写法 Math.min 看不懂
Math.min([1, 2, 3, 4, 5]);

// ✅ 用 ... 把数组"打散"成独立参数
Math.min(...[1, 2, 3, 4, 5]);

🔧 ... 的其他用法

🔹 1. 合并数组

javascript 复制代码
let a = [1, 2];
let b = [3, 4];
let c = [...a, ...b];  // [1, 2, 3, 4]

🔹 2. 复制数组

javascript 复制代码
let arr = [1, 2, 3];
let copy = [...arr];  // [1, 2, 3](新数组,不影响原数组)

🔹 3. 传参给函数

javascript 复制代码
function sum(a, b, c) {
    return a + b + c;
}

let nums = [1, 2, 3];
sum(...nums);  // 等同于 sum(1, 2, 3) → 6

📊 总结

写法 含义 能用吗?
Math.min(arr) 传一个数组进去 NaN
Math.min(...arr) 把数组拆开成独立元素 ✅ 正确
Math.min(...arr.map(Number)) 先转数字,再拆开 ✅✅ 最推荐

💡 记忆口诀

... = "拆开!"

把数组 [1, 2, 3] 拆成 1, 2, 3

没有 ... 就是把整个数组当一个东西扔进去,函数不认识 😂

相关推荐
2601_962071571 小时前
【Java报错已解决】org.springframework.beans.factory.BeanCreationException
java·开发语言
香芋芋圆2 小时前
AI 冲击内卷之下,普通前端如何破局?WebGIS—— 低门槛突围赛道
前端·javascript·人工智能·学习·职场发展
INS_KF2 小时前
【编程笔记】成员函数中两个 const 的区别(const Data &getData() const;)
前端·javascript·笔记
淡海水2 小时前
07-04-并发-ConcurrentBag-T-工作窃取WorkStealing算法
开发语言·算法·c#·bag·concurrent·workstealing
宿6743 小时前
vue3-async
前端·javascript·vue.js
CS_Zero3 小时前
C语言sizeof是函数吗?
c语言·开发语言
-今昭-4 小时前
《V2V 迁移实战:将 VMware 虚拟机转为 OpenStack 可用 Glance qcow2 镜像》
开发语言·python
excel4 小时前
Nuxt + Twin CSS 中宽度超过屏幕时底部出现空白的原因与解决方案
前端·javascript
黑马程序员毕设6 小时前
基于Java的医院药品管理系统的优化设计与实现
java·开发语言·spring boot·小程序·架构·课程设计·毕设
_Twink1e6 小时前
openJiuwen 实训营 Day 1 · WorkSwarm 入门教程
开发语言·c++·openjiuwen