JavaScript 扩展运算符怎么用

早上收拾书包时，你把笔记本、笔、水杯一股脑塞进侧袋，这就是“合并”；要是不小心漏带了橡皮，从笔袋里单独拿出来添进去，这就是“拷贝修改”。这种随手就能完成的小事，在代码世界里，全靠JavaScript的“扩展运算符”帮你实现。它就像个万能小帮手，把零散的东西“摊”开再组合，新手也能轻松上手。

数组：合并、拷贝都简单

数组是代码里存一堆东西的常用容器，扩展运算符在数组上用得最多。比如你和朋友约好带零食，你带了「薯片、饼干」，朋友带了「可乐、糖果」，要把两堆零食放一起，不用一个个写，用扩展运算符就能一键合并：

`javascript

const mySnacks = ['薯片', '饼干'];

const friendSnacks = ['可乐', '糖果'];

const allSnacks = [...mySnacks, ...friendSnacks];

// 结果就是 ['薯片', '饼干', '可乐', '糖果']

`

要是想单独加一样东西，比如给自己添个巧克力，直接在中间插就行：const allSnacks = [...mySnacks, '巧克力', ...friendSnacks]。

除了合并，它还能轻松“拷贝”数组。比如你从外卖APP买了奶茶，想给闺蜜也点一杯一模一样的，不用重新输入配料，拷贝一下就行：

`javascript

const myMilkTea = ['珍珠', '三分糖', '热饮'];

const闺蜜MilkTea = [...myMilkTea];

`

这和直接写const 闺蜜MilkTea = myMilkTea不一样——后者只是给原来的数组起了个新名字，改一个另一个也会变；而用扩展运算符拷贝的是新数组，改闺蜜的奶茶，你的不会受影响，就像真的给闺蜜重新点了一杯。

对象：合并、修改不冲突

对象是存“名字-内容”的组合，比如你记作业的清单：const homework = { 语文: '写作文', 数学: '做卷子' }。要是想加个英语作业，或者合并两个人的作业清单，扩展运算符也能用。比如你和同桌的作业要放一起，就可以这么做：

`javascript

const myHomework = { 语文: '写作文', 数学: '做卷子' };

const deskmateHomework = { 数学: '做练习册', 英语: '背单词' };

const allHomework = { ...myHomework, ...deskmateHomework };

`

结果里数学作业会是“做练习册”——后面的对象会覆盖前面的，就像你先记了数学要做卷子，同桌又说要做练习册，最后你会按同桌的要求改，不会同时做两样。

要是想改某一项，比如把自己的数学作业改成“做练习册”，不用重新写整个对象，直接在后面加就行：

`javascript

const myUpdatedHomework = { ...myHomework, 数学: '做练习册' };

`

这样既保留了语文作业，又改了数学，比重新写一遍方便多了。

实用小技巧：处理零散数据

日常写代码时，经常会遇到零散的内容，比如函数要接收好几个参数，扩展运算符也能帮上忙。比如你订外卖要选「主食、配菜、饮料」三个选项，用扩展运算符可以把数组里的内容拆成单个参数传进去：

`javascript

function order(food, side, drink) {

console.log(订了${food}、${side}、${drink});

}

const myOrder = ['汉堡', '薯条', '可乐'];

order(...myOrder); // 结果就是订了汉堡、薯条、可乐

`

这就像你把装在袋子里的外卖拿出来，分别放到三个格子里，不用一个个递。

可能有人会担心，用扩展运算符会不会搞砸？其实它就像你平时整理东西的习惯：合并时按顺序放，拷贝时留原份，改东西时只改需要的部分，不会乱动别的。新手只要多试几次，把数组和对象的操作代入日常小事，很快就能用熟。它没有复杂的规则，就是帮你省力气的小工具，不用怕用错。