JS中的高级函数

JavaScript高级函数的使用

filter函数

1. filter中的回调函数有一个要求：必须返回一个boolean值
2. true：当返回为true时，函数内部会自动将这次回调的参数n加入到新的数组中
3. false：当返回为false的时候，函数内部会自动过滤掉这次的n值
4. 注意：filter函数执行的次数跟数组对象的长度(length)对等
5. filter函数不会改变原数组 而是创建一个新的数组

const num=[10,20,30,78,111,456]
//要筛选出数组中小于100的元素
//注意 回调参数里面的n代表原数组里面的元素  每个元素依次进行判断
//比较结果为true时 Vue会将其加入一个新的数组 否则将这个元素过滤掉
let newNum=num.filter(function (n) {
  return n<100
})
console.log(num) //原数组 [10, 20, 30, 78, 111, 456]
console.log(newNum);  //新数组 [10, 20, 30, 78]

map函数

1. 定义在JavaScript中的数组对象(Array)中，也是返回一个新的数组，数组中的元素为原始数组调用函数处理后的值
2. map 函数不会对空数组进行检测
3. map函数不会改变原数组，而是创建一个新的数组
4. map函数主要作用是对数组中的元素进行一些相同的变化然后返回新的数组

例如：对上面过滤后的数组进行每个元素都变为自己的2倍的处理

//原数组为 [10, 20, 30, 78]
let new2Num = newNum.map(function (n) {
  return n * 2
})
console.log(new2Num); //[20, 40, 60, 156]

reduce函数

1. reduce函数接收一个函数作为函数累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值，对空函数是不会执行回调函数的。

• 计算数组总和(这里计算上一步经过map处理的数组)

/*这里的n还是原数组中的元素 preValue是上一次函数回调所返回的值
可以知道这里的reduce共执行的次数跟原数组的次数等同，这里第一次执行回调函数functionpreValue为初始值0
经过执行preValue+n后将新的值返回给preValue  如此执行 reduce才能完成数组的累加操作*/
//原数组为[20, 40, 60, 156]
let new3Num = new2Num.reduce(function (preValue, n) {
  return preValue + n
}, 0)
//没有初始值initialValue(即上面一行中的0，当数组为空时，会抛出异常提示reduce没有初始值，所以为兼容性一般加上initialValue作为初始值)
console.log(new3Num); //276