`...` 展开运算符(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

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

相关推荐
有味道的男人2 小时前
AI 对接 1688 图搜接口|Open Claw 以图搜货实战
开发语言·python
XinZong2 小时前
OpenClaw 你知道skill有那些分类吗?今天告诉你七大分类精品skill技能合集
javascript
Kiling_07042 小时前
面向对象和集合编程题 ( 二 )
java·开发语言·数据结构·算法
菜鸡儿齐2 小时前
Future接口学习
java·服务器·开发语言
牛奔2 小时前
codebuddy 桌面版 如何配置自己的模型
运维·服务器·开发语言·php
Kingairy2 小时前
Python简单算法题
开发语言·python
codeejun2 小时前
每日一Go-66、K8s 蓝绿发布 & 金丝雀发布实战:Service 切流量 + Ingress 灰度一次讲透
开发语言·golang·kubernetes
SilentSamsara2 小时前
日志与可观测性:logging 进阶配置与结构化日志实战
运维·开发语言·python·青少年编程