平凡前端之路_17.展开操作符(Spread)/剩余参数(Rest)

系列文章

平凡前端之路_01.HTML与 HTML5
平凡前端之路_05.CSS与CSS3
平凡前端之路_14.ES与ES6
平凡前端之路_15.let 和 const声明
平凡前端之路_16.变量的解构赋值

---

ES6 新增扩展运算符（Spread Operator）和剩余参数（Rest Parameter）。

主要作用是方便处理函数参数和数据结构。虽然它们在语法上有些相似，都是在变量或字面量之前加三个点（…），但它们的功能却有着一些不同之处。

---

展开操作符(Spread)

展开操作符(Spread)则可以将可迭代对象（如数组、Set、Map 等）中的所有元素“展开”成多个独立的值。这些值可以用于创建新的数组、Set、Map 等数据结构，也可以作为函数参数传递给其他函数。

---

对象

拷贝对象

可以将已有对象的所有可枚举属性拷贝到新构造的对象中。

例子中复制了bugs1对象到新的bugs2对象：

const bugs1= { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的'}
const bugs2= { ...bugs1}

bugs1 //=> { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的'}
bugs2 //=> { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的'}

浅拷贝(Shallow-cloning, 不包含 prototype) 和对象合并, 可以使用更简短的展开语法。而不必再使用 Object.assign 方式。

---

添加对象属性

可以复制已有对象所有可枚举属性到新的对象的同时，为其添加新的属性。

例子中复制了bugs1对象到bugs3，并添加了 bug4属性：

const bugs1= { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的'}
const bugs3= { ...bugs1, bug4: '重启下电脑试试' }

bugs1 //=> { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的'}
bugs3 //=> { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的', bug4: '重启下电脑试试'}

---

合并多个对象

可以合并多个对象到一个新的对象。

例子中 bugs1对象和 bugs4对象合并到 新的bugs5对象：

const bugs1= { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的'}
const bugs4= { bug4 : '重启下电脑试试', bug5: '用户不会像你这么操作的' }

const bugs5= { ...bugs1, ...bugs4}

bugs1 //=> { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的'}
bugs5 //=> { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的', bug4: '重启下电脑试试', bug5: '用户不会像你这么操作的'}

---

数组

拷贝数组

可以将已有数组的所有数组项拷贝到新数组中。

例子中复制了bugs1数组到新的bugs2数组：

const bugs1= ['怎么可能', '在我这是好的', '刚刚还好好的']
const bugs2= [ ...bugs1]

bugs1 //=> ['怎么可能', '在我这是好的', '刚刚还好好的']
bugs2 //=> ['怎么可能', '在我这是好的', '刚刚还好好的']

---

将数组转为对象

可以将已有数组的所有数组项拷贝到新对象中，

例子中复制了bugs1数组到新的bugs2对象：

const bugs1= ['怎么可能', '在我这是好的', '刚刚还好好的']
const bugs2= { ...bugs1}

bugs1 //=> ['怎么可能', '在我这是好的', '刚刚还好好的']
bugs2 //=> {0: '怎么可能', 1: '在我这是好的', 2: '刚刚还好好的'}

---

添加数组项

可以复制已有数组所有项到新的数组的同时，为其添加新的数组项。

例子中复制了bugs1数组到新的bugs3数组，并添加了新的数组项：

const bugs1= ['怎么可能', '在我这是好的', '刚刚还好好的']
const bugs3= [ ...bugs1, '重启下电脑试试' ]

bugs1 //=> ['怎么可能', '在我这是好的', '刚刚还好好的']
bugs3 //=> ['怎么可能', '在我这是好的', '刚刚还好好的', '重启下电脑试试']

---

合并多个数组

可以合并多个数组到一个新的数组。

例子中bugs1数组和 bugs4数组合并到新的 bugs5数组：

const bugs1= ['怎么可能', '在我这是好的', '刚刚还好好的']
const bugs4= ['重启下电脑试试', '用户不会像你这么操作的']

const bugs5= [...bugs1, ...bugs4]

bugs1 //=> ['怎么可能', '在我这是好的', '刚刚还好好的']
bugs5 //=> ['怎么可能', '在我这是好的', '刚刚还好好的', '重启下电脑试试', '用户不会像你这么操作的']

---

数据结构Set

将数据结构Set转为数组

可以将数据结构Set转为数组。

例子中bugs1数据结构Set转为bugs2 数组：

const bugs1=  new Set(['怎么可能', '在我这是好的', '刚刚还好好的']) 
const bugs2 = [...bugs1]

bugs1 //=> Set(3) {'怎么可能', '在我这是好的', '刚刚还好好的'}
bugs2  //=> ['怎么可能', '在我这是好的', '刚刚还好好的']

---

数据结构Map

将数据结构Map转为数组

可以将数据结构Map转为数组。

例子中bugs1数据结构Map转为bugs2 数组：

const bugs1=  new Map([['bug1','怎么可能'], ['bug2','在我这是好的'], ['bug3','刚刚还好好的']]) 
const bugs2 = [...bugs1]

bugs1 //=> Map(3) {'bug1' => '怎么可能', 'bug2' => '在我这是好的', 'bug3' => '刚刚还好好的'}
bugs2  //=> [['bug1','怎么可能'], ['bug2','在我这是好的'], ['bug3','刚刚还好好的']]

---

字符串

将字符串转为数组

可以将字符串转为数组。

例子中bug6字符串转为b6数组：

const bug6= '清下缓存试试'
const b6= [...bug6]

bug6 //=> '清下缓存试试'
b6 //=> ['清', '下', '缓', '存', '试', '试']

---

将字符串转为对象

可以将字符串转为对象。

例子中bug6字符串转为b6对象：

const bug6= '清下缓存试试'
const b6= {...bug6}

bug6 //=> '清下缓存试试'
b6 //=> {0: '清', 1: '下', 2: '缓', 3: '存', 4: '试', 5: '试'}

---

函数参数

可以将数组“展开”成多个独立里的值，在函数调用时使用来传递参数（实参）。

例子中Math.max函数可以处理任意数量的独立数字，但当需要获取一个数组中的最大值时，Math.max()并不接受数组作为参数。此时将数组“展开”成多个独立里的参数传入Math.max函数即可：

const num = [5,7,10,9,2]
const max = Math.max(...num ) 

max // => 10

上述例子代码中Math.max()使用常规的语法被调用，代码简洁易读。

---

剩余参数(Rest)

剩余参数(Rest)，可以在用于函数定义中，可以在函数参数中捕获所有多余的参数收集到一个新的数组中，并且可以像普通数组一样使用数组语法进行处理。或者用于模型解构中，可以将没有对应模式变量的实参/索引项收集到一个数组/对象中。

对象

拷贝对象

在对象模型解构时， 可用剩余参数(Rest)将已有对象的所有可枚举属性收集到新对象中。

例子中复制了bugs1对象到bugs2，

const bugs1= { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的'}
const {...bugs2} = bugs1

bugs1 //=> { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的'}
bugs2 //=> { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的'}

---

移除对象属性 / 解构对象剩余项

移除属性的同时， 将对象剩余部分赋值给一个变量，并保留了原对象。

例子中bugs1对象复制了bugs3 对象移除bug4属性的同时，并保留了原bugs3 对象：

const bugs3 = { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的', bug4: '重启下电脑试试'}
const { bug4, ...bugs1} = bugs3 

bugs3 //=> { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的', bug4: '重启下电脑试试'}
bugs1 //=> { bug1: '怎么可能', bug2: '在我这是好的', bug3: '刚刚还好好的'}
bug4 //=> '重启下电脑试试'

---

数组

拷贝数组

在数组模型解构时， 可用剩余参数(Rest)将已有数组的所有数组项收集到新数组中。

例子中复制了bugs1对象到bugs2：

const bugs1= ['怎么可能', '在我这是好的', '刚刚还好好的']
const [...bugs2]= bugs1

bugs1 //=> ['怎么可能', '在我这是好的', '刚刚还好好的']
bugs2 //=> ['怎么可能', '在我这是好的', '刚刚还好好的']

---

移除数组前几项 / 解构数组剩余项

移除数组前几项的同时，将数组剩余部分赋值给一个变量，并保留了原数组，代码如下（示例）：

例子中bugs1数组复制了bugs3 数组移除前一项的同时，并保留了原bugs3 数组：

const bugs3 = ['怎么可能', '在我这是好的', '刚刚还好好的', '重启下电脑试试']
const [ bug1, ...bugs1 ] = bugs3 

bugs3 // => ['怎么可能', '在我这是好的', '刚刚还好好的', '重启下电脑试试']
bug1 //=> '怎么可能'
bugs1 //=> ['在我这是好的', '刚刚还好好的', '重启下电脑试试']

---

字符串

将字符串转为数组

可以将字符串转为数组。

例子中bug6字符串转为b6数组：

const bug6= '清下缓存试试'
const [...b6]= bug6

bug6 //=> '清下缓存试试'
b6 //=> ['清', '下', '缓', '存', '试', '试']

---

将字符串转为对象

可以将字符串转为对象。

例子中bug6字符串转为b6对象：

const bug6= '清下缓存试试'
const {...b6}= bug6

bug6 //=> '清下缓存试试'
b6 //=> {0: '清', 1: '下', 2: '缓', 3: '存', 4: '试', 5: '试'}

---

函数参数

当函数需要接收不确定数量的参数时，可以将剩余参数语法用于函数参数（形参），将不确定数量的参数收集到一个新的数组中。

function sum(...nums){
	return nums.reduce((acc, curr) => acc + curr, 0);
}

const sum1 = sum(1, 2, 3) 
const sum2 = sum(4, 5) 

sum1 // => 6
sum2 // => 9

上述例子代码中，将sum函数所有传入的参数收集到nums数组，然后使用数组的 reduce 方法对所有数字求和并返回最终结果。

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了ES6 规范中的展开操作符和剩余参数，主要作用是方便处理函数参数和数据结构，能够大大简化代码编写过程，并提高代码可读性和可维护性。

---

JS 知识题

问题	答案
const {…a} = {}; a 是什么数据类型？值是什么？	对象模型解构时的剩余参数是对象或空对象。a是空对象。
const […b] = []; b 是什么数据类型？值是什么？	数组模型解构时的剩余参数是数组或空数组。b是空数组。
const […c] = ‘’"; c 是什么数据类型？值是什么？	数组模型解构时的剩余参数是数组或空数组。c是空数组。
const {…d} = []; d 是什么数据类型？值是什么？	对象模型解构时的剩余参数是对象或空对象。d是空对象。
剩余参数可以放在函数参数/模型解构的任意位置。	错误。剩余参数可必须放在函数参数/模型解构的最后。
函数参数/模型解构可以有多个剩余参数。	错误。剩余参数在函数参数/模型解构最多只能有一个。
不能在对象字面量的setter方法中声明剩余参数。	正确。setter方法只接收一个参数，而剩余参数不会限制参数的数量。
展开操作符只能用于可迭代对象，包括数组、Set、Map、字符串等。	正确。尝试对非可迭代对象进行展开，会产生语法错误，ERROR: xx is not iterable