数组专题
展开运算符
使用...符号, 可以将数组"展开".
数组展开的妙用 ...
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){
}