JavaScript高阶函数

JavaScript高阶函数

filter()函数

• 语法 filter( function(currentValue, index, arr), thisValue)
• 参数说明
  • function（） 必须。 回调函数
    • currentValue 必须。 当前元素的值
    • index 可选。 当前元素的索引值
    • arr 可选。 原数组
  • thisValue 可选。 执行回调时使用，(可以将局部变量)传递给回调函数，作为this的值
• 作用： 返回一个新的数组，新数组中的元素是符合function() 指定的条件的元素
  • 把传入的函数作用于每个元素，根据返回值true/false 决定 保留/去除
• 例子
  • 过滤数组中的奇数

    let array = [5, 6, 7, 8, 9];
    let newArr = array.filter((currentValue, index, arr) => {
      console.log('currentValue:' + currentValue); // 当前值
      console.log('index:' + index); // 当前索引
      console.log('arr:' + arr); // arr:5,6,7,8,9
      return currentValue % 2 == 0;
    });
    console.log( 'newArr:' +newArr) // newArr:6,8

• 获取符合条件的数

   let scores = [100, 88, 79, 99, 97];
  function checkScore(score) {
    console.log(this.thisValue);
    
    return score > this.max;
  }
  (function () {
   let thisValue = {
     min: 60,
     mid: 75,
     max: 90
   }
    console.log(scores.filter(checkScore, thisValue));
    
  })();

• 注意
  • filter() 不会对空数组进行检测
  • filter() 不会改变原始数组

map() 函数

• 语法 map( function(currentValue, index, arr), thisValue)
  • function（） 必须。 回调函数
    • currentValue 必须。 当前元素的值
    • index 可选。 当前元素的索引值
    • arr 可选。 原数组
  • thisValue 可选。 执行回调时使用，(可以将局部变量)传递给回调函数，作为this的值
• 作用： 返回一个新数组，新数组中的元素是原数组元素调用function()处理后的值
  • 把传入的函数作用于每个元素
• 例子
  • 将原数组中的元素平方

	let arr = [1, 2, 3, 4];
    let newArr = arr.map((currentValue) => {
      return currentValue * currentValue;
    });
    console.log(newArr); // [1, 4, 9, 16]

• 注意
  • map() 不会对空数组进行检测
  • map() 不会改变原始数组

reduce() 函数

• 语法 reduce( function(previousValue,currentValue, index, arr), initialValue)
• 参数说明
  • function（） 必须。 回调函数
  • previousValue 必须。 初始值或者上次回调函数的返回值
  • currentValue 必须。 当前元素的值
  • index 可选。 当前元素的索引值
  • arr 可选。 原数组
  • initialValue 可选。 传递给函数的初始值，作为回调函数的初始值
• 作用： 返回一个值 ，一般用于累加
  • 将数组中的元素依次执行回调函数
• 例子
  • 求数组中的个元素的和

let arr = [1, 2, 3, 4];
  let sum = arr.reduce((previousValue, currentValue) => {
    return previousValue + currentValue;
  });
  console.log(sum);

• 注意
• reduce() 对空数组是不执行回调函数的

sort() 函数

• 语法 sort( function(x, y))
  • function（） 可选。 回调函数
• 作用： 返回对数组的引用，不生成新数组
• 例子
  • 对数组中的元素进行排序（不带参数）
  • sort() 函数默认把数组中所有的元素先转化为String类型再进行排序，根据ASCII码进行大小的比较

  let a =  ['MeiTuan', 'WeiXin', 'DingDing'].sort();
   console.log(a); // ["DingDing", "MeiTuan", "WeiXin"]
   
   let b =  ['MeiTuan', 'WeiXin', 'dingding'].sort();
   console.log(b); // ["MeiTuan", "WeiXin", "dingding"]

• 对数组中的元素进行排序（带参数）
• 数组中元素根据回调函数的返回值进行排序

let d = [10, 20, 1, 2];
 let e = d.sort((x, y)=> {
  return x - y;
 });
 console.log(e); // [1, 2, 10, 20]
 console.log(e === d); // true

every() 函数

• 语法 every( function(currentValue, index, arr), thisValue)
• 参数说明
  • function（） 必须。 回调函数
    • currentValue 必须。 当前元素的值
    • index 可选。 当前元素的索引值
    • arr 可选。 原数组
  • thisValue 可选。 执行回调时使用，(可以将局部变量)传递给回调函数，作为this的值
• 作用： 返回值为bool，检测数组中所有元素是否都符合指定条件
  • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
  • 如果所有元素都满足条件，则返回 true
• 例子

let arr = [32, 33, 39, 40];
let result = arr.every((item) => item > 30);
console.log(result); // true

find（）函数

• 语法 find( function(currentValue, index, arr), thisValue)
• 参数说明
  • function（） 必须。 回调函数
    • currentValue 必须。 当前元素的值
    • index 可选。 当前元素的索引值
    • arr 可选。 原数组
  • thisValue 可选。 执行回调时使用，(可以将局部变量)传递给回调函数，作为this的值
• 作用：查找数组中符合条件的第一个元素
  • 如果找到了，返回这个元素, 后面的元素不在执行回调函数
  • 如果没找到，返回undefined
• 例子

let arr = ['Apple', 'pear', 'orange'];
    console.log(arr.find(function (s) {
        return s.toLowerCase() === s;
    })); // 'pear', 因为pear全部是小写

    console.log(arr.find(function (s) {
        return s.toUpperCase() === s;
    })); // undefined, 因为没有全部是大写的元素

• 注意
  • find() 对于空数组，函数是不会执行的
  • find() 并没有改变数组的原始值

findIndex() 函数

• 语法 findIndex( function(currentValue, index, arr), thisValue)
• 参数说明
  • function（） 必须。 回调函数
    • currentValue 必须。 当前元素的值
    • index 可选。 当前元素的索引值
    • arr 可选。 原数组
  • thisValue 可选。 执行回调时使用，(可以将局部变量)传递给回调函数，作为this的值
• 作用：查找数组中符合条件的第一个元素
  • 如果找到了，返回 1, 后面的元素不会执行回调函数
  • 如果没找到，返回 -1
• 例子

	let arr = ['Apple', 'pear', 'orange'];
    console.log(arr.findIndex(function (s) {
       return s.toLowerCase() === s;
   })); // 1

   console.log(arr.findIndex(function (s) {
       return s.toUpperCase() === s;
   })); // -1

• 注意
• findIndex() 对于空数组，函数是不会执行的
• findIndex() 并没有改变数组的原始值

参考资料