3. 现代 javascript 数组专题

Posted 2022-10-14 zonehoo

数组专题

　　展开运算符

　　　　使用...符号, 可以将数组"展开".

　　　　数组展开的妙用 ... 

　　　　eg:

　　　　　　// 代替apply

　　　　　　const foo = [1, 2, 3]

　　　　　　const bar = [4, 5, 6]

　　　　　　foo.push(...bar) // 相当于foo.push(4, 5, 6)

　　　　　　// 假数组转真数组

　　　　　　var nodeList = document.querySelectorAll(‘div‘)

　　　　　　var earlArray = [...nodeList]

　　　　　　// 代替concat等复杂操作, 构造数组

　　　　　　var parts = [‘shoulders‘, ‘knees‘];

　　　　　　var lyrics = [‘head‘, ...parts, ‘and‘, ‘toes‘];

　　find和findIndex

　　　　建议: 不要再使用for循环或者forEach或者filter去寻找数组中的某个元素!

　　　　要点：

　　　　　　findIndex和indexOf的区别

　　　　　　　　indexOf   只能传入数值

　　　　　　　　eg: 查找 数组内元素等于 2 的 索引

　　　　　　　　　　const arr = [1,2,3,4,5];

　　　　　　　　　　const ret = arr.indexOf(2);

　　　　　　　　findIndex 可以传入 表达式

　　　　　　　　eg: 查找第一个值大于 2 的元素的索引

　　　　　　　　　　const arr = [1,2,3,4,5];

　　　　　　　　　　const ret = arr.findIndex(el=>el>2);

　　　　拓展:

　　　　　　map用来将一个数组映射为另一个数组

　　　　　　　　eg: 将数组内的 所有数值乘以 2 

　　　　　　　　　　const arr = [1,2,3,4,5];

　　　　　　　　　　const arr2 = arr.map(el=>return el * 2)

　　　　　　reduce用来通过某种运算归并数组元素

　　　　　　　　eg: 将数组内的 所有元素 相乘

　　　　　　　　　　const arr = [1,2,3,4,5];

　　　　　　　　　　const ret = arr.reduce((prev, el)=>return el * prev, 1)

　　　　　　filter用来过滤满足条件的数组元素

　　　　　　　　eg: 将数组内的 大于 2 的 元素 筛选出来

　　　　　　　　　　const arr = [1,2,3,4,5];

　　　　　　　　　　const arr2 = arr.filter(el=>return el > 2)

　　　　　　some用来判断数组中有没有元素满足某种条件 (至少又一个 满足返回 true  不满足 返回 false)

　　　　　　　　eg: 判断 数组内 是否有一个元素 大于2

　　　　　　　　　　const arr = [1,2,3,4,5];

　　　　　　　　　　const ret = arr.some(el=>return el > 2)

　　　　　　every用来判断数组中的元素是不是都满足某种条件 (全部都要满足  满足返回 true  不满足 返回 false)

　　　　　　　　eg: 判断 数组内 所有元素都 大于2

　　　　　　　　　　const arr = [1,2,3,4,5];

　　　　　　　　　　const ret = arr.every(el=>return el > 2)

　　　　　　forEach用来做遍历(除非你用forEach写出的代码更短, 否则不要用)

　　　　　　find和findIndex用来寻找符合条件的元素

　　　　　　　　eg: 查找大于5的 元素 的 值 和索引

　　　　　　　　　　const arr = [2,4,6,8,10];

　　　　　　　　　　const value = arr.find(el=> return el > 5 ); // 查找第一个大于五的值

　　　　　　　　　　const index = arr.findIndex(el=> return el > 5 ); // 查找第一个大于五的索引

 　　includes

　　　　includes用来判断数组中是不是包含某个值

　　　　要点

　　　　　　includes和indexOf的区别

　　　　　　　　includes 返回 true or false

　　　　　　　　indexOf  返回 找到 则返回索引  找不到则返回 -1

　　　　　　　　eg: 判断是否不包含 2

　　　　　　　　　　const arr = [1,2,3,4,5];

　　　　　　　　　　const ret1 = !arr.includes(2);

　　　　　　　　　　const ret2 = (arr.indexOf(2) === -1);

 

函数专题

　　展开运算符

　　　　参数展开

　　　　function fn(...params)