继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

宣7595077
关注TA
已关注
手记 47
粉丝 2
获赞 1

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

 http://img1.sycdn.imooc.com/636463890001f32204200237.jpg

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);

五、课程心得

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


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP