【金秋打卡】第13天数组的展开运算符

一、课程名称：前端工程师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);

五、课程心得

今天学习了数组的展开运算符，它和剩余参数一样，都是添加了三个点，但是作用却不同，展开运算符帮助展开数组，简化了很多代码，一定要好好掌握。