一、课程名称：前端工程师2022版
二、课程章节：剩余参数与展开运算符
三、课程讲师：Alex
四、课程内容
数组的展开运算符
（1）数组展开运算符的基本用法
1）认识展开运算符
如果需要求数组中的最小值会发现Math.min()的括号中不可以放入数组，此时有两种做法，一种是不使用Math.min，直接写一个函数求最小值，但是这一种方法比较麻烦，另一种方法是将数组转换为参数列表的形式，这就是展开运算符的作用了[3,2,1] ->3,2,1
2）数组展开符的基本用法：只需要在数组前面加上三个点就可以了
console.log(Math.min(...[3,2,1])); //1
（2）区分剩余参数和展开运算符
1）根本区别
①展开运算符：[3,1,2]->3,1,2
②剩余参数：3,1,2->[3,1,2]
2）区分剩余参数和展开运算符
const add = (...args) =>{ //剩余参数
console.log(args); //打印剩余参数，结果是[1,2,3]
console.log(...args); //展开运算符，对数组展开，结果是 1 2 3
}
add(1,2,3);
console.log(...[1,2,3],4); //展开运算符，输出结果(4)[1,2,3,4]
（3）数组展开运算符的应用（重点）
1）复制数组：只需要将其在方括号中展开即可const c = [...a];
2）合并数组：直接在方括号内按照需要展开即可，还可以在一些位置添加自己需要的内容[1, ...b, 2, ...a, ...c, 3]
const a = [1, 2];
const b = [3];
const c = [4, 5];
console.log([...a, ...b, ...c]); //(5) [1, 2, 3, 4, 5]
console.log([...b, ...a, ...c]); //(5) [3, 1, 2, 4, 5]
console.log([1, ...b, 2, ...a, ...c, 3]); //(7) [1, 3, 2, 1, 2, 4, 5, 3]
3）字符串转为数组：字符串可以按照数组的形式展开，直接在字符串前面添加三个点就好，console.log(..."alex"); //a l e x
console.log(..."alex"); //a l e x
//相当于 console.log('a','l','e','x'); //a l e x
//以前的做法：console.log('alex'.split('')); //(4) ['a', 'l', 'e', 'x']
console.log([..."alex"].reverse());//(4) ['x', 'e', 'l', 'a']
4）常见的类数组转化为数组
①arguments
function func() {
//从前的做法 console.log(arguments.push);
console.log([...arguments]); //[1,2]
}
fun(1, 2);
②NodeList
console.log(document.querySelectorAll("p"));
console.log([...document.querySelectorAll("p")].push);
五、课程心得
今天学习了数组的展开运算符，它和剩余参数一样，都是添加了三个点，但是作用却不同，展开运算符帮助展开数组，简化了很多代码，一定要好好掌握。
随时随地看视频
